Keyboard access fundamentals

Rob Dodson

Many different users rely on the keyboard to navigate applications—from users with temporary and permanent motor impairments to users who use keyboard shortcuts to be more efficient and productive. Having a good keyboard navigation strategy for your application creates a better experience for everyone.

Focus and the tab order

At a given moment, focus refers to which element in your application is actively receiving input from a keyboard, such as a field, checkbox, button or link. In addition to keyboard events, the focused element also gets content that is pasted from the clipboard.

To move the focus on a page, use TAB to navigate "forward" and SHIFT + TAB to navigate "backward." The focused element is often indicated by a focus ring, and various browsers style their focus rings differently. The order in which focus proceeds forward and backward through interactive elements is called the tab order.

Interactive HTML elements like text fields, buttons, and select lists are implicitly focusable: they are automatically inserted into the tab order based on their position in the DOM. These interactive elements also have built-in keyboard event handling. Elements such as paragraphs and divs are not implicitly focusable because users typically don't need to interact with them.

Implementing a logical tab order is an important part of providing your users with a smooth keyboard navigation experience. There are two main ideas to keep in mind when assessing and adjusting your tab order:

  1. Arrange elements in the DOM to be in logical order
  2. Correctly set the visibility of offscreen content that shouldn't receive focus

Arrange elements in the DOM to be in logical order

To check if your application's tab order is logical, try tabbing through your page. In general, focus should follow reading order, moving from left to right, from the top to the bottom of your page.

If the focus order seems wrong, you should rearrange the elements in the DOM to make the tab order more natural. To change the visual arrangement on your site, move it earlier in the DOM instead of styling it to appear earlier with CSS.

For example:

Don't
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
 The kiwi button is floated, which creates an illogical focus order.
Do
<button>Peach</button>
<button>Coconut</button>
<button>Kiwi</button>
 Order your HTML in the way you want the tab order to appear.

Be careful when changing the visual position of elements using CSS to avoid creating an illogical tab order. To fix the illogical tab order, we moved the floating "Kiwi" button to come after Coconut and removed the inline style.

Correctly set the visibility of offscreen content

Sometimes offscreen interactive elements need to be in the DOM, but they shouldn't be in your tab order. For example, if you have responsive navigation that opens in a sidebar on a button click, the user shouldn't be able to focus on the navigation while it's closed.

To prevent a particular interactive element from receiving focus, you should give the element either of the following CSS properties:

  • display: none
  • visibility: hidden

To add the element back into the tab order, for example when the navigation is open, replace these CSS properties respectively with:

  • display: block
  • visibility: visible

Next steps

For users who operate their computer almost entirely with the keyboard or another input device, a logical tab order is essential for making your application accessible and usable. As a good habit for checking your tab order, try tabbing through your application before each publish.