Keyboard Accessibility

When we think of using a computer, we usually think about using a mouse to navigate. This isn’t the case for all users. People with motor disabilities or hand pain can have a hard time using a mouse, or sometimes your mouse just dies but you can’t wait for a new one. In many cases, the keyboard can be used to navigate instead.

Unfortunately, not all websites are designed for optimal keyboard use. Below, you will learn how to make your web content keyboard accessible.

Navigating With a Keyboard

Before you can focus on making your content keyboard accessible, you need to understand how keyboard navigation works.

WebAIM made an in-depth table explaining how to use your keyboard for navigation, but here’s a quick overview:

  • Use the Tab key to navigate through interactive page content.
    • Using Tab alone goes forward in order, and using Shift + Tab goes backward.
  • Use the Enter key to use links and buttons.
    • If the enter key isn't doing what you want it to, try the Spacebar.
  • Use the Arrow keys to scroll.

Making Websites Keyboard Accessible

Below are some principles to follow to make your website keyboard accessible.

Focus Indicators

Make sure that your website is coded so whatever the main focus is on is visually differentiated.

A screenshot of a list with a highlighted link. The link color changed from blue to red, and has a yellow outline.

This can include an outline, a different highlight color, or other visual effects. Make sure that these visual effects have high color contrast, and don't use flashing animations.

Reading Order Follows Visual Order

The order in which page elements are tabbed through should follow the logical reading order of the page. Using this page as an example, you would want the top navigation to navigate first, then the link to the keyboard navigation table, then the link to the ARIA standards at the bottom of the page. If the ARIA standards were the first thing to pop up, we’d have an issue.

Only Interactive Elements Are Navigable

Make sure that the only things that can be navigated are things you want users to interact with. Unless photos double as links, you shouldn’t be able to highlight them. Conversely, if there’s a button you want users to press, make sure it can be highlighted.

Skip to Content

When pressing Tab on your page, the first thing that should pop up is a “Skip to Content” link. This allows keyboard users to skip tabbing through the navigation, and brings them directly to the main page.

No Keyboard Traps

If you can navigate to a spot on a website, but can’t navigate back out of it, you have found a keyboard trap. Make sure that you can always Shift + Tab to navigate back out of a page.

Test Your Content

The best way to ensure that things are keyboard accessible is to navigate your website with a keyboard. If you notice any trouble spots that you can’t navigate around, chances are something’s wrong with your website code, not your keyboard abilities.

ARIA Standards

If you want a more in-depth understanding of keyboard accessibility, you can read W3’s ARIA (Accessible Rich Internet Applications) guide, which includes specific guidance on how to code websites for this principle.