Keyboard navigation: how to ensure usability without a mouse
Keyboard navigation on websites is an essential feature for ensuring the accessibility and usability of web pages. This functionality allows users to interact with all the content and features of the site using only the keyboard, without needing a mouse.
This is especially crucial for people with motor or visual disabilities who rely on the keyboard to navigate and perform tasks online. By implementing efficient keyboard navigation, web designers and developers facilitate quicker and more direct access to the site’s information and features.
Ensuring that a website is fully navigable by keyboard involves meeting various accessibility standards, such as those established by the Web Content Accessibility Guidelines (WCAG). These standards not only help create a more inclusive web but also improve the usability and satisfaction of all users.
An excellent example of accessibility and well-implemented keyboard navigation is the BBC website, which stands out for the following features:
- All interactive elements, such as links, buttons, and dropdown menus, are accessible via the keyboard, allowing users to navigate the site without needing a mouse.
- Visible focus indicators clearly show which element is selected, improving user orientation.
- Proper management of modal dialogues ensures that the keyboard focus automatically moves to the modal when it opens and returns to the original trigger when it closes.
Another example of good accessibility and keyboard navigation implementation is the Casa del Libro website. Its strengths include:
- Complete keyboard navigation, making all interactive elements, such as links and buttons, accessible without a mouse, which is crucial for users with motor disabilities.
- Visible focus indicators that clearly show which element is selected, helping users better orient themselves.
- A logical tab order that facilitates navigation and allows intuitive access to information.
- “Skip to content” links that improve navigation efficiency by allowing users to jump directly to the main content.
Compliance with accessibility standards (WCAG)
Adhering to the accessibility standards set by the Web Content Accessibility Guidelines (WCAG) is crucial for ensuring that websites are usable by everyone. The WCAG are a series of recommendations developed by the World Wide Web Consortium (W3C) to make web content more accessible.
The WCAG are based on four key principles, known as P.O.U.R: Perceivable, Operable, Understandable, and Robust.
As we have discussed on this blog on other occasions, the WCAG define three levels of conformance to measure the accessibility of a website:
- Level A: The minimum level of conformance. Content that is not accessible at this level poses significant barriers for users with disabilities.
- Level AA: The recommended level of conformance, which addresses the major accessibility barriers and improves overall usability.
- Level AAA: The highest level of conformance, which is the most accessible but not always possible to meet in all types of content.
Accessibility standards for keyboard navigation
Ensure keyboard accessibility (Success criteria 2.1.1)
All content and functionality on the website must be accessible via a keyboard.
Example: An online form should allow users to move between fields using the “Tab” key and activate buttons with the “Enter” or “Space” key.
No keyboard trap (Success criteria 2.1.2)
If a component of the website can be navigated using a keyboard, the keyboard focus should not get trapped within that component.
Example: A dropdown menu should allow users to exit the menu using the “Tab” key, rather than getting stuck inside the menu without being able to continue navigating.
Focus order (Success criteria 2.4.3)
The tab order should follow a logical and predictable sequence.
Example: On a product page, the tab order should follow the sequence: product name, product image, description, price, and purchase button.
Link purpose (Success criteria 2.4.4)
The purpose of each link should be clear and understandable.
Example: Links should have descriptive texts like “See more details about the product” instead of “Click here.”
Bypass blocks (Success criteria 2.4.1)
Provide a mechanism to skip repetitive blocks of content.
Example: Include a “skip to content” link at the top of the page that allows users to jump directly to the main content, avoiding the need to tab through repetitive elements like navigation menus.
Focus visible (Success criteria 2.4.7)
Ensure that there is a visible indicator for the keyboard focus.
Example: When a button receives keyboard focus, it should be highlighted with a border or color change so that users can easily identify which element is selected.
Name, role, value (Success criteria 4.1.2)
User interface controls should be operable via the keyboard and provide information about their state.
Example: A volume slider control should be adjustable with arrow keys and provide visual or auditory feedback about the current volume level.
Implementing these standards significantly enhances the user experience and complies with the accessibility guidelines set by WCAG.
Basic principles of keyboard navigation
These principles include using a logical and visible focus, where interactive elements should be accessible in a predictable tab order, facilitating navigation with keys like Tab, Shift+Tab, Enter, and arrow keys. It’s crucial that elements with focus are visually highlighted so users know where they are on the page. Additionally, all interactive components, such as links, buttons, and forms, should be operable via the keyboard.
This is achieved by using the “tabindex” attribute to control the tab order of elements, ensuring a logical and predictable sequence. It is important to avoid values greater than 0 to maintain a natural flow. It is recommended to change tabindex values only if it is absolutely necessary to modify the tab navigation order, as introducing positive values can complicate the navigation flow.
By ensuring that users can move through all interactive elements (such as links and buttons) using only the keyboard, such as using “Tab” to move forward and “Shift+Tab” to move backward, designers can ensure a coherent flow. It is important that elements are visually highlighted when selected, so users always know where they are on the page. Additionally, when pop-ups or dialogs open, the keyboard focus should automatically move to the first interactive element within that window and return to the original button or link when it closes.
By following these best practices, designers and developers can create websites that not only comply with accessibility standards (WCAG) but also provide a more intuitive and efficient user experience. Including keyboard navigation functionality not only promotes digital equity and inclusion but also improves user satisfaction and potentially increases site retention and traffic.
This is a translation of the following article from our corporate website:
