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.
- 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:0in your CSS unless you add an adequate replacement. It’s incredibly frustrating when you get no visual feedback whatsoever.
- 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
tabindexattribute (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.
- Previous post: HTML5 document outline revisited