One small click for developers,

one giant leap for a11y

@kimberlymunoz

Accessible interfaces must be adaptable for everyone

ACCESSIBLE INTERFACES HELP

  • vim users
    visual users with UX enhancement
     
  • People using laptops one-handed
    visual physical-impaired users
     
  • Screenreader users
    blind users

Essentials of keyboard navigability

  • Can you navigate to everything with a keyboard?
     
  • Can you skip repetitive links and tabbing?
     
  • Can you see when you're navigating?
     
  • Can you get your keyboard focus "stuck"?

These are all listed under WCAG
https://www.w3.org/WAI/intro/wcag

Turning on keyboard accessibility

How to test!

tab

tab

shift

Move forward

Move backward

Pro-Tip:

If you use links and buttons, you probably have this covered.

How to test!

enter

spacebar

Spacebar can select items like dropdowns, buttons, checkboxes. 

Scroll through dropdowns, radio buttons, sliders, autocompletes.

Enter can select buttons and links.

Resources

Cheatsheet:    

http://webaim.org/techniques/keyboard/

 

WAI-ARIA Authoring Practices:

(For complex widgets)

https://www.w3.org/TR/wai-aria-practices-1.1/

Let's try this

Common pitfalls

Watch your focus!

a { outline: none; }

Also, make sure it makes sense. Don't skip around.

Skip repetitive links with skip links

#skip-nav {
    position: absolute;
    top: unit(-@grid_gutter-width / @base-font-size-px, em);
    left: unit(@grid_gutter-width / @base-font-size-px, em);
    background: transparent;
    transition: transform 1s ease, background .5s linear;
    z-index: 20;
}

#skip-nav:focus {
    // Your button markup
    position: absolute;
    top: 0;
    outline: 0;
    transition: transform .1s ease, background .2s linear;
}
<div class="button"></div>

<div class="button" role="button"></div>

<div class="button" 
     role="button"
     tabindex="0"></div>

Using unsemantic HTML


// Use semantic elements wherever possible.

<button></button>

Use semantic HTML

Common Pitfalls:

Can you get stuck using a keyboard?

Can we automate it?

Automated tools!

Axe-core

https://github.com/dequelabs/axe-core
 

Node-Wcag

https://github.com/cfpb/node-wcag

 

Tota11y

http://khan.github.io/tota11y/

Questions?

Keyboard Testing Presentation

By Kimberly Munoz

Keyboard Testing Presentation

Presentation given at WaffleJS on keyboard testing.

  • 3,682