Accessibility Without Tears Examples from Real Courses Elizabeth

Accessibility Without Tears? Examples from Real Courses Elizabeth J. Pyatt, Ph. D. (ejp 10@psu. edu) Information Technology Services (TLT)

Outline • Audience Needs § Tech & standards change, but needs are the same • Common Issues § Examples from Real Courses § Workflow recommendations § More exotic examples (Time permitting)

Two Courses • Phil 12 – Symbolic Logic § Video (with captions) § Unusual symbols § Proof Tables (exotic) • ME 300 – Thermodynamics § Images & animations § Math Symbols • Both – navigation, layout, structure

Audiences • Severe Visual Impairment (Screenreader) • Low Vision (Zoom 200% or more) • Motion Impaired (esp hands) • Hearing Impaired (need to read) • Cognitive Impairments • Neurological (Epilepsy, Migraines? )

Severe Visual Impairment • Requires a screen reader to read Web content aloud § Multimedia, images need to be hidden need to be described Not all descriptions § Program elements need to identify themselves § Form fields should announce info needed • Hidden Audience § Text-based mobile device, missinglink plugin, images disabled, or broken image

What the “ALT Tag” does Text describes piston position Piston diagram images

Nitty Gritty: Alt Tags • ALT tag describes image if image disabled § 155 characters or less § Use extended link if more information is needed § You don’t need to describe decorative images § If image is a link, describe destination, not link § Imagine you’re on the phone!

Insert an Alt Tag (PSU Logo) tag • HTML Alt § <img src=“logo. gif” alt = “Penn State” /> • Add Tool Tip (Title) § <img src to“logo. gif” alt Home Page” /> = = “Penn State” title=“Go Penn State • Alt tag tools available in ANGEL, Dreamweaver, Movable Type, …

ALT Tagger in ANGEL Enter information “Alternative Text” field when uploading images

Alt Tag Blogs/Dreamweaver Insert Image: Usually prompts for “Alternative Text” Blogs: Name field = ALT tag. By default the file name is the ALT tag (not always helpful). Dreamweaver Properties Window Includes ALT tag when image selected

ALT Tag – Word/Power. Point • Correct Way (Windows Only) § Right “Alternative Text” tab toproperties. click on image to open Click enter ALT tag. • Not-so-Correct, but faculty friendly § Add label or caption for each image § Only option on the Mac

Extended Description (Graph) extended description page • Provide link to On D Link Page: “x axis is specific volume; y axis is presssure…. ” Engineering diagram with “D” link to right. ALT tag says to click D for more info. Page can include data

Workflow for many images • Add ALT text in Word for Webmaster to insert • For CMS (ANGEL/Drupal/Movable Type) § Compose ininto desired setting cut and Dreamweaver, then paste page • The key is to tag each image as it comes

Cognitive Disabilities • Interface should be simple and consistent § Use same language throughout site/tool § Use language audience will understand § Restrict icons to the basics (e. g. arrow icon) § Provide “Global View” (all options at once) § Don’t hide information too quickly § Let user start/stop animation & audio

Hidden Cognitive Audience • Everyone appreciates usability • Learners often have “simpler” mental models than experts § Includes instructors learning new tech!

Do Icons Always Help? • Icons commonly recommended for cognitively disabled audience (e. g. arrows, checks/X, print…) • BUT – Supplement ambiguous icons w/ labels What are these icons? Icons + labels

Headings and Structure • Screen readers can jump from header to header. § H 1 = page title, H 2 = major headings § H 3 = subheaders § Screen readers can pause on a P tag • Provides cognitive structure/usability • Google scans headers (instant outline) • Use CSS to format headers

Headers in Blogs • As tested on http: //wave. webaim. org • Blog title = H 1, entry title = H 2 • Column headers = H 3 (not seen) Blog page as seen on WAVE. H tags are marked in blue.

Headers in Courses § H 1 should (ideally) be title of page has each page, not the site. Otherwise each same title Math course with page title as H 1.

Headers in Web Tools • Site title = H 1, Page Title = H 2 § Movable Type (Default) § Drupal (Default) • Page Title = H 1 § Plone § Dreamweaver! • ANGEL = ? ? (Structure is used)

