2 minute read

Ensure keyboard accessibility

What if you couldn’t use a mouse with your website?

Would you be able to access every part of it without clicking and dragging on the page?

Many people rely on keyboards alone to navigate the web, including those with mobility impairments, those using assistive tech, and those who prefer shortcuts.

How to implement keyboard accessibility

1. Make interactive elements focusable

Ensure all elements that people need to interact with can be reached via the keyboard.

  • Use semantic HTML – Tags like <button>, <a>, and <input> are natively focusable.
  • Add tabindex sparingly – Use tabindex="0" for custom elements to include them in the tab order, but avoid tabindex values above 0 as they disrupt flow.
  • Never remove focus – Avoid CSS or tabindex="-1" to hide focus for elements that require interaction.

See WCAG 2.1.1: Keyboard.

2. Create a logical tab order

The tab order should follow the visual and functional flow of the page.

  • Use natural order – Arrange HTML elements logically, as focus moves sequentially based on the document order.
  • Avoid excessive tabindex – Using positive tabindex values can create a confusing navigation experience.

See WCAG 2.4.3: Focus Order.

3. Provide visible focus indicators

Focus indicators show people where they are on the page.

  • Default focus styles – Let the browser’s default focus outline remain visible.
  • Custom focus styles – If customizing, use contrasting outlines, borders, or shadows that stand out against the background.

See WCAG 2.4.7: Focus Visible.

4. Support standard keyboard interactions

People expect familiar keyboard interactions across sites.

  • Enter and Space for activation – Make sure buttons and links respond to Enter and Space keys.
  • Arrow keys for navigation – Use arrow keys to navigate within menus, sliders, and tabs.
  • Escape to close – Allow Escape to close modals, dropdowns, and overlays.

5. Test for keyboard accessibility

Testing ensures all content is reachable and usable by keyboard.

  • Manual testing – Navigate your site using only the keyboard, checking all elements and interactions.
  • Screen reader testing – Use tools like NVDA (Windows), VoiceOver (macOS), or Silktide’s Screen Reader Simulator to identify hidden keyboard issues.
  • Automated tools – Use platforms like Silktide to detect common keyboard accessibility issues.

Common keyboard accessibility pitfalls to avoid

  • Removing focus styles – Keep focus outlines visible; they’re critical for keyboard navigation.
  • Inaccessible custom controls – Ensure custom elements (e.g., dropdowns, sliders) have proper ARIA roles and are keyboard operable.
  • Keyboard traps – Make sure people can move out of modals or overlays without getting trapped.

Further reading

Previous articleNext article
Back to top