Keyboard Accessibility in Four Words

Keyboard Accessibility in Four Words

Computer keyboard close up.

Automated testing tools are great things to have in your web accessibility testing toolbox. But none of them can find every possible accessibility barrier in your page or site. Testing your site by navigating only with your keyboard is, well, key.

Anything that someone can interact with using a mouse needs to be interactive when only using a keyboard. Each interactive element needs to be reachable, visible and usable when using a keyboard. And moving through these elements should be logical.

Reachable

Links, form fields and form controls all need to be reachable using the Tab key. If someone cannot get to these elements from the keyboard, then they cannot follow the link, enter data or use a Submit button.

You can reach interactive elements using the Tab key. Each time you depress Tab, you move to the next interactive element. It is critical that this movement matches the logical layout of the elements on the screen. In other words, you should move through form fields without skipping around the page.

To go backwards, hold down Shift and depress Tab.

Some elements, such as check boxes, radio buttons or tab panel tabs, should be reachable using the arrow keys.

When an element is reachable from the keyboard, we say that is can receive keyboard focus. So these interactive elements all need to be able to receive keyboard focus.

Visible

Keyboard functionality tends to end up in the context of one user group: people who are blind and use a screen reader. But this leaves out people that can see and use a keyboard or speech recognition technology that may send keyboard commands. To avoid keeping people from being able to use your site or app from the keyboard, make sure that someone can see where they are on the screen as they move across interactive elements. In other words, make sure that keyboard focus is visible.

Often websites and applications use a visible change to indicate when the mouse pointer is on an element. Navigation menu items may change or reverse their colors. Links may change color or become underlined. Ideally, this same behavior occurs when someone navigates to those items using the keyboard. At the very least, the default keyboard focus indicator should appear when on an interactive element.

Long story short, you must be able to visually tell where you are as you tab through a page.

Logical

Now that you know that you can reach each interactive element and see which one has keyboard focus, you can make sure that the order that you navigate through elements is logical. This order is referred to as “tab order”. The tab order should match the intended reading order of the page.

Usable

Getting there will only take someone so far. If someone fills out all of the form fields in a contact form, navigates to the “Submit” button and cannot actually use the button, then you’ve broken that person’s interaction with you. These elements all need to be usable from the keyboard.

  • Space bar should select and de-select check boxes and select radio button options
  • Enter or space bar should trigger a button
  • Enter should follow links

If the interactive elements are not usable, then the experience is broken.

Skip Navigation Links

Skip navigation, or skip to main content links are there to make sure that keyboard users don’t have to hit the tab key dozens of times to move through a large navigation menu. Forcing keyboard users to tab across every navigation element on every page creates a lot of extra work. Once someone knows your navigation menu, their goal will often be to move past the navigation menu and on into the main content on pages that they open.

The most common way to provide this is to create a link that someone using the keyboard will come across before they enter into your navigation menu. The link just sends them to the main content on the page. This gives someone the option to either follow the link, skip the navigation links and go on into the content or to Tab past the link and go on into the navigation menu.

This link is something that designers usually do not want to see on their pages. But, it is important that it is visible when someone has landed on it. You can hide the skip to main content link until someone reaches it with the Tab key. As soon as they land on it, make it visible. Then hide it again after they have moved off of the link. This way, people that use the keyboard to navigate will have the chance to skip your repetitive navigation menus if desired. And the link will be usable by people that navigate using the keyboard as well as people that use screen reading software.