Test Your Fancy-Pants Website for Accessibility
- 1. Test Your Fancy-Pants Website for Accessibility Presented by Amber Himes Matz #devsigner @amberhimesmatz
- 2. A quick word about testing…
- 3. The Basics
- 4. The Low-Hanging Fruit • A Title for Every Page • Alternative text for every meaningful image • Headings. In order. (Don’t skip) • Sufficient color contrast ratio. So we can read it. • Resize the text. It’s fun for all ages. • Navigate with keyboard
- 5. Forms…Check! • Label your form elements <label for=“search”>Search</label> <input type=“text” name=“search” /> • Navigate and submit the form with keyboard only • Indicate required fields with more than color • Indicate errors in fields with more than color • Position elements correctly for your language
- 6. Audio/Video • Keyboard access • Turn off auto-start • Provide Control: Pause, Stop, Volume, Mute • Sync’d captions • Best practice: provide a written transcript • Describe it
- 7. Sensible Structure • Linearize the page. Does it make sense? • Turn off all styles. Does it make sense? • Turn off all images. Does it make sense? • Are there clear headings for each section? • No need to linearize tables, just mark them up properly.
- 9. The Four Categories of Accessibility Not just one. Four.
- 10. Visual • Non-sighted • Low-vision • Obstructed vision • Anyone over 40
- 11. Auditory • Yes, the web is a visual medium, but… • Ever forgot your headphones in a public setting? • Captions, transcripts are helpful
- 12. Motor • Wide range of motor impairments • May be using assistive technology like: • Specialized keyboards • Eye trackers • A Single Button
- 13. Cognitive • Easing the processing of information • Clear and concise language — good for everyone! • Associated conditions: • Down’s syndrome • Autism • Developmental delay • Dyslexia
- 14. Temporary Disabilities • Injury • Situational — hands-free, voice activation, glare on screen
- 15. Testing
- 16. Real-World Testing • Keyboard navigation only • VoiceOver (OS X) • NVDA (Windows) • Zoom-in text • Accessibility Preferences
- 17. Auditors • WAVE — http://wave.webaim.org/ • quail — http://quailjs.org/ • tenon — http://tenon.io/ • HTML Validator — https://validator.w3.org/nu/
- 18. Automated Testing • axe-core — https://github.com/dequelabs/axe-core
- 19. Helpers/Tools • tota11y http://khan.github.io/tota11y/ • Contrast Ratio http://leaverou.github.io/contrast-ratio/
- 20. Simulators/Emulators • Color Oracle — http://colororacle.org/ • Color Contrast Analyzer (Chrome Extension) • High Contrast (Chrome Extension) • WCAG Color Contrast Checker (Firefox)
- 21. Standards/Guidelines • Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/ • WAI-ARIA Accessible Rich Internet Applications Suite http://www.w3.org/WAI/intro/aria.php • HTML Living Standard https://html.spec.whatwg.org/ • Authoring Tool Accessibility Guidelines (ATAG) 2.0 http://www.w3.org/TR/ATAG20/
- 22. FUN TIME
- 23. VoiceOver
- 24. WAVE
- 25. tota11y
- 27. Color Oracle
- 28. Resources • The Accessibility Project http://a11yproject.com/ • Web Accessibility Initiative http://www.w3.org/WAI/ • Drupalize.Me Podcast: Let’s Chat About Accessibility https://www.lullabot.com/podcasts/drupalizeme- podcast/lets-chat-about-web-accessibility
- 29. Evaluate this Session “Test Your Fancy-Pants Website for Accessibility” (Amber Matz) http://www.devsignercon.com/eval All evaluations will be submitted in a drawing to win: Drupalize.Me 1-month membership PHPStorm License