@kimberlymunoz
Visit https://www.w3.org/WAI/perspectives
tab
shift
Move forward
Move backward
If you use links and buttons, you probably have this covered.
enter
spacebar
↑
↓
→
←
Spacebar can select items like dropdowns, buttons, checkboxes.
Scroll through dropdowns, radio buttons, sliders, autocompletes.
Enter can select buttons and links.
http://webaim.org/techniques/keyboard/
(For complex widgets)
https://www.w3.org/TR/wai-aria-practices-1.1/
a { outline: none; }
Also, make sure it makes sense. Don't skip around.
#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>
// Use semantic elements wherever possible. <button></button>
Can you get stuck using a keyboard?
https://github.com/dequelabs/axe-core
https://github.com/cfpb/node-wcag
http://khan.github.io/tota11y/
By Kimberly Munoz
Presentation given at WaffleJS on keyboard testing.