About keyboard navigation

When designing accessible websites, ensuring that users can navigate using a keyboard is crucial. Recently, our team had an insightful discussion about different keyboard navigation strategies. We debated whether users typically navigate from top to bottom or use landmarks to jump between sections. This discussion made me realize that the answer isn’t straightforward, and it led me to consider a broader perspective on how different users might interact with web content.

Different Approaches to Keyboard Navigation

1. Top to bottom navigation: One approach to keyboard navigation is to move sequentially through content from top to bottom. This method is often used by people with motor disabilities, such as Parkinson’s or arthritis, who rely on the keyboard to navigate. They may use the Tab key to move through each interactive element on a page, preferring a consistent, predictable flow. The Skip to Content link is a valuable feature for these users, allowing them to bypass repetitive navigation links and go straight to the main content.

2. Landmark-Based Navigation: Landmark regions, such as headers, navigation bars, and footers, provide users with a way to jump directly to specific sections of a webpage. This approach is often used by blind or visually impaired users who rely on screen readers. Landmarks, enabled by HTML5 and ARIA roles, allow users to efficiently navigate through large amounts of content by jumping directly to the sections they need. However, it’s important to remember that not all users or websites make full use of landmarks, so assuming that all users navigate in this way can lead to accessibility oversights.

3. Sentence-to-Sentence Navigation: Some users, particularly those using screen readers, may navigate through content sentence by sentence. This method allows detailed exploration of the text and is particularly useful when users are unfamiliar with the structure of the website. By using arrow keys, they can review content in smaller increments, ensuring they don’t miss important information. This type of navigation also emphasises the importance of well-structured, semantic HTML, where content is logically ordered and easy to follow.

4. Reading the Entire Page: In some cases, especially when visiting a new website, users can have their screen reader read the entire page from start to finish. This helps them to get a sense of the content and layout of the page before deciding where to focus their attention. In such scenarios, a clear and logical content structure is essential. The correct use of headings, lists and paragraphs can make a significant difference to how easily users can understand and navigate through the content.

WCAG Principles and Success Criteria

These different navigation strategies highlight the importance of adhering to key WCAG 2.2 principles to ensure accessibility for all users:

• Guideline 2.1: Keyboard Accessible: All functionality must be operable through a keyboard interface. Whether users navigate through landmarks, headings, or sentence-by-sentence, your site should accommodate these different methods.
• Success Criterion 2.4.1: Bypass Blocks: This criterion emphasizes the need for mechanisms to skip blocks of content that are repeated on multiple web pages, like the “Skip to content” link. This feature is crucial for users navigating sequentially.
• Success Criterion 2.4.3: Focus Order: Ensuring that the focus order is logical and intuitive is essential. Users relying on keyboard navigation should encounter elements in an order that matches the visual layout and logical structure of the content.
• Success Criterion 2.4.5: Multiple Ways: Providing multiple ways for users to navigate and find content on your website, such as through search, menus, and links, enhances accessibility and user experience.
• Success Criterion 2.4.7: Focus Visible: It’s important that users can always see where the focus is on the page. A clear, visible focus indicator helps users, particularly those with visual or cognitive impairments, keep track of their position on the page.
• Success Criterion 2.1.2: No Keyboard Trap: This criterion ensures that users can navigate out of any element or section using the keyboard, avoiding situations where they might get stuck.

Conclusion: Embracing All Possibilities

Our discussion reminded me that there’s no one-size-fits-all solution when it comes to keyboard navigation. Users have diverse needs and preferences, and it’s essential to consider all possibilities when designing for accessibility. By focusing on key WCAG principles and embracing various navigation strategies, we can create web experiences that are more inclusive and user-friendly for everyone.