Helping users understand and navigate content in the correct order

What are the requirements around sequential navigation for digital accessibility? 

For web users who depend on keyboard inputs to navigate your website, a natural expectation is that the content will be presented in a logical order. This order should be consistent with the meaning and purpose of the content, so that they can quickly and easily find what they want and input information.  

In practical terms, when a keyboard user attempts to move the focus to the next logical component or stage on your website, they shouldn't end up somewhere unexpected. For users with reading disabilities, losing yourself in a set of incorrectly ordered input fields or menus can be very confusing. And for users of screen magnifiers, who see only a small fraction of the full screen at once, it's very easy to get lost on web pages.  

The W3C’s Web Content Accessibility Guidelines (WCAG) address the issue of sequential navigation and focus order in guideline 2.4.3. This guideline provides suggested techniques for making content accessible in a logically consistent way for users of all abilities. 

Why is focus order important? 

Content that is perceived to be out of order will tend to produce a frustrating user experience. If the keyboard navigation order seems inconsistent with the content and purpose of the web page, your users will face confusion and difficulty in completing basic tasks.  

A logical focus order will help accelerate journeys and enable users to build a consistent mental model of your content. This will not only increase their engagement — it will also reduce your risk of a lawsuit under digital accessibility legislation such as the Americans With Disabilities Act (ADA). 

What can I do to fix the issue? 

For simple HTML, sequential navigation is defined through the tabbing order, which is typically allowed to follow the source code order. It's important to note that there may not be a single “right” tab order for every user: you should test with different users and different Assistive Technologies (AT) to find the order that works best for keyboard users. It may well be the case that keyboard users have a different flow of navigation from other users. 

Where your website uses dynamic HTML, you can modify the navigation sequence using scripting in combination with a tabindex attribute to move focus to supplementary elements — for example, when your site opens a modal dialog. While that modal dialog is open, the focus should be restricted to moving between the elements it contains. And when the modal dialog closes, keyboard focus should return to the trigger. In all cases, dialogs and menus should be adjacent to their respective trigger controls in the sequential navigation order.  

While you can automate some testing and remediation for this issue, maintaining optimized sequential navigation as your website evolves over time can require significant time, effort, and expertise. AudioEye combines automated scanning and remediation technology with human-led testing and custom remediation, providing a unique hybrid service to resolve accessibility issues like this. Subscribers to the AudioEye service benefit from rapid, low-cost identification and remediation of accessibility issues, as well as access to a team of human experts for the transfer of skills to your web developers. 

Don’t delay — subscribe today and solve your digital accessibility issues with AudioEye.