Accessibility for Math and Technical Content

1. Accessibility for Math and Technical Content Elizabeth Pyatt, ITS webstandards@psu.edu See Notes panel for image ALT tags

2. Outline • Audiences • Simple Blockers • Describing Complex Images • Simplifying Data Tables • Equation Options • As image with ALT tag • MathML (future is ALMOST here) • Color Coding Gotchas

3. Accessibility Audiences • Blind (Severe Visual Impairment) • Must use screen reader or Braille output • Also Google Bots • Low Vision (Legally Blind) • Must zoom in and rely on good contrast • Also iPhone & Droid phone users • Color Blind (Color Deficient) • Can’t rely on color coding alone • Also bad projection

4. More Audiences • Cognitive/Learning Disabilities • Usability & legibility critical • Not all students process STEM content in the same way…. • Motion Impaired • Can’t use hands (easily) • Deaf • Captions & Transcripts • http://accessibility.psu.edu/video • Neurological (e.g. Epilepsy) • Please don’t flicker quickly

5. Simple Accessibility Fixes • Add Page Titles • Where am I? • Add Headings Subheadings • What’s on this page? • Descriptive link text • Avoid “here” and “Read More” • Enhance “link scent” with descriptive links

6. Page Titles (Easy!) • ANGEL/Blogs/Wikispaces/Drupal • Title field IS document title. • This is very easy! • PowerPoint • Each slide should have a unique title • This is also very easy! • Word/PDF • Start page with document title • Use Heading 1 style

7. Headings on Screenreader Screenreader users can call up lists of headers and links in their screenreader and jump to that point in the screen

8. Headings (Also Simple) • Screenreaders • Read out list of headings • we visually scan them • Screen readers skip format changes • So they need to be H1..H6 type tags • ANGEL HTML Editor • Heading 1…Heading 6 menu option • Word • Heading…Heading 6 styles • PowerPoint • Slide titles • Bulleted list

9. Basic Headings in Action • Wikipedia MLK article using subheadings to mark topic changes

10. Poor Link Text • Blocker because • Screen readers may jump from link to link • “Here” is small and ambiguous • Avoid • For more information about accessibility, click here • “Learn about additional international resources that might be useful in class or in research” • Try This • You can get more information from http://accessibility.psu.edu • Learn more from “International Music Links” • This strategy works across all tools!

11. Image (w/o ALT Tags) • Why it’s a blocker • If it’s not text, it’s not read by the screenreader • Also • Image Maps • Animations • Charts • Diagrams

12. ALT Tag/Text/Attribute • Text which replaces image if it can’t be processed • ALT=“TWT Certificate Program” • Appears when image fails to load on the Web

13. ALT Tag How To • ANGEL • “Alternative Text” field in upload • Word/PowerPoint • Right click image and select “format picture” • Fill in “Alternative Text” tab. • Blogs • Title is ALT text • More • http://accessibility.psu.edu/images

14. ANGEL LMS

15. Word/PowerPoint Right Click on Image Select “Format” Fill in ALT tag.

16. ALT Tag Exercise Twinned Pyrite Crystal. Image from Wikipedia Saturn and Earth Size Comparison Image from NASA

17. Complex Image Strategies • Old: “Long Description”/D-Link • Separate file with description just for those on screen readers • HTML5 deprecating “longdesc” • New: Describe for everyone • Use text description or well-structured table (charts) • ALT tag points to appropriate section of text • Everyone can view description • Not all sighted users process visuals with same degree of ease • NCAM STEM Diagrams • http://ncam.wgbh.org/experience_learn/educational_media/stemdx

18. Concept Map Example Example Website Architecture Map

19. Concept Map Image as Text Outline • Teaching Philosophy • Teaching Section • Courses Taught (can include course descriptions and syllabi) • Teaching Awards and Publications • Teaching with Technology Samples • Samples • Course in which it was used • Teaching goal of the sample • captures or actual document (graphics, audio, video, Powerpoint) • Reflections on how technologies worked • Orginal page: • http://ets.tlt.psu.edu/twt/porOrganization

20. Some Molecules to Describe • Fatty Acids • Fatty Acid • Triglyceride

