WCAG 2.4.3: Focus Order

Let’s say that, in an effort to use crowdsourcing techniques to decide on which kind of pizza you should eat for dinner, you create a survey on your site for people to fill in. The survey begins with fields where users are asked to enter their name and contact information, followed by a series of questions where they indicate their answers by selecting checkboxes.

Sighted users can take one look at the survey and almost instantly know the order in which to answer the questions that would make the most logical sense. However, you carelessly forget to check the tabbing order on your page (shame on you!), and so unbeknownst to you, someone using a screen reader has to jump between questions in totally different fields—marking a checkbox, filling in their name, marking another checkbox, then filling in their email—rather than moving through the survey in the order you intended. It’s not an impossible task, but you can imagine it’d be confusing as heck.

It’s important to make sure that when people navigate sequentially through your site, they go through everything in an order that makes sense for the content. The eye can often naturally infer a logical navigation order. However, someone using a screen reader would lack the visual context necessary to ascertain a logical navigation order and would be reliant on the underlying coding of your page.

It’s a Question of Tech

The way you determine the navigation order of your page depends on the technology of your content. With basic HTML, you can establish sequential navigation order by the tabbing order.

Imagine, for instance, you’re designing a website for the Metropolitan Museum of Art in New York.

[Source: https://www.metmuseum.org/exhibitions/listings/2018/armenia/exhibition-galleries]

There’s the main body content, along with a navigation bar on the left-hand side. You want users to focus on the main content first. After all, they ostensibly used that same navigation bar to get to this page. They don’t need to look at it again right away. So, you place the menu in the HTML after the main body content and then style it with CSS to appear where you’d like it, on the left. That way, those using screen readers can tab through the main content first, before returning to the navigation menu.

In Dynamic HTML, you can alter the navigation sequence using scripting, with the addition of a tabindex attribute to facilitate focus on additional elements. If scripting and tabindex aren’t used, the navigation order is simply the same as how everything appears in the content stream.

A Couple Other Things

It’s possible the navigation order of your page is irrelevant. The point is to ensure that the order doesn’t adversely affect the meaning and operability of the content on your page. If you determine that this isn’t a concern, then you don’t have to worry. Just use your best judgement, and err on the side of caution.

It’s also a possibility that there are a number of navigation orders that make sense for your site. If this is the case with your site, you only need to create a linear pathway for one of those navigation orders.