Why is the Tab Key SO Important for Web Accessibility?

Keyboard Interaction Explained

This second video looks at Keyboard Interaction.

All Videos


Hello! In this episode, I’ll explain why this key, the tab key, is so important for making the web accessible.

I’m Eric Eggert, a Web Accessibility Expert. You can follow me as @yatil — Y-A-T-I-L — on social media. If you have questions about this or other videos, or want to propose a topic use the hashtag #askYatil on Twitter.

Keyboard Accessible, Guideline 2.1, is one of the most important Guidelines in WCAG 2: All functionality on a website or in an app must be available from a keyboard.

This allows users to use it without using a mouse or another pointer, for example the finger on touch screens.

Why is this important?

Many users of assistive technologies use the keyboard to interact with a website. For example, screen reader users usually use the keyboard to navigate around a page when they are on a computer.

On mobile, often no physical keyboard is used (but it can be!) but the gestures are translated to keyboard input.

One could say that keyboard input is used like an API between the website or app and the assistive technology.

WCAG 2 and keyboard interaction

WCAG has six success criteria on Levels A and AA covering the bulk of keyboard interaction.

In addition to those three main success criteria, WCAG also has some rules that talk about the focus, that is the place of the specific element that a user has navigated to.

How does keyboard interaction work?

After loading a page, pressing the tab key navigates to the first “focusable” element on the page.

Not all elements on the page can be navigated to using the keyboard as that would be very cumbersome for users. Instead, only interactive elements like links, buttons or input elements are considered “focusable” by default.

Once a “focusable” element is selected, it gets in the focused state. Screen readers read the focused element’s accessible name and role.

On most operating systems and browsers, the current position of the focus is by default indicated by an outline, a special type of border, or a colored focus ring. When the focus is on a text field, a cursor is placed into the field, indicating that you can start typing.

Note how nothing on the page changes just by using the tab key to focus around and explore the page. You can go back to the previously focused item by holding shift and pressing the tab key.

Once you arrive at interactive elements, you have two choices to activate them. Most elements, like links, are activated simply by pressing the return or enter keys.

Buttons and checkboxes activate when you press the space bar. On input fields, return or enter should submit the form.

A group of radio buttons is considered one interactive element, so they have one collective “tab stop” in the focus order.

Like select boxes, the arrow keys are used to make a selection.

To allow users to know where they are on the page, a prominent outline should be displayed. This focus indicator should be more prominent than equivalent hover states as you generally look in the direction you move your mouse, but the focus can jump around significantly and unexpectedly.

What are the most common issues with keyboard interaction

Most issues stem from an interpretation of the web as a purely visual medium. Many designers do not design for anything else but mouse interaction because that is what they use all day. That often means hover styles for mouse users are defined but focus styles are forgotten. Often, it is sufficient to re-use the hover styles for the focus indicator.

In addition, many developers do not use appropriate HTML elements for interactive elements. It happens quite frequently that a <div> element is used instead of a link or a button, which means that it is not in the focus order.

While it is possible to retroactively add keyboard functionality and semantics to <div>s, it is usually easier to just use a button instead.

Sometimes the default focus outline is considered as ugly or not fitting the design and therefor removed. I would recommend finding a visually nice focus style and use that instead.

Notice that the default focus can be considered invisible in some cases, for example in Firefox the black dotted outline is almost impossible to see when the background of the focused element is dark.

Avoid outline: 0; or outline: none; in your CSS at all cost. They remove the outline, which indicates the keyboard focus, altogether. Your website is then not navigable by keyboard anymore.

Usually, I recommend using a high contrast color and at least a two or three pixel thick outline, so that the indicator is easy to see. Using outline-offset in CSS, you can have some distance between the outline border and the focused content.

Keyboard traps rarely occur these days, but they can still happen if you use JavaScript to manipulate the focus, so watch out for them.

To conclude:

Stay tuned to learn more about web accessibility on my channel. Make sure to click subscribe and hit the notification bell icon to not miss anything. And of course you can support me on Patreon at patreon.com/yatil or follow me at twitter.com/yatil — that's Y-A-T-I-L — where you can send me questions using the #askYatil hashtag.

Thanks for watching and see you in the next video.