@kimberlymunoz
tab
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)
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/