JavaScript and Accessibility: Creating Interface Magic for Everyone
Upcoming SlideShare
Loading in...5
×
 

JavaScript and Accessibility: Creating Interface Magic for Everyone

on

  • 815 views

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.

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.

Statistics

Views

Total Views
815
Views on SlideShare
799
Embed Views
16

Actions

Likes
0
Downloads
6
Comments
0

4 Embeds 16

http://www.linkedin.com 10
https://twitter.com 4
https://si0.twimg.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript and Accessibility: Creating Interface Magic for Everyone JavaScript and Accessibility: Creating Interface Magic for Everyone Presentation Transcript

    • JavaScript and Accessibility:Creating interface Magic for Everyone
    • JavaScript and Accessibility:Creating interface Magic for Everyone
    • Derek Featherstonefeather@simplyaccessible.com @feather
    • Myths and Misconceptions
    • 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” s e l • “Screen readers don’t support JS”fa • “Just use <noscript>...</noscript>” • “when you use onclick, use onkeypress”
    • To do this well...
    • 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
    • Starting Points
    • POUR
    • P erceivableO perableU nderstandableR obust
    • Trap #1: Choosing the wrong controls
    • <button>Pan Up</button>
    • Focusable Controls • 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>
    • Trap #2: Managing Focus/ Linear Flow
    • store.simplyaccessible.com
    • store.simplyaccessible.com
    • 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/
    • foc us? et he sehttp://examples.simplyaccessible.com/context-help/
    • us? s? foc u ethe foc ee se t heshttp://examples.simplyaccessible.com/context-help/
    • Manage the focus.
    • Manage the focus.
    • Manage the focus.
    • Manage the focus.
    • <a href=”#”>Share trips</a>Manage the focus.
    • Manage the focus.
    • rig ht? th is, do ne ver ’llYou Manage the focus.
    • Trap #3: Getting Trapped with the Keyboard
    • Anticipation
    • More anticipation...
    • So much anticipation!
    • Repetition: Don’t go on forever.
    • rig ht? th is, er do ’ll nev YouRepetition: Don’t go on forever.
    • 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;}
    • Keyboard Interactivity • usability issues • MUST test for: success case error case the “correction” case not “killing” other keyboard functionality
    • Bonus Round:How to Avoid the Turducken of Bad Design
    • Derek Featherstonefeather@simplyaccessible.com @feather
    • simplyaccessible.comAccessibility consulting, strategy and assessmentsAccessible development and remediation servicesTraining courses, workshops and conferences Derek Featherstone feather@simplyaccessible.com (613) 599-9784 @feather (on twitter)