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.