1. Elizabeth Pyatt, ITS accessibilityweb@psu.edu http://accessibility.psu.edu See Notes panel for image ALT tags Accessibility Testing with Firefox Plugins

2. Assumptions  Minimal HTML knowledge  Many testing tools assume HTML  BUT these tools work without forcing testers to examine code  Some accessibility wrasslin’ experience  I will try to summarize fixes, but may need to skip ahead  I will be happy to answer questions

3. Outline  Tools  Keyboard Testing  Juicy Studios  WAVE  Others  WAVE Tests  ALT tags  Headings  Tables  Forms  Disable CSS – Reading Order  Colo(u)r Contrast (Juicy Studio)  Triage/Protocol

4. Keyboard Accessibility  Can you operate everything with keyboard commands?  Mouse not usable for  Someone with severe visual impairment  Someone lacking fine motor control in hands  carpal tunnel, tremors, amputation…

5. Keyboard Testing in Browsers  Tab to links, form fields in Browser  Mac - Set up in Preferences  http://accessibility.psu.edu/protocol#keyboard http://accessibility.psu.edu/protocol#keyboard  Blockers for Keyboard Users  Drag/Drop  Autosubmit  Flash/Javascript – If mouse event only  Test – Amazon.comAmazon.com

6. Low Vision Tests  Some visual acuity  Users  Zoom text 200% or more  Require sufficient contrast between light and dark  contrast in terms of light vs. dark  between text/background or graphic/background

7. Zoom in Test  About 200%  Options under View menu  Look for bad overlaps/ image pixellation

8. Color Contrast (Luminosity)

9. Luminosity Contrast Goals  Goal:  Luminosity Contrast test  WCAG 2.0, Level AA is goal at Penn State  AAA even better!  Large Text  18 pt/px and above OR  14 pt/px bold and above  AA large text a Fail if used for regular text  Minor Color Adjustments  Can make a huge difference

10. Luminosity Test Time  Pick a Site  NOT black and white  OR http://www.miamidolphins.com/http://www.miamidolphins.com/

11. Juicy Studios  Click  “Colour Contrast Analyser” in WAVE Tools  Report gives  Element (e.g. A/H2)  Hex color code  Ratio to background  Pass level or fail  Text color only

12. WAVE: Disable Style Sheets  Click “Disable Style Sheets”  Shows underlying order  Undoes CSS for menus, effects  Shows reading order in a screen reader

13. CSS Demo  Amazon.com

14. CSS Positioning Gotchas  Note how link moves when CSS is disabled  CSS used fixed/absolute position  Float:right can also distort order

15. WAVE Report  Click “Errors, Features, Alerts”  Generates multiple icons  Green/blue = good  Yellow = caution (may be OK, may not be)  Red = violation (usually a Fail)  Works for any single page  Including password protected pages  Tests  ALT text, headings, table tags, form labels, vague link text, others

16. WAVE Report: ALT Text  Purpose of ALT text  Describe image briefly  ALT Text ≠ Picture Caption  Describe image literally  NOT copyright, credits, extra details,  NOT snarky yearbook style captions  WAVE report  Displays ALT text  Or error if no ALT text

17. ALT Tag Report Demo  Pick a Site with lots of pictures OR  http://www.baltimoreravens.com http://www.baltimoreravens.com  http://www.baltimoreravens.com/news/articl e-1/Courtney-Upshaw-Again-Trying-To-Shed- Pounds-/b6a24fc1-4b99-49aa-9591- 0e44ff275620 http://www.baltimoreravens.com/news/articl e-1/Courtney-Upshaw-Again-Trying-To-Shed- Pounds-/b6a24fc1-4b99-49aa-9591- 0e44ff275620

18. Missing ALT tag Icon

19. ALT Tag Text Displayed

20. Bad ALT Text

21. Heading/H tag  H1, H2, H3, H4….H6  Major sections on a page  Used to enhance cognitive processing  Format changes not sufficient for screen readers to recognize  Use also for  Identify menus in side/top  News headlines

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

23. Headings Test  Pick site with lots of sections  OR http://www.bbc.co.uk/http://www.bbc.co.uk/  Icons show  Presence/level of heading (H1…H6)  May warn if text has heading format, but no H tag.

24. Blog Headings in WAVE

25. Fake H and Bad Link Text Warnings

26. HTML Tables  Should have  Caption and/or Summary  First row are headers (TH)  TH scope=“col” for each cell  vs. normal TD cell  First col can also be headers  TH scope=“row” for each cell  Headers  Screen readers can read col/row header for each cell

27. Well Formed Table (Success!)  Icons indicate presence of TH tags and scope  Caption visible at top of table

28. The Layout Table  Table icon without cells = probable layout table  No cells are headers  Layout tables not recommended but NOT a major blocker for screen readers

29. Complex Table

30. Table Summary (Juicy Studios Toolbar)

31. Tables Test  Pick a site with lots of data tables  OR  http://en.wikipedia.org/wiki/List_of_capitals_i n_the_United_States http://en.wikipedia.org/wiki/List_of_capitals_i n_the_United_States

32. Forms  Screen readers need  Identify form field with a LABEL  My e-mail address is  goes with  goes with radio button

33. WAVE Report

34. WAVE Demo  Pick site!  Contact/Registration Form  Search Form  http://www.engineeringtoolbox.com/co nverting-cartesian-polar-coordinates- d_1347.html http://www.engineeringtoolbox.com/co nverting-cartesian-polar-coordinates- d_1347.html

35. Deaf and Persons with Partial Hearing Loss  Video captions & audio transcript  Benefits for these audiences  Non-native speakers  Muddled audio  Unclear terminology  Audio connection lost  No headphones in CLC labs  Back of lecture hall

36. Test for Captions  Play video  See if captions appear OR  Look for “ CC ” or caption button  Play captions to verify accuracy  Audio  Look for transcript link or text  Creating captions  http://accessibility.psu.edu/video http://accessibility.psu.edu/video

37. YouTube Caption Example CC Button Caption (TLT Channel)

38. Beware “English (Automatic)” NOCd Up Episode 147 University of Georgia swim team peforming Harlem Shake

39. Example Audio Transcript  Full transcript on  http://tlt.its.psu.edu/2012/08/09/conversations-episode-8-learning-design-summer-camp/ http://tlt.its.psu.edu/2012/08/09/conversations-episode-8-learning-design-summer-camp/

40. Triage  DON’T Test all pages in all tools  Protocol  Test sample page for template (WAVE/Juicy Colour)  Test any images for ALT tags  Test any video for captions  Test all tables/forms in WAVE  Use screen reader to test unusual items  Flash, PDF, HTML 5, a game, Twitter, …

41. Other Tools: Compliance Sheriff  Compliance Sheriff  Maintained by ITS  Scans entire sites BUT  Reports are “quirky” and incomplete  Use to find specific issues  image ALT tags, table issues, page titles, redundant links  Accounts  Request through Web Liaison  Documentation  http://accessibility.psu.edu/compliance-sheriff http://accessibility.psu.edu/compliance-sheriff

42. What Compliance Sheriff Skips  Compliance Sheriff can’t determine  If a video has captions  If ALT tags on images make sense  If text formatted as a header IS a header  If there are color coding issues  If non-HTML document or tool works on a screen reader  Word, PowerPoint, Flash, PDF

43. Screen Reader Testing  Best for  New technology  All PDF, Flash, web apps  Use LAST  Or send to a tester if available  Best configurations  JAWS + Win Internet Explorer  Available in select CLC facilities incl Libraries  Voiceover + Mac Safari (all Macs)  http://accessibility.psu.edu/testing http://accessibility.psu.edu/testing

44. Links!  Accessibility at Penn State http://accessibility.psu.edu/ Accessibility at Penn State  Testing and Triage http://equity.psu.edu/ods Testing and Triage