Keyboard accessibility (again)

I feel like a broken record (you know, the really old ones made of vinyl) repeating myself over and over about keyboard accessibility, but unfortunately things don’t really seem like they’re getting better. There are so many places on the Web that are annoying, difficult or plain impossible to use without a mouse. And it really shouldn’t be that way.

So please, when you build websites or web apps, or when you showcase a CSS, HTML or JavaScript technique (especially when you showcase a CSS, HTML or JavaScript technique), keep the following in mind:

Tabbing order: Make sure there is a logical, predictable tabbing order that matches the visual order.
Visual feedback: Focusable elements (links and form controls) need to have obvious visual feedback so users can see where keyboard focus is. Do not use outline:0 in your CSS unless you add an adequate replacement. It’s incredibly frustrating when you get no visual feedback whatsoever.
No keyboard traps: Do not use JavaScript to trap keyboard focus, like in an input field. If you can get in, make sure you can get out.
Keyboard operability: Make sure all functionality and information is accessible without using a mouse. If you open a dialog or lightbox, put keyboard focus in it. If you show information on hover, also display it on focus. If you add click events to random elements that aren’t natively focusable, make them focusable by giving them a tabindex attribute (via scripting).

Keyboard accessibility really isn’t that difficult if you think about it right from the start. And it’s very easy to test—just unplug your mouse or put tape over your trackpad, then try using your site or app.

Posted on April 14, 2011 in Accessibility