Examples of Accessible Course Content

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

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

3. 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

4. Case: Severe Visual Impairment • Requires a screen reader to read Web content aloud • Multimedia, images need to be describedNot all descriptions need to be hidden • Program elements need to identify themselves • Hidden Audience • Text-based mobile device, missing plugin, images disabled, or broken image link

5. What the “ALT Tag” does Molecules in uneven heat Title: Non-uniform density in system of non-uniform 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

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

7. Alt Tag Blogs/Dreamweaver 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

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

9. Screen Reader New Apps Gotcha • Not all apps and plugins include information for screen reader • Old iTunes: MP3 music files were accessbile, but navigation in iTunes was not • Some users encounter difficulty creating a login! (esp Flash based interface) • Web Forms – Need to signal new informationSee WAI-ARIA for how to code. JavaScript CAN be accessible.

10. Case: Hearing Impaired • You cannot hear content • Captions, 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

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

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

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

14. MovCaptioner Tool (PSU)

15. 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

16. 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

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

18. 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

19. 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 (iPhone/Blackberry)

20. 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?

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

22. Check Color Contrast • http://juicystudio.com/services/luminositycontrastratio.php OR • http://webaim.org/resources/contrastchecker/ • AAA: All Good (Full Speed Ahead) • AA: Large Text Only (18 pix/14 pix bold) • Fail: Avoid (There is no “A”)

23. 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 #F3F6FF link text = #049 (bold)

24. 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

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

26. 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

27. 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

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

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

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

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

32. Headers in Web Tools • Site title = H1, Page Title = H2 • Movable Type (Default) • Drupal (Default) • Page Title = H1 • Plone • Dreamweaver! • ANGEL = ???? (Structure is used)

33. 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 = <br /> • Movable Type 4.1 • Word Press (older version) • Drupal (unless FCK editor installed)

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

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

36. 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: right can literally reverse display order from code order

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