Line Breaks in Web Tools • Each paragraph should be a P tag § Enhances screen reader jumping/pausing • Return = <p></p> § Plone § ANGEL 7. 3 HTML Editor (FCK) • Return = § Movable Type 4. 1 § Word Press (older version) § Drupal (unless FCK editor installed)

Headings in Word & PPT • Word Heading 1/Heading 2 style serve the same function as H 1/H 2 § Converted to tagged headers in PDF § Cut and paste into Dreamweaver converts to H 1/H 2… § Use Styles pane to edit appearance • Powerpoint Titles like headers § Converted to H 1 in HTML conversion § So…title every slide!

PDF Files • Use as last resort, not easy fix § Layout issues for motion impaired, cognitive impaired, & screen readers • Best to convert from text based file (e. g. Word, PPT) not graphic • Headings should be “tagged” § Word Styles for Heading 1/Heading 2 are tagged. Otherwise use advanced tools in Adobe Acrobat • Scanned pages = images (unless OCR)

Data Tables • Not forbidden but need to have headers identified • Caption (title) also beneficial • A sample data table (top row = header) § Left col may also be header

HTML TH tag for Headers <table> <caption>Constants by substance</caption> <tr> <th scope=“col”>Molecule</th> <th scope = “col”>Constant a</th> </tr> <th scope=“row”>Ammonia</th> <td>4. 223 a</td> </table>

Table Tags • Why TH? § Screen readers speak data & associated headers for each cell • Caption: Adds title to table § <table><caption>…</caption> <tr>…</tr></table> • FYI - Any tag can have CSS applied • Avoid merging/splitting cells (multiple simple tables may be better)

Dreamweaver Table Insertion of headers along with • Decide location number of rows and columns when inserting table into Dreamweaver. • Can copy/paste HTML in other systems

Low Vision Users • May zoom browser 200% or more § Good color contrast (light vs dark) § Fonts should be extra legible on Web § Text zooms betterover images whenever than images. Use CSS to add formatting possible • Hidden Audience § i. Phone users § Older users • Will Kindle make a difference?

At 300% Zoom Which part of content is an image? Equation!

A Little Hard on the Eyes? Light gray field labels Tiny Text (7/8 pt) Can you see the text? An entire page in a cursive font?

Color Contrast Checkers • http: //juicystudio. com/services/lumi nositycontrastratio. php OR • http: //webaim. org/resources/contra stchecker/ § AAA: All Good (Full Speed Ahead) § AA: Large Text Only (18 pix/14 pix bold) § Fail: Avoid (There is no “A”)

Example & Test Results Pale blue #F 3 FF 6 FF / link text = #003 B 94

Two Blue Color Schemes • Minor adjustments can change a borderline scheme to a good one and preserve designer intent AA Level Only Pale blue #CDF/ link text = #058 AAA Level Pale blue #F 3 F 6 FF link text = #049 (bold)

Color Deficient users • Primarily Red/Green (10% men) § Design so (or grayscale) information viewable in black and white § Underline your text links § Supplement color coding with shape • Red X and Green √ • Hidden Audience ANGEL Quiz Scores X & √ § People with a black and white printer

Different Colored World Color coded text Color deficient: Shades of brown and blue Color coded currency exchange. Green = up, red = down Deuteranopia view (Photoshop Proof) Up/down arrows still informative

Hearing Impaired • You cannot hear content § Captions, captions (or transcript) § Some users more fluent in sign language • Hidden Users § Forgot headphone in lab or audio cuts out § Can’t find one of 5 volume controls § Poor audio quality (even for normal hearing) § Noisy room § Non-native speakers § 50% students used captions in online class

Captions Reveal Information Caption explains WHY proofs have these steps

Backup Text • Summary can let users read crucial information without (re)-viewing 5 min video Steps of logic proof summarized in text for quick reference. Done as a table with CSS.

Find Me Some Captions! • The hardest part is the transcript. Can you: § Write a script first § Order a transcript/script from a TV show § Buy the DVD (which often has English subtitles) § Pay a student or TA to transcribe? NOT a high end skill § Speech recognition an option, but proof text. § Live captioning requires a specialist

