Embed Size (px)
DESCRIPTION
In this talk I look at a few ways in which JavaScript actually helps make web sites more accessible despite the bad name it might have in some accessibility circles.
Citation preview
JavaScript and Accessibility:Creating interface Magic for Everyone
JavaScript and Accessibility:Creating interface Magic for Everyone
Myths and Misconceptions
• “people with disabilities turn JavaScript off”
Myths and Misconceptions
• “people with disabilities turn JavaScript off”
• “I can’t use JavaScript if I want it to be accessible”
Myths and Misconceptions
• “people with disabilities turn JavaScript off”
• “I can’t use JavaScript if I want it to be accessible”
• “Screen readers don’t support JS”
Myths and Misconceptions
• “people with disabilities turn JavaScript off”
• “I can’t use JavaScript if I want it to be accessible”
• “Screen readers don’t support JS”
• “Just use <noscript>...</noscript>”
Myths and Misconceptions
• “people with disabilities turn JavaScript off”
• “I can’t use JavaScript if I want it to be accessible”
• “Screen readers don’t support JS”
• “Just use <noscript>...</noscript>”
• “when you use onclick, use onkeypress”
Myths and Misconceptions
• “people with disabilities turn JavaScript off”
• “I can’t use JavaScript if I want it to be accessible”
• “Screen readers don’t support JS”
• “Just use <noscript>...</noscript>”
• “when you use onclick, use onkeypress”
Myths and Misconceptions
false
To do this well...
• View accessibility as User Experience
• Understand that accessibility is just as much a design problem as it is a technical problem
• Open our minds to account for other assistive technology and disabilities, not just blind people using screen readers
To do this well...
Starting Points
POUR
erceivableperablenderstandableobust
POUR
Trap #1: Choosing the wrong controls
<button>Pan Up</button>
• certain elements take focus by default
<a href> <button> <input>
• can use tabindex=0 to make any element appear in the tab order (but if you’re doing this, ask yourself why? and maybe choose another element)
• often see onclick on random elements
<img> <tr> <td> <div>
Focusable Controls
Trap #2: Managing Focus/Linear Flow
http://examples.simplyaccessible.com/context-help/
http://examples.simplyaccessible.com/context-help/
http://examples.simplyaccessible.com/context-help/
<a href=”#unamehelp”> ? </a>
http://examples.simplyaccessible.com/context-help/
http://examples.simplyaccessible.com/context-help/
<a href=”#unamehelp”> ? </a>
http://examples.simplyaccessible.com/context-help/
http://examples.simplyaccessible.com/context-help/
see the focus?
http://examples.simplyaccessible.com/context-help/
see the focus?
see the focus?
Manage the focus.
Manage the focus.
Manage the focus.
<a href=”#”>Share trips</a>
Manage the focus.
Manage the focus.
You’ll never do this, rig
ht?
Trap #3: Getting Trapped with the Keyboard
Anticipation
More anticipation...
So much anticipation!
Repetition: Don’t go on forever.
Repetition: Don’t go on forever.
You’ll never do this, rig
ht?
function keyDown(event) { // Prevent default keyboard action // (like navigating inside the page) return (fn(code, options.closeKeys) >= 0) ? close() : (fn(code, options.nextKeys) >= 0) ? next() : (fn(code, options.previousKeys) >= 0) ? previous() : false;}
• usability issues
• MUST test for:
success case
error case
the “correction” case
not “killing” other keyboard functionality
Keyboard Interactivity
Bonus Round:How to Avoid the Turducken of Bad Design
Accessibility consulting, strategy and assessmentsAccessible development and remediation servicesTraining courses, workshops and conferences
simplyaccessible.com
[email protected](613) 599-9784
@feather (on twitter)
Derek Featherstone
