Embed Size (px)
Citation preview
Test Your Fancy-Pants Website
for AccessibilityPresented by Amber Himes Matz
#devsigner @amberhimesmatz
A quick word about testing…
The Basics
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
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
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
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.
The Four Categories of Accessibility
Not just one. Four.
Visual
• Non-sighted
• Low-vision
• Obstructed vision
• Anyone over 40
Auditory
• Yes, the web is a visual medium, but…
• Ever forgot your headphones in a public setting?
• Captions, transcripts are helpful
Motor
• Wide range of motor impairments
• May be using assistive technology like:
• Specialized keyboards
• Eye trackers
• A Single Button
Cognitive• Easing the processing of information
• Clear and concise language — good for everyone!
• Associated conditions:
• Down’s syndrome
• Autism
• Developmental delay
• Dyslexia
Temporary Disabilities
• Injury
• Situational — hands-free, voice activation, glare on screen
Testing
Real-World Testing
• Keyboard navigation only
• VoiceOver (OS X)
• NVDA (Windows)
• Zoom-in text
• Accessibility Preferences
Auditors
• WAVE — http://wave.webaim.org/
• quail — http://quailjs.org/
• tenon — http://tenon.io/
• HTML Validator — https://validator.w3.org/nu/
Automated Testing
• axe-core — https://github.com/dequelabs/axe-core
Helpers/Tools
• tota11yhttp://khan.github.io/tota11y/
• Contrast Ratiohttp://leaverou.github.io/contrast-ratio/
Simulators/Emulators
• Color Oracle — http://colororacle.org/
• Color Contrast Analyzer (Chrome Extension)
• High Contrast (Chrome Extension)
• WCAG Color Contrast Checker (Firefox)
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/
FUN TIME
VoiceOver
WAVE
tota11y
Color/High Contrast Analyzer
Color Oracle
Resources
• The Accessibility Projecthttp://a11yproject.com/
• Web Accessibility Initiativehttp://www.w3.org/WAI/
• Drupalize.Me Podcast: Let’s Chat About Accessibility https://www.lullabot.com/podcasts/drupalizeme-podcast/lets-chat-about-web-accessibility
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
