Tab order
Do your wire-frames or design mock-ups show a logical tab order? Are keyboard and assistive technology users able to navigate?
Why it’s important
- Kiriana has tendonitis and is unable to use a mouse; instead she uses the keyboard to navigate the web. She gets confused when focus is not visible or jumps around the page.
- Dene is visually impaired, he needs to access the web through the keyboard only.
- Catherine has a motor impairment that prevents her using a mouse.
Next steps
- A user should be able to use the tab key to navigate to and activate every interactive element on a page.
- Can users tab through interactive items in a logical order, usually from left to right and top to bottom? In more complicated layouts you may need to identify the tab order in your wire-frames or mock-ups.
- Advise developers when using the tab-index to adjust the tab order, use tab-index="0" or tab-index="-1" only. Do not use tab-index="1" or higher as this will break the normal flow in the keyboard.
- Does each interactive element have a visible focus state? Work with visual designers to make sure you’ve accounted for these.
References
Resources
- User experience design – (IBM)(this link opens an external website)
- Mouse-disabled form for keyboard testing.(this link opens an external website)
- Video: Keyboard Compatibility (YouTube)(this link opens an external website)