WCAG 1.3.2: Meaningful Sequence (Screen Readers Are a Thing, People!)

The year is 2005. You’re in a bookstore filled with hysterical parents desperately fighting for a dwindling number of newly-released Harry Potter books. It’s imperative that you get the book; your daughter has been excited about it for months, and it’s not fun if she reads the story after everyone else. Utilizing the kind of high-level athleticism that only parents are capable of, you miraculously arrive home, relatively unscathed, with a copy of Harry Potter and the Half-Blood Prince. Your daughter, excited, opens the book, ready to read. Suddenly, her face falls. This copy was printed wrong! All the pages are out of order, and even specific paragraphs are mixed up. Even though the correct words are there, it’s impossible to understand their intended meaning.

Just like a Harry Potter book, many websites feature different blocks of content which must be read in sequence to make sense. This is called “meaningful sequence”. Depending on how the underlying source file for your site is encoded, someone using a screen reader might have trouble making sense of your site. It’s possible that if your markup isn’t correctly organized, their screen reader will read the content in a totally different order!

What Is and Isn’t a Meaningful Sequence?

Say you have a few minutes of downtime at work, so you go to the New York Times website to check the news.

The homepage has links to its top stories displayed in a grid, but since the order in which these links appear on the site doesn’t affect the meaning of the articles themselves, the sequence is not meaningful.

On the other hand, imagine that you click on one of the links and you see a photo and caption at the top of the page, with the article underneath it organized into two columns. The photo and caption and the two columns are both meaningful sequences because the caption is associated with the image and the article must be read from the top of the first column to the bottom, then to the top of the second column.

Other elements that are always meaningful sequences include:

• Text in HTML
• Tables
• Ordered lists

Avoid HTML Tables

It’s not always a given that if content resolves itself visually in a meaningful sequence then a screen reader will understand the content in the same order. If you use layout tables in an HTML document to place blocks of content, elements that appear visually in the correct order might be read incorrectly by a screen reader.

Using the New York Times example again, if an article were organized into two columns using an HTML table, a screen reader would read the first line of both columns as one continuous line of text, rather than going down the first column before starting at the top of the second.

Instead of HTML, CSS provides a better solution for positioning the elements on your page so that you can maintain a linear markup. You can also use a linearization tool to allow screen readers to scan the content in a given HTML table in its intended order.