Caption Tool • Parity (Penn State) § Auto looping speeds process § Parity free (Mac only) and in CLC labs § Easy to learn (time codes automatic) § Exports transcript in external text file § Multiple formats (Quicktime, Flash, You. Tube…) • Other Tools § Mag. Pie (Free from WGBH NCAM) § Others

Parity Tool

Post to Web • Captions may be an external text file (Quicktime) or XML file (Flash) or other text file. § Good if you need to fix a typo § SMIL file together – places video & (Quicktime) captions • Place all files in same directory

Sample File Quicktime • Captions(Quicktime) § {QTtext}{font: Arial}{justify: center}{size: 16}{ti me. Scale: 100}{width: 320}{height: 40}{back. Co § lor: 0, 0, 0} … [00: 52. 15] {font: Arial}{size: 14}{Plain}{text. Color: 65535, 0}Now, there are two ways of crossing the road. <Walk in front of car> and this way • Requires SMIL (XML) § Creates player interface & loads video/captions

Motion Impaired • Keyboard always easier than mouse § Enable keyboard tabbing on forms, links § Develop text-based alternative (esp. drop down menus) § Keyboard shortcuts (e. g. games, Flash controls) § BIG click targets & avoid disappearing controls • Hidden Audience § Carpal tunnel, broken wrist, essential tremor, § New to mouse, i. Phone, track pad…

Math – Single Lines • If one line – then use plain text (w/Unicode for symbols) § ∀x(1 x ⊃ Ux) ∧ ~Mx (Phil 12) § δW = W =∮ F∙ds (ME 300) 1 2 • Text clearer when zoomed, exports to XML and can be read by screen reader (with right. sbl file)

Multiline Equations • Multiline = Fraction, roots • Choices § Image with ALT tag § Math. ML (still 2 flavors for Firefox & IE) § Table layout tricks (tricky)

Equation Editors • Easily format equation with templates • Math. Type & Math. Magic 2 options • Export into multiple formats § Math. ML (Firefox & IE), for future reference § Images (e. . g. JPG, GIF) • IPNG/GIF PDF then convert to export to § La. Tex (another common standard)

Math Magic Screen

Proof Tables (Phil 12) • • • HTML Table with CSS Top line = caption, but no TH Lines are cell tweaked cell borders Padding adds appropriate space Invisible graphic with ALT text announces line (or “sub proof”)

New Tech Checks • Check to see if it works on a screen reader • Check for keyboard alternates • If video, check for caption capabilities • Is interface low-vision & color blind friendly? • Think of a Plan B! § Even if it’s “old school”

New Apps Gotcha • Not all apps and plugins include information for screen reader § Old i. Tunes: but navigation in were was MP 3 music files accessbile, i. Tunes § § not Some users encounter difficulty creating a login! (esp Flash based interface) Web Forms – Need to signal new information See WAI-ARIA for how to code. Java. Script CAN be accessible.

Final Tips • HTML is still the most accessible tech § Use Flash for multimedia, but notyou do) navigation/forms (or be careful if § Use PDF only other way CAN’T be for files which delivered any • Asynhchronous (e-mail, discussion board) can be more accessible than synchronous (e. g. chat, Connect) Text chat may be more accessible than audio (if student hearing impaired) Or maybe use the phone (if on screen § §

Cautions • Don’t Panic! • Make sure complex accessibility tag really supported by JAWS • XHTML Standards ≠ accessibility § They are complementary but not identical • 75% = common sense • Some human intervention may be needed for unusual cases

Help is Available • Penn State § http: //accessibility. psu. edu/ (Penn State Hub) § Tutorial & Tips by Technology • i. CITA (Illinois) § http: //fae. cita. uiuc. edu (FAE Evaluator) § http: //firefox. cita. uiuc. edu (Firefox Plugin) • Web. AIM § http: //www. webaim. org (Web. AIM) § http: //wave. webaim. org (Visual Evaluator)

More Resources • Accessible Web Publishing Wizard § http: //www. virtual 508. com/ • • Microsoft® Word to HTML Microsoft® Powerpoint to HTML • Parity § Practical video captioning § Contact Pat Besong (pzb 4@psu. edu) • The End…for now

More Failed Contrast • White and Teal (#088) § AA at #088; below) AAA at #055 (see image • White and Gray (#999) § AA at #888; AAA at #555 (see 3 images below)