Why a11y?

Keyboard Navigation

Importance of Keyboard Navigation

Keyboard navigation ensures that all users, especially those with motor disabilities, can access and use your site without needing a mouse. Many assistive technologies (e.g., screen readers) rely heavily on keyboard interaction.

Standard Keyboard Controls

  • Tab: Moves focus to the next focusable element (e.g., links, buttons, form fields).
  • Shift + Tab: Moves focus to the previous focusable element.
  • Enter: Activates buttons, links, or form elements that are currently focused.
  • Spacebar: Toggles checkboxes, activates buttons, or starts/pauses media players.
  • Arrow Keys: Navigate within dropdowns, sliders, or menus.

Ensure All Elements are Focusable

To enable smooth keyboard navigation, interactive elements (links, buttons, form inputs) must be focusable. Here’s how to make sure:

  • Use semantic HTML elements: 
    <a> for links
<button> for buttons
<input>, <select>, <textarea> for form controls
  • Avoid using div or span for interactive elements. If necessary, ensure they are made focusable by adding the tabindex attribute. 
    <div tabindex="0">This div is now focusable.</div>

Logical Focus Order

Ensure a logical, intuitive order of navigation for keyboard users. The focus should move in the natural reading order of the page, typically from top to bottom and left to right.

Use the following techniques:

  • Avoid tabindex greater than 0, as it can disrupt the natural focus order.
  • Instead, use the natural document flow to control focus order.
  • Use ARIA landmarks like role="navigation", role="main" to structure the page.

Manage Keyboard Traps

A "keyboard trap" happens when users get stuck on a particular element and can’t navigate away using the keyboard. To prevent this:

  • Make sure modal dialogs and popups can be closed using the keyboard (Esc key or a visible, focusable close button).
  • Ensure all interactive widgets (e.g., dropdowns) allow users to tab away from them once interaction is finished.

Skip Navigation Links

Provide a "Skip to Content" link at the top of your pages, which allows keyboard users to bypass repetitive navigation links and jump directly to the main content.

<a href="#main-content" class="skip-link">Skip to Main Content</a>

Visible Focus Indicators

Ensure all focusable elements display a clear focus state. Many browsers have default focus outlines, but you should customize them for better visibility:

button:focus,
a:focus {
	outline: 3px solid #005fcc; /* High contrast focus outline */
	outline-offset: 2px; /* Create space between element and outline */
}

Never remove the focus indicator (e.g., using outline: none;) without providing an alternative. Without it, keyboard users won’t know where their focus is on the page.

Custom Interactive Components

When creating custom elements (like dropdowns, sliders, modals):

  • Make them keyboard accessible by adding focusable roles (e.g., role="button" for clickable elements).
  • Use tabindex="0" for elements that need to be focusable.
  • Define keyboard interactions for the component (e.g., use arrow keys for sliders or menus).

Test Your Site's Keyboard Accessibility

Test your site regularly to ensure proper keyboard accessibility:

  • Navigate your site using only a keyboard, making sure all interactive elements can be focused and operated.
  • Use tools like Chrome DevTools to inspect focusable elements and verify focus order.

Common Pitfalls

  • Inconsistent focus management: After closing a modal or popup, make sure focus returns to the element that triggered it.
  • Non-interactive elements receiving focus: Avoid allowing focus on non-interactive elements like empty divs or placeholders.
  • Hidden content receiving focus: Ensure that hidden content (e.g., dropdowns or off-canvas navigation) is not focusable until it's visible to the user.

Tools for Testing

  • Chrome DevTools Accessibility Inspector: Inspect the accessibility tree, check focusability, and simulate keyboard navigation.
  • NVDA/JAWS Screen Readers: Use screen readers to simulate navigation for users who rely on them.
  • Tab and Shift+Tab Testing: Manually tab through your site to ensure a logical focus flow.

Related links