21. Small Intestine Diagram

22. Table w/ Captions/Headers

23. Why Captions, Headers • Captions (title of table) • Adds context • Headers (first row, col) • Adds information about data • Screenreaders can announce headers in each cell • “Gwyn” OR • “Welsh, White: Gwyn”

24. Simple vs. Complex Data Tables • Simple Tables (Best Choice) • Have no merged cells • Rows represent one type of data • Columns represent another type of data • Are easier to accessify • Are easier for screen readers to process • Complex Tables (Avoid) • Are popular, but not always user friendly • Tricky to maintain code wise • Often based on layout from print sources • We have different options on the Web!

25. Table Set up in ANGEL • ANGEL Table Editor allows • Caption • Set up headers

26. TABLE Troubleshooting 1

27. Add Styled Captions, Headers

28. Troubleshooting 2: Latin Verb Table

29. Splitting Tables • Each table captioned • Can combine with appropriate headings (H3/H4)

30. Very Very Complex Table

31. Maybe it’s a List • Proto Germanic (750 BC - 1 AD) • East Germanic (1 AD - 300 AD) • Gothic† (mostly extinct by 9th century AD) • Vandalic† (extinct by 6th century AD) • Burgundian (extinct by 6th century AD) • Crimean Gothic† • West Germanic (1 AD - 300 AD) • Irminonic (High German) to Old High German to German • Istaevonic/Franconian to Old Frankish to Middle Dutch • Dutch • Afrikaans • Ingvaeonic • Old Saxon to Low German/Saxon • Anglo-Frisian • Old Frisian to Modern Frisan • Old English • Scots • English

32. Charts + TableAdd tabular data for charts Pie Chart Image Pie Chart Image

33. Exotic Symbols & Greek • Exotic Symbols= • ,ə,ŋ, ∲,∑,⊃,¥,₹,₩,₪, 😄,😡 • Best Practice: Use text and use Unicode • Problem: Jaws doesn’t recognize most by default • Solution – Add to JAWS symbol (SBL) file • http://www.personal.psu.edu/ejp10/blogs/gotunicode/2012/04/jaws-13-and-phonetic-symbols.html

34. JAWS Symbol File Entry • U+20B9=Rupee symbol of India • U+20B9 = Unicode number • Look up on http://www.unicode.org • SBL Lists available for • Math symbols • Phonetic symbols • Ask Elizabeth • Voiceover: Includes many symbols by default

35. Equations The Equation Editor is essential!

36. Option 1: Image ALT tag • Export from editor and add ALT tag • Works everywhere • Planck’s Law: • E sub wavelength lambda b = 2 pi Planck constant h c squared over lambda to the 5th times ( e to the hc over lambda k sub b T ) minus 1

37. Issues with ALT Text • This works but • Image may pixelate when zoomed • ALT tags awkward • Images hard to edit

38. Future: MathML • MathML = Math Markup Language • Sample Code • <math xmlns="http://www.w3.org/1998/Math/MathML"> • <semantics> • <msub> • <mi>E</mi> • <mrow> • <mo>&#x3bb;</mo> • <mi>b</mi> • </mrow></msub> • …</math>

39. Output See MathML Test onhttp://accessibility.psu.edu/mathmltest

40. Browser Requirements • Firefox 4+ • Ie9 + MathPlayer 3 (essential for JAWS) • Safari 5.1+ (limited) • No support in Chrome • MathML font like STIX

41. ANGEL • Create HTML 5 doc • Export MathML from Equation Editor • Must use “namespace” option • Embed code into HTML file • Upload to ANGEL • HTML Editor option not working with IE 9 • May not be ready for all instructors to use….

42. MathML Works On ANGEL Blogs (Movable Type) Drupal

43. Where are we? • Focus on design of • Tables, diagrams, equations • Watch for more MathML support • Accessibility won’t just benefit JAWS users

44. Links! Math Accessibilityhttp://accessibility.psu.edu/math Complex Image Accessibilityhttp://accessibility.psu.edu/compleximages NCAM STEM Diagram Accessibilityhttp://ncam.wgbh.org/experience_learn/educational_media/stemdx