Examples of Accessible Course Content Elizabeth J Pyatt

Examples of Accessible Course Content Elizabeth J. Pyatt, Ph. D. (ejp 10@psu. edu) Information Technology Services

Accessibility or Universal Design? “Universal Design” § Designing for the largest audience ability possible regardless of disability or – UMN Duluth Web Glossary “Universal Access” “…regardless of disability, location, device or speed of connection to the Internet [or audio]”

Example Needs • Visually impaired § On a screen reader • Hearing Impaired § Captions/transcripts needed • Low Vision § Legibility crucial, may zoon to 200% • Motion Impaired (hands) § Keyboard access critical

Case: 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 • Hidden Audience § Text-based mobile device, missinglink plugin, images disabled, or broken image

What the “ALT Tag” does Molecules in uneven heat Title: Non-uniform density in system of nonuniform temperature. Image shows hot fluid at bottom with fewer atoms and cooler fluid at top with more atoms. Text describes distribution of atoms. Let’s view the example

ALT Tagger in ANGEL CMS 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

Other Applications • Microsoft Office (Windows) § Right Click on image to add ALT Tag • Flickr § File name = ALT Tag (OK unless its “Photo 97”) • Drupal § ALT tag tool (code view) or enter manually

Screen Reader 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.

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

Captions Reveal Information Caption shows how to spell Cole Camplese’s name. Let’s view an example

About Captions • About ½ students in Phil 12 used caption option in videos • External text files can be created for § Quicktime § Flash Video § Podcast (tricky) § You. Tube § Streamed Video (must “burn” captions)

Captioning Tools • Mov. Captioner (formerly Parity) § http: //www. synchrimedia. com/ § Free to Penn State § Mac only § Contact Pat Besong (pzb 4@psu. edu) • Windows Solutions § MAGPie (Free from http: //ncam. wgbh. org/webaccess/magpie/) § Others for Windows and Mac

Mov. Captioner Tool (PSU)

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

Case: Motion Impaired • Impaired with respect to HANDS • Common because it includes: § Carpal Tunnel, Parkinsons, Essential Tremor § Broken/sprained wrist § Anyone using a new input device • Keyboard access is best § Easy to aim for a key • Voice Recognition useful

Controls for Animation Keyboard: S = Start/Slow, F = Fast, space = pause. Let’s view animation

Speaking of Animations… • Animations should begin as “stopped” § Avoids distraction for some users • Users should be able to stop and start at will • Animations should be described for visually impaired users • If interactive form, then describe to screen readers

Case: Low Vision • “Legally Blind”, but also older users § Extreme – Zoom page 200% or more • Needs § Good value contrast § Clear fonts. § Text zooms better than images • Hidden Audience § Older users § Users on mobile devices (i. Phone/Blackberry)

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?

At 300% - Text Better than Image Which part of content is an image? Equation!

Check Color Contrast • 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”)

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)

Other Common Layout Problems • Text set at 10 point (12 or more better) • Sidebar/footer text at 8 point (9 point minimum) • Gray text on white § #66666 OK, but not #99999 on white § Links too pale or too dark or indistinct

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

Data Tables • Not but headers should be TH tag § Note CSS is used to format TH cells (top row) § Left col could also be TH • Caption (title) also beneficial View the Code

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!

Joy of CSS Styles • CSS Allows you to use “correct” HTML but control formatting • Examples § Customize H 1, H 2 § Colored Areas § Single line spacing P instead of BR § Margin control § Format “Special Tags” § Fake Rollover Buttons (better than images)

When CSS Goes Bad • CSS in accessible if § Font sizes set too small § Not enough color contrast § CSS moves things out of logical order • Float: from codeliterally reverse display right can order

Is there more? • But of course! § http: //accessibility. psu. edu § http: //blogs. tlt. psu. edu/projects/accessibili tydemo/ § http: //www. webaim. org