How you can become an Accessibility Superhero

Rob PorterIRC: Robzonenet Twitter: Robzonenet Email: rob.porter@wildcardcorp.com

Helpful hintsHeadings (H1, H2, H3, H4, H5)

H1 H2 H2

H3 H3

H4

Helpful hints“Read More” or “Click Here”

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 hintsStop flashing people!

Helpful hintsTest with your keyboard.

Helpful hintsNO TABLES!!! (unless tabular data)

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">

Forms

Forms

Every. Single. Field. Needs. A. Label.

Forms

Every. Single. Field. Needs. A. Label.

Forms

<label for="fname">First Name *</label>

<input required type="text" name="fname" id="fname">

FormsWhat about Placeholders?

FormsLabels and Placeholders will be redundant!!

FormsLabels and Placeholders will be redundant!!

#contactform label { left: -999em; position: absolute; }

FormsLabels and Placeholders will be redundant!!

FormsLabels

FormsRequired.. *

FormsForm Validation Alerts

Forms<label for="bday">Birthday * MM/DD/YYYY</label>

<input type="text" name="bday" id="bday">

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

Modal Windows

Example: https://jqueryui.com/dialog/#modal-form

Testing Tools

Testing: Browser ToolsCross Browser: 1.) AXE http://www.deque.com/products/axe/

Testing: Browser ToolsFirefox: 1.) Fireeyes (firebug add-on)

2.) Wave Evaluation Tool

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

WCAG 2.0 AA Checklisthttp://pauljadam.com/wcag20checklist.html

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 Test

Really Really TestMichelle

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

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

Questions?