Read time: 50 seconds
Do your wireframes or design mockups show a logical tab order for people using a keyboard, or other assistive technology, to navigate?
- Maria has tendonitis and is unable to use a mouse; instead, Maria uses the keyboard to navigate the web. When focus jumps around the page Maria gets confused.
Steps to take
- A user should be able to use the tab key to navigate to and activate every interactive element on a page.
- Users should be able to tab through interactive items in a logical order, usually from left to right and top to bottom. Sometimes a logical order will be obvious to your front end team based on a simple layout. In more complicated layouts you may need to identify the tab order in your wireframes or mockups.
- Each interactive element should have a visible focus state, work with your visual designer to make sure you’ve accounted for these.
- Read our information about focus visible. It includes advice on best practice colour combinations.
- Watch World Wide Web Consortium's (W3C) video about keyboard compatibility (47 seconds):
Video link: https://youtu.be/93UgG72os8M
Web Content Accessibility Guidelines (WCAG)
Page last updated: 22 June 2021