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

  1. A user should be able to use the tab key to navigate to and activate every interactive element on a page.
  2. 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.
  3. Each interactive element should have a visible focus state, work with your visual designer to make sure you’ve accounted for these.
  4. Read our information about focus visible. It includes advice on best practice colour combinations.
  5. Watch World Wide Web Consortium's (W3C) video about keyboard compatibility (47 seconds):

  • Transcript and translations: keyboard compatibility (W3C)

  • Page last updated: 24 September 2020