How you can become an Accessibility Superhero
•
4 likes•743 views
Steps you can take to make sure your web page is accessible. This talk was given at the Plone Conference 2015 in Bucharest, Romania
Report
Share
How you can become an Accessibility Superhero
- 1. How you can become an Accessibility Superhero Rob Porter IRC: Robzonenet Twitter: Robzonenet Email: rob.porter@wildcardcorp.com
- 4. Helpful hints Headings (H1, H2, H3, H4, H5) H1 H2 H2 H3 H3 H4
- 5. Helpful hints “Read More” or “Click Here”
- 6. Helpful hints Touch Targets for bigger hands http://www.lukew.com/ff/entry.asp?1085
- 7. Helpful Hints Closed captioning for Hearing impaired. https://support.google.com/youtube/answer/2734796? hl=en
- 8. Helpful hints Stop flashing people!
- 9. Helpful hints Test with your keyboard.
- 10. Helpful hints NO TABLES!!! (unless tabular data)
- 11. Helpful hints Viewport tag DON’T DO THIS <meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" name=“viewport”> DO THIS <meta content="width=device-width, initial-scale=1” name="viewport">
- 12. Forms
- 13. Forms Every. Single. Field. Needs. A. Label.
- 14. Forms Every. Single. Field. Needs. A. Label.
- 15. Forms <label for="fname">First Name *</label> <input required type="text" name="fname" id="fname">
- 17. Forms Labels and Placeholders will be redundant!!
- 18. Forms Labels and Placeholders will be redundant!! #contactform label { left: -999em; position: absolute; }
- 19. Forms Labels and Placeholders will be redundant!!
- 20. Forms Labels
- 24. Forms Radio Buttons & Checkboxes Need a Fieldset & Legend <fieldset> <legend>Gender *</legend> <input type="radio" name="gender" value="male" id="male"> <label for="male">Male</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">Female</label> </fieldset>
- 25. Forms: HTML 5 Validation Type=Email <label for="email">Email:</label> <input type="email" name="email" id="email" />
- 26. Forms: HTML 5 Validation Type=“tel” <label for="tel">Tel:</label> <input type="tel" name="tel" id="tel" />
- 27. Forms: HTML 5 Validation Type=“tel” <label for="date">Date:</label> <input type="date" name="date" id="date" />
- 28. Forms: HTML 5 Validation Other Types: • search • email • url • tel • number • range • date • month • week • time • datetime • datetime-local • color
- 29. Modal Windows
- 31. Testing Tools
- 32. Testing: Browser Tools Cross Browser: 1.) AXE http://www.deque.com/products/axe/
- 33. Testing: Browser Tools Firefox: 1.) Fireeyes (firebug add-on) 2.) Wave Evaluation Tool
- 34. Testing: Browser Tools Chrome: 1.) "Accessibility Developer Tools" (made by google as a add on for chrome dev tools) https://chrome.google.com/webstore/detail/ accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en 2.) Wave Evaluation Tool
- 35. Testing: Browser Tools Bookmarklets/Favlets: 1.) HTML_codesniffer bookmarklet: https:// squizlabs.github.io/HTML_CodeSniffer/ 2.) Jim Thatcher’s favelets: http://jimthatcher.com/favelets/
- 36. Testing: Color Tools 1.) Contrast analyzer: https://www.paciellogroup.com/resources/ contrastanalyser/ (windows/mac) * 2.) Sim Daltonism: https://michelf.ca/projects/sim-daltonism/(mac) 3.) Color oracle: http://colororacle.org/usage.html 4.) Snooks Color contrast website: http://www.snook.ca/technical/ colour_contrast/colour.html#fg=FFFF33,bg=333333 5.) Other tools: http://www.color-blindness.com/2008/12/23/15-tools-color- blindness/
- 37. Testing: Screen Readers Screen reader tools: 1.) JAWS: http://www.freedomscientific.com/Products/Blindness/ Windoweyes 2.) NVDA: (python based) http://www.nvaccess.org/ http://webaim.org/resources/shortcuts/nvda 3.) Voice Over: Mac only (computer/iphone/ipad) to start it command + F5 or tell siri to turn on/off voice over 4.) Talkback: Android
- 38. Testing: Screen Readers Best Combos Firefox + NVDA Safari + Voice Over Mobile Safari + Voice Over Firefox + Talkback from android
- 39. WCAG 2.0 AA Checklist http://pauljadam.com/wcag20checklist.html
- 40. WAI-ARIA Web Accessibility Initiative – Accessible Rich Internet Applications https://www.marcozehe.de/2014/03/27/what-is-wai-aria- what-does-it-do-for-me-and-what-not/ HTML 5 makes a good bit of this redundant.
- 43. Really Really Test Michelle "I usually go through most of the pages using the arrows and kind of skim the page. Depending on what JAWS reads about the page in the beginning I sometimes look through the headings first if I know there are enough of them to navigate with. I honestly I rarely use the skip to links." On occasion she uses brail but it is quite noisy She usually use the default speed settings on my devices.
- 45. Really Really Test Luis he used to tab around.when he first started jaws: 1) aria landmarks.. but most don’t use it.. so he may skip to #2 naturally without looking at this 2) opens up a "link list view first".. to see if it has 30 or less links 2) headings view (insert f6).. quickest outline.. jaws goes to the heading.. then tab or arrow down(word for word) 3) then he will use the “key tips”.. h for heading.. f for form iphone: 1) rotor first.. for shortcuts to headings or links 2) right or left flick.. goes through each thing each thing skip to nav is not really used jaws speak speed is 78%… normal is like 20%.. crazy fast.. like the visual audience scanning
- 46. Questions?