The keyboard accessibility is one of the essential parts of inclusivity that is easily testable. Using the tab key to jump through the interactive elements in our document manually is a simple but crucial step in any testing.

Also, navigating with the keyboard (with the tab key) is a fundamental interaction, just like the mouse.

In HTML just a few elements can receive focus by default: <select>, <inputs>, <button> and <a>.

We can use the tabindex attribute to alter this behavior which is often needed when we make an interactive component.

Using the tab key, we can make sure that:

  • Our focus state has a proper contrast and/or focus ring.
  • The document’s focus order is the same as it is seen on the screen.
  • All of our focusable elements can get focus.
  • Just the needed parts can get focus (not the hidden navigation).
  • We can eliminate any keyboard traps.