20% Off My Easy-Peasy Proposal with the Coupon Code 20OFF (Now - April 30th)

Accessibility Weekly

When Reading and Focus Order Matters

Published:

amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Week 27

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.

Above the fold on a fake municipal website. There are blue circles with numbers over each link and button with lines connecting them to depict the tab order on the elements.

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.

A view of the website with Taba11y turned off and dev tools open, showing that the header languages nav menu is first, then the social links menu, then the secondary header menu - this is the reverse of how they appear visually on the page.

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

Join the Conversation!

There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!

Group Thread
amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since. 

Brought to you by:

Make your WordPress website accessible and ensure all people have equal access to your products or services, regardless of ability. Reach more customers, reduce liability, and increase conversions.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

More from Accessibility Weekly

Week 51

How Accessible is “Accessible Enough”

In an ideal world where clients have unlimited budgets and everything is custom, every website would …

Week 50

How to Sell Accessibility in New Builds

Creating websites that prioritize accessibility is no longer just a best practice—it’s a business must, especially …

Week 49

Accessibility in Web Development Contracts

Whether you’re running an agency or freelancing, having a clear contract for your web development and …