How you can become an Accessibility Superhero
Rob PorterIRC: Robzonenet Twitter: Robzonenet Email: [email protected]
Helpful hintsTouch Targets for bigger hands
http://www.lukew.com/ff/entry.asp?1085
Helpful HintsClosed captioning for Hearing impaired.
https://support.google.com/youtube/answer/2734796?hl=en
Helpful hintsViewport 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">
FormsLabels and Placeholders will be redundant!!
#contactform label { left: -999em; position: absolute; }
FormsRadio 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>
Forms: HTML 5 ValidationType=Email
<label for="email">Email:</label> <input type="email" name="email" id="email" />
Forms: HTML 5 ValidationType=“tel”
<label for="tel">Tel:</label> <input type="tel" name="tel" id="tel" />
Forms: HTML 5 ValidationType=“tel”
<label for="date">Date:</label>
<input type="date" name="date" id="date" />
Forms: HTML 5 ValidationOther Types: • search • email • url • tel • number • range • date • month • week • time • datetime • datetime-local • color
Modal Windows
Example: https://jqueryui.com/dialog/#modal-form
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
Testing: Browser Tools Bookmarklets/Favlets: 1.) HTML_codesniffer bookmarklet: https://squizlabs.github.io/HTML_CodeSniffer/
2.) Jim Thatcher’s favelets: http://jimthatcher.com/favelets/
Testing: Color Tools1.) 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/
Testing: Screen ReadersScreen 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
Testing: Screen ReadersBest Combos
Firefox + NVDA
Safari + Voice Over
Mobile Safari + Voice Over Firefox + Talkback from android
WAI-ARIAWeb 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.
Really Really TestMichelle
"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.
Really Really TestLuis 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
Top Related