Checklist for keyboard accessible navigation

June 24, 2025

Author: ewm

Checklist for keyboard accessible navigation

Keyboard navigation is essential to ensure web access for all users. Here's why:

Accessibility: People with visual or motor impairments rely on the keyboard for navigation.
Efficiency: Keyboard shortcuts speed up interactions, even for users without disabilities.
Legal obligations in Switzerland: Public websites must comply with the WCAG 2.1 (level AA) standards according to the LHand law.

All interactive elements must be accessible: Links, buttons, menus, etc.
Logical focus order: Intuitive navigation from left to right, top to bottom.
Visible focus: Clear and contrasting indicators to guide the user.
Avoid keyboard traps: Allow easy exit from any interactive element.
Regular testing: Combine automated tools (Axe, Lighthouse) and manual tests.

Comparison of accessibility testing tools

Tool	Main functionality	Price
Axe	Detects tabbing and focus errors	Free
Google Lighthouse	and performance	Free
Pa11y	Custom tests for developers	Free / Paid
WAVE	Visualization of accessibility issues	Free

Why act now?

According to a 2024 study, 95.9% of web pages contain WCAG errors, which can lead to legal issues and audience loss. In Switzerland, about 1.8 million people live with a disability. Accessible keyboard navigation benefits everyone, not just people with disabilities. Take action today to make your website more inclusive.

Digital accessibility - Episode 1: Navigating by keyboard (W3C series)

W3C

To offer a fluid and intuitive experience, keyboard navigation must adhere to essential principles. These basics should be considered from the inception of a website.

Making interactive elements usable by keyboard

All interactive elements of a website must be fully accessible via the keyboard. This includes links, buttons, forms, dropdown menus, and other interactive components.

Navigation primarily relies on specific keys: Tab to move forward, Shift+Tab to move backward, Enter to activate links or buttons, Spacebar to interact with elements like checkboxes, and arrow keys to navigate menus or carousels.

For custom interactive elements (often created with JavaScript), the tabindex="0" attribute allows them to be focusable. It is also crucial to add onkeydown event handlers to ensure keyboard interactions faithfully replicate those done with a mouse or touchscreen.

Organizing order and ensuring focus visibility

The navigation order should be logical and intuitive: typically from left to right and top to bottom, based on the visual layout. This natural order is defined by the HTML code. Avoid manipulating it with tabindex values greater than 0, and limit the use of CSS to visual adjustments.

The focus should always be visible to guide users. Focus indicators should have sufficient contrast (at least 4.5:1) and be easy to spot. Use CSS pseudo-classes like :focus and :focus-visible to style these indicators, but avoid practices like outline:none, which disable this essential indication.

Finally, ensure that these adjustments do not introduce navigation problems or traps.

Avoiding keyboard traps

A keyboard trap occurs when a user cannot exit an interactive element using standard commands. According to the Web Content Accessibility Guidelines (WCAG), any keyboard-accessible component should allow focus movement without requiring complex manipulations.

These traps are common in form fields, dropdown menus, media players, or third-party widgets, often due to poorly designed JavaScript scripts. To avoid them, test your site using only the Tab and Shift+Tab keys. Also, ensure that when opening modal windows or dialog boxes, users can enter and exit them using only the keyboard. The focus should automatically move to the first interactive element upon opening, then return to the triggering element upon closure.

Use standard HTML elements like <button> as much as possible, which are naturally accessible, and structure the code consistently to ensure a logical navigation order.

Structure your content using semantic HTML elements like <footer> or <header>. This allows assistive technologies to better understand the structure and hierarchy of your information, making navigation more intuitive.

Reserve ARIA roles for cases where standard HTML elements are insufficient. For example, if you have a <div> or <span> acting as a button, add the role="button" attribute. However, always prioritize using a native <button> element when possible.

Take the time to regularly test keyboard navigation, especially with a screen reader. Ensure that attributes like aria-label, aria-describedby, and aria-expanded

And remember this essential rule:

"Keyboard accessibility is a prerequisite to screen reader accessibility. If it doesn't work with only the keyboard, it won't work with a screen reader." - Magentaa11y[9]

By applying these best practices, you lay the solid foundation for thorough testing and enhanced accessibility.

Tools and resources for accessibility testing

To ensure smooth and accessible navigation, it is essential to combine automated tools with manual testing. This mixed approach helps identify technical issues while evaluating the real user experience.

Automated testing tools for accessibility

Automated tools play a key role in detecting keyboard navigation-related issues. Here are some examples of popular tools:

Axe: Ideal for identifying non-focusable elements and tab order errors.
Google Lighthouse: Conducts comprehensive real-time audits, covering both accessibility and overall performance.
Pa11y: Allows customization of tests with scripts tailored to developers' specific needs.
WAVE: Provides a clear visualization of defects, making their correction more intuitive.

These tools can be integrated into your CI/CD pipelines for continuous monitoring. This generates detailed reports and effectively prioritizes detected issues. However, automated tests alone are not sufficient and should be complemented with manual testing.

Manual testing with assistive technologies

Manual testing is essential for identifying issues that automated tools cannot detect. By using assistive technologies, you can validate crucial aspects of accessibility. Here are some key steps:

Keyboard navigation: Use Tab and Shift+Tab keys to move forward or backward, Enter to activate, Spacebar to check or open menus, and arrows to browse options.
Testing with VoiceOver on macOS: Activate VoiceOver with Cmd + F5. Then use Ctrl + Alt + A to start reading, Ctrl to stop, and Ctrl + Alt + → or Ctrl + Alt + ← to navigate between elements. To interact with an element, use Ctrl + Alt + Space.

Ensure that the focus is always visible, all elements are keyboard accessible, and the focus remains confined in closable dialogs with the Esc key.

"By manually testing our web sites and apps for keyboard and screen reader navigation, we're making sure we're building an inclusive experience that can reach the widest audience possible." - Blanca Mendizábal Perelló, Full-Stack Software Developer

Swiss resources for accessibility

In Switzerland, Access for All is a leading organization for improving web accessibility. It offers tailored testing services based on project complexity:

Complexity	Initial test	New test	Administrative fees
Simple	CHF 3'800.–	CHF 1'400.–	CHF 450.–
Standard	CHF 6'100.–	CHF 3'000.–	CHF 450.–
Complex	CHF 8'500.–	CHF 4'200.–	CHF 450.–

For Swiss companies operating in the European Union, it is crucial to comply with the WCAG 2.1 Level AA standards. For example, Recite Me offers a free audit to identify issues related to the European Accessibility Act. A comprehensive approach includes:

An audit combining automated and manual tests.
Adjustments based on WCAG 2.1 Level AA standards.
Continuous monitoring and training for teams.

This methodology ensures sustainable accessibility compliant with international requirements.

sbb-itb-454261f

Conclusion and key points

Keyboard navigation is not just a legal requirement; it is at the core of digital inclusion. As Tim Berners-Lee, the inventor of the World Wide Web, aptly said:

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

In Switzerland, about 1.8 million people live with a disability, while 9.4% of the German population and 25% of Austrians aged 15 to 89 are also affected.

Creating web experiences accessible to all

Optimizing keyboard navigation benefits not only people with disabilities but also a much broader audience: those who prefer the keyboard for productivity reasons, users of mouseless devices, or those who find touch interfaces unintuitive. As emphasized by the W3C Web Accessibility Initiative, accessibility is essential for some and beneficial for all.

The advantages do not stop there. Well-thought-out keyboard navigation can reduce the time needed for users with disabilities to complete certain tasks by 60%.

Maintaining accessibility over time

Accessibility is not a one-time project but an ongoing commitment. Websites evolve constantly: new features, content updates, design changes. Each of these modifications can introduce unforeseen obstacles. A 2024 WebAIM study shows that 95.9% of homepages contain WCAG errors, with an average of 50.8 errors per page.

In the United States, over 4,500 digital accessibility-related lawsuits were filed in 2023. These numbers underscore the importance of impeccable keyboard navigation.

To ensure sustainable accessibility, quarterly audits combining automated and manual tests are essential. Involving users with disabilities also helps gather valuable feedback. Additionally, train your teams on accessibility standards and integrate these best practices from the early stages of development. This proactive approach reduces legal risks, enhances your site's reputation, and expands its audience.

Keyboard accessibility goes beyond mere legal or technical requirements: it embodies a commitment to an inclusive and sustainable digital experience. By adopting these practices, you invest in your organization's digital future while affirming your commitment to equitable access to information.

FAQs

Testing keyboard navigation is essential to ensure that your site can be used by everyone, including people with motor or visual impairments. It verifies that each functionality is accessible without a mouse and that the tab order remains logical and easy to follow.

By conducting these tests regularly, you can quickly identify and correct any obstacles. This ensures a smooth user experience and complies with accessibility standards. Offering accessible navigation not only reflects a commitment to inclusion but also enhances the experience for all your users.

What tools can be used to check the keyboard accessibility of a website and how do they work?

To ensure keyboard navigation that meets everyone's needs, several tools can help you identify and correct potential issues. For example, Accessibility Insights by Microsoft offers a detailed analysis of keyboard navigation, simulating interactions as a user would. Other automated tools, such as Axe DevTools or WAVE, scrutinize your site's code to ensure interactive elements are accessible via the Tab key and comply with WCAG standards.

These tools focus on essential aspects like navigation order, roles assigned to interactive elements, and their labels. By using them, you can more easily identify accessibility barriers and provide a user experience designed to include everyone.

To ensure a site

Checklist for keyboard accessible navigation