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

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

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

4. 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?)

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

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

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

8. Insert an Alt Tag (PSU Logo) HTML Alt tag  Add Tool Tip (Title)  Alt tag tools available in ANGEL, Dreamweaver, Movable Type,…

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

10. Alt Tag Blogs/Dreamweaver 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 Dreamweaver Insert Image: Usually prompts for “Alternative Text”

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

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

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

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

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

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

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

18. Headers in Blogs As tested on http://wave.webaim.orghttp://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.

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

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

21. Line Breaks in Web Tools Each paragraph should be a P tag  Enhances screen reader jumping/pausing Return =  Plone  ANGEL 7.3 HTML Editor (FCK) Return =  Movable Type 4.1  Word Press (older version)  Drupal (unless FCK editor installed)

22. 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!

23. 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)

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

25. HTML TH tag for Headers Constants by substance Molecule Constant a Ammonia 4.223a

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

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

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

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

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

31. Color Contrast Checkers http://juicystudio.com/services/lumi nositycontrastratio.php OR http://juicystudio.com/services/lumi nositycontrastratio.php http://webaim.org/resources/contra stchecker/ 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”)

32. Example & Test Results Pale blue #F3FF6FF / link text = #003B94

33. 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)

34. 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 & √

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

36. Hearing Impaired You cannot hear content  Captions, 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

37. Captions Reveal Information Caption explains WHY proofs have these steps

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

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

40. 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, YouTube…) Other Tools  MagPie (Free from WGBH NCAM)  Others

41. Parity Tool

42. 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 (Quicktime) – places video & captions together Place all files in same directory

43. Sample File Quicktime Captions(Quicktime)  {QTtext}{font:Arial}{justify:center}{size:16}{ti meScale:100}{width:320}{height:40}{backCo lor:0, 0, 0} … [00:00:52.15]  {font:Arial}{size:14}{Plain}{textColor:65535, 65535, 0}Now, there are two ways of crossing the road. and this way Requires SMIL (XML)  Creates player interface & loads video/captions  SMIL ≠ Flash (Flash may have.as file instead)

44. 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, iPhone, track pad…

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

46. Multiline Equations Multiline = Fraction, roots Choices  Image with ALT tag  MathML (still 2 flavors for Firefox & IE)  Table layout tricks (tricky)

47. Equation Editors Easily format equation with templates MathType & MathMagic 2 options Export into multiple formats  MathML (Firefox & IE), for future reference  Images (e..g. JPG, GIF) I export to PDF then convert to PNG/GIF  LaTex (another common standard)

48. Math Magic Screen

49. 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”)

50. 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”

51. 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 information See WAI-ARIA for how to code. JavaScript CAN be accessible.

52. Final Tips HTML is still the most accessible tech  Use Flash for multimedia, but not navigation/forms (or be careful if you do)  Use PDF only for files which CAN’T be delivered any other way 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 reader)

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

54. Help is Available Penn State  http://accessibility.psu.edu/ (Penn State Hub) http://accessibility.psu.edu/  Tutorial & Tips by Technology iCITA (Illinois)  http://fae.cita.uiuc.edu (FAE Evaluator) http://fae.cita.uiuc.edu  http://firefox.cita.uiuc.edu (Firefox Plugin) http://firefox.cita.uiuc.edu WebAIM  http://www.webaim.org (WebAIM) http://www.webaim.org  http://wave.webaim.org (Visual Evaluator) http://wave.webaim.org

55. More Resources Accessible Web Publishing Wizard  http://www.virtual508.com/ http://www.virtual508.com/ Microsoft® Word to HTML Microsoft® Powerpoint to HTML Parity  Practical video captioning  Contact Pat Besong (pzb4@psu.edu)pzb4@psu.edu The End…for now

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