The Web Content Accessibility Guidelines (WCAG) require content to be presented in a meaningful sequence. This is addressed in Success Criterion (SC) 1.3.2, “Meaningful Sequence,” which reads:
“When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.”
To follow this guideline, you’ll need to understand the terminology. First, “sequence" only matters when your content requires order to make sense. For example, if the last paragraph of this article appeared at the beginning of the page, the reader would be confused — all written content must appear in a certain linear order.
The purpose of WCAG 2.1 SC 1.3.2 is to preserve that correct order — the meaningful sequence of your content — regardless of how the user accesses your website.
Here’s why that’s important: Some people with disabilities use screen readers (software that converts text to audio or braille). Some people use a keyboard alone to navigate the web, while others might use eye-tracking systems, voice controls, or another assistive technology. These tools need to be able to determine the correct sequence of your content in order to present it properly.
To establish meaningful sequence, use caution when styling your webpages
Most websites constructed with simple HTML will have no problem passing WCAG’s requirements for “meaningful sequence.” However, web designers may make mistakes when using HTML to style their content, and these mistakes can cause a number of accessibility issues.
This is especially common when using HTML layout tables to style a page. Screen readers may read the content out of its natural order, reading the complete content of each cell (including nested tables) before proceeding to the next cell. WCAG doesn’t restrict designers from using layout tables, but if you decide to do so, you’ll need to make sure that the content within the table makes sense when linearized.
Another issue can occur if designers use subheadings and other semantic HTML attributes without regard to their logical, sequential order. Technically, this isn’t a failure of WCAG SC 1.3.2 — it’s a failure of WCAG SC 1.3.1, “Info and Relationships" — but it’s a symptom of the same mistake: using CSS when you should be using HTML (and vice-versa).
Related: Leveraging HTML for Web Accessibility
Create better content by writing in HTML, then using CSS for styling
The best practice is to write HTML first, then style your content using CSS. This approach avoids most issues that would prevent your website from presenting information in a logical format. Plain old semantic HTML is supported by every type of assistive technology and web browser, so it’s an excellent basis for accessibility.
Some tips to keep in mind:
- Avoid using CSS to change the visual order of content. Use HTML instead, then style the content as needed.
- Use caution when using HTML layout tables and other elements that could change the reading order for some users.
- Test your website by turning off CSS and reviewing your content. Does everything make sense? Can you navigate the content easily?
- Review your semantic HTML markup. Make sure that headings and other important elements have appropriate HTML tags.
- Write meaningful, descriptive subheadings to organize long pieces of content.
Finally, if you’re presenting information that doesn’t rely on a specific order, you don’t need to make changes to meet WCAG requirements.
However, it’s generally a good idea to preserve a visual order that matches the Document Object Model (DOM) order. Some people with disabilities may access your website with different technologies at different times. They may expect the order to remain consistent, and it’s in your best interest to provide a consistent experience for all users.
Related: Fixing Accessibility Is Important, But Planning for Accessibility Is Better
Regular accessibility tests help your website reach a larger audience
“Meaningful sequence" is an important accessibility concept, and if you’re building an especially complex website, you’ll need to spend more time testing your content. Make sure you’re also testing for other potential WCAG issues that could affect your users.
For more guidance, download our Ultimate Guide to Web Accessibility, which outlines the most common accessibility issues and the necessary steps for complying with the Americans with Disabilities Act (ADA) and other non-discrimination laws.
Finally, if you’ve got questions about WCAG, we’re here to help. Send us a direct message to schedule a consultation.
