When Reading and Focus Order Matters

As web developers, we have a responsibility to ensure that our websites are accessible to all users, regardless of their abilities. One key aspect of website accessibility is ensuring that the reading and focus order of elements on a page match the visual order or maintain understanding. Some commonly used techniques, such as using CSS grid or floats to rearrange elements, can lead to confusion and create accessibility problems.

Today, we’ll explore why maintaining a meaningful sequence in the reading and focus order is essential and when something is a “best practice” versus a true accessibility failure.

Why Reading and Focus Order Matters

Reading order refers to how content is presented and read by assistive technologies, such as screen readers. Focus order, on the other hand, relates to the order in which interactive elements receive focus when navigating a webpage using the keyboard.

When we manipulate reading or focus order so the way things are displayed visually doesn’t match their order in the HTML, it can disrupt the user experience. At best, this can cause annoyance or confusion when the focus in a navigation menu jumps around. At worst, this can stop a screen reader user from understanding a page, for example, if paragraphs that have been arranged visually appear in a different order in the dom, because their screen reader will read following dom order, not the visual order on the page.

WCAG and Reading and Focus Order

There are two Web Content Accessibility Guidelines (WCAG) that are relevant:

1.3.2 Meaningful Sequence

“When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.”

This success criterion most comes into play if you’re visually rearranging paragraphs or headings. I’ve seen instances where a content creator did not realize that the elements in a block were being positioned differently with CSS, and they put headings or paragraphs into the block in a way that made sense visually, but when read out by a screen reader, it was reversed.

2.4.3 Focus Order

“If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.”

When people tab through the websites you build, does the tab order on the page match the visual order? If it doesn’t, you may be failing this success criterion.

Assessing Focus and Reading Order

The best way to assess focus order is manually tab through the page yourself, and the best way to assess reading order is to listen to the page with a screen reader; however, there are some handy free tools to help with focus order.

Using Taba11y

The Chrome browser extension, Taba11y, can help you to visualize focus order on a website. It’s an especially great tool if you’re scoping out an existing theme as a possible starter for a client site.

Here’s an example of Taba11y marking the tab order on a theme I found on Theme Forest.

When you run Taba11y on a site, there are three things you should look for:

1. Does the focus order match the visual order, going left to right and top to bottom?
2. Is anything skipped or missed in the focus order?
3. Is anything in the focus order that you don’t expect to have in the focus order?

When I ran Taba11y on this theme demo, I immediately noticed that the focus order in the header is off. On this theme demo, after focusing on the skip to content link, instead of going to the elements on the left in the top navigation bar and then traveling to the right in a logical order, the focus order goes left to right in the right-most grouping of links, then left to right in the social icons (also on the right), then it goes back to the left side of the page and travels left to right there.

When I inspected the elements in dev tools, I saw that the focus order matches the actual order of elements in the dom.

The developer of this theme has used CSS to move these elements out of the order they occur on the page.

Is it actually a problem?

Rearranging text so that it loses meaning is clearly a problem because it may make that section of the page impossible to understand. But is focus order in a navigation menu that doesn’t match the visual order an accessibility problem?

Some accessibility auditors might flag this as failing 2.4.3 Focus Order. However, one can argue that this out-of-order focus is more of an annoyance to sighted keyboard-only users than a true accessibility problem. For blind users, it doesn’t impact their ability to understand or operate the website if they hear the links to change the site’s language before the phone number link.

These two success criteria are really about meaning, understanding, and the ability to operate the website – they’re not always about 100% matching the visual order of the page.

For this reason, this is a low-priority fix and more of a best-practice improvement than a WCAG failure. I wouldn’t code a site this way, and I would probably fix it if I were using this starter theme, but if I saw this on a live website, I wouldn’t say that it was “inaccessible.”

If you’re trying to assess failures under Focus Order or Meaningful Sequence, just ask yourself, does it impact the user’s ability to understand the content or operate the page? If so, it’s a problem. If not, it might be OK.

Additional Resources

• Understanding SC 1.3.2: Meaningful Sequence (Level A)
• Understanding SC 2.4.3: Focus Order (Level A)