WCAG Principle: Operable
Guideline 1.3: Adaptable (Create content that can be presented in different ways without losing information or structure)
Conformance Level: A (Minimal Requirement)
What is Success Criterion 1.3.2?
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
This success criterion ensures that users can understand and process the content on a web page. Specifically, it requires that websites provide a way for users to understand the correct sequence in which content should be read, particularly when the order affects the meaning of the content.
For example, imagine a webpage that lists steps for completing a process. If the webpage presents the steps out of order, the user may be confused and unable to complete the process. To meet this criterion, the website must provide a way to programmatically determine the correct order of the content.
This means that website developers should use coding techniques that allow assistive technologies, such as screen readers, to identify the correct reading sequence. This way, users who rely on assistive technologies can still access the content in the correct order, even if the content is visually presented out of order.
How does it make your website accessible?
For users who rely on assistive technologies, such as screen readers, a correct reading sequence is essential for understanding the content. If the order of the content is not programmatically determined, users may have difficulty navigating and understanding the content on the page.
By conforming with this success criterion, websites can create a more inclusive and accessible experience for all users. It helps to ensure that users with disabilities can access and understand the content on the website, while also providing a better experience for all users by making the content more organized and understandable.
How to Meet Success Criterion 1.3.2
Common mistakes:
- DOM order and visual order do not match because CSS properties were used to change the visual presentation.
- White space characters, such as space, tab, line break, or carriage return, is used to organize data in tables.
How to fix mistakes:
- Place interactive elements (such as links and form controls) so that the default tab order follows the sequences and relationships in the content.
- Ensure that the order of content in the source code is the same as the visual presentation of the content.
Use structural elements to ensure that content remains meaningful when CSS styling is not available
Helpful tips for developers:
- Use left-justified text for languages that are written left to right and right-justified text for languages that are written right-to-left.
- Provide a link to linearized rendering.
- Provide a style switcher between style sheets that affect presentation order.
How to test if you've met compliance:
- Check that the page is well-structured and logically laid out.
- Test that the page is easy to navigate and that all elements are clearly labeled.
- Ensure that the page follows a logical progression from one point to the next.
- Test for any broken links or pages that don’t seem to fit the flow of the page.
- Evaluate if the page has an appropriate flow and if it is easy to understand.
- Check to make sure that the page provides a clear purpose and that all elements are relevant to the goal of the page.
- Remove styling from the page and use a screen reader to navigate through the content.
If the content remains meaningful and the markup matches the expected reading order, you’ve passed this success criterion.
Bad and Good Examples (Developer code)
BAD Code Snippet
<head>
<title>My Website</title>
</head>
<body>
<h1>My Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod auctor lacus, id commodo leo congue vel. Aliquam tempor mauris a bibendum tincidunt.</p>
<h2>Welcome to My Website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod auctor lacus, id commodo leo congue vel. Aliquam tempor mauris a bibendum tincidunt.</p>
<h3>Related Content</h3>
<ul>
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Article 3</a></li>
</ul>
</body>
</html>
This code fails to meet Success Criterion 1.3.2 because the content is not structured meaningfully, and the order in which it is presented does not convey the intended meaning and relationships among the content. Additionally, the absence of semantic elements and a skip link makes it challenging for assistive technologies to understand the purpose and relationship of each section of the page.
Good Code Snippet
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#main-content">Skip to Main Content</a></li>
</ul>
</nav>
<h1>My Website</h1>
</header>
<main id="main-content">
<h2>Welcome to My Website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod auctor lacus, id commodo leo congue vel. Aliquam tempor mauris a bibendum tincidunt.</p>
</main>
<aside>
<h3>Related Content</h3>
<ul>
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Article 3</a></li>
</ul>
</aside>
</body>
</html>
In this code example, the website’s main content is wrapped in a main element with a unique id attribute (id=”main-content”). A skip link is provided at the top of the page using a <ul> list, allowing users to skip directly to the page’s main content. This code meets conformance with Success Criterion 1.3.2 by structuring the content in a meaningful way and using semantic elements such as header, main, aside, and footer. These provide additional context for assistive technologies to understand each section of the page.
Frequently Asked Questions
What is meaningful sequence in accessibility?
Meaningful sequence in accessibility means that users can interact with elements on a webpage in an intuitive way that helps them achieve their goals efficiently. This includes arranging interactive elements in a logical sequence, providing feedback at appropriate and helping users easily points find the information they need.
How do you test 1.3.2 meaningful sequence?
You can test 1.3.2 meaningful sequence using a screen reader to confirm that the page is well-structured, easily navigable and follows a logical progression.
What is the difference between meaningful sequence and focus order?
The difference between meaningful sequence and focus order is that the meaningful sequence applies concerns the arrangement of all content on the web page in an intuitive and logical way. On the other hand, focus order specifically applies to making interactive elements on the page, such as links or search bars intuitive and useful.
How does Success Criterion 1.3.2 relate to other WCAG success criteria?
Success Criterion 1.3.2 is closely related to other WCAG success criteria, such as success criterion 1.3.1, which requires that information and relationships conveyed through presentation can be programmatically determined. It also relates to success criterion 2.4.3, which requires that users have the ability to bypass blocks of content that are repeated on multiple web pages.
