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)
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 you tab out of a modal without exiting?
- Can you trap your keyboard focus unintentionally and never get out?
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