javascript and accessibility: creating interface magic for everyone

JavaScript and Accessibility:Creating interface Magic for Everyone

JavaScript and Accessibility:Creating interface Magic for Everyone

Derek Featherstonefeather@simplyaccessible.com

@feather

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

store.simplyaccessible.com

store.simplyaccessible.com

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.

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

Derek Featherstonefeather@simplyaccessible.com

@feather

Accessibility consulting, strategy and assessmentsAccessible development and remediation servicesTraining courses, workshops and conferences

simplyaccessible.com

feather@simplyaccessible.com(613) 599-9784

@feather (on twitter)

Derek Featherstone