WCAG (Level A) SC 1.3.2 Meaningful Sequence (W3.org)
Issue description
WCAG 1.3.2, “Meaningful Sequence” focuses on how information is presented on a web page. It requires that the content is presented in a logical order that makes sense, regardless of how it’s visually displayed. This is important because:
- Assistive technologies: Screen readers and other assistive technologies present content to users in a linear fashion, reading it out in the order it appears in the code.
- Cognitive differences: Some users may have cognitive disabilities that make it difficult to understand information that is not presented in a logical order.
Sometimes, the visual presentation of content might not follow the order it appears in the code. For example:
- CSS positioning: Using CSS to visually reposition elements can change the reading order for assistive technologies.
- Complex layouts: Complex layouts with multiple columns or unusual arrangements can make it difficult to determine the correct reading order. If the order in the code doesn’t make sense, it can lead to confusion and misunderstanding for users who rely on assistive technologies or have cognitive differences. They might hear information in an order that doesn’t make sense, making it difficult to understand the content’s meaning and relationships.
Essentially, this guideline ensures that the order of information in the code matches the logical order of the content. This helps create a consistent and understandable experience for all users, regardless of how they access the web
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
- WCAG (Level A) SC 1.3.1 Info and Relationships
- WCAG (Level AA) SC 2.4.6 Headings and Labels
- WCAG (Level AAA) SC 2.4.10 Section Headings
- WCAG (Level A) SC 2.5.3 Label in Name
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 1.3.2, “Meaningful Sequence” involves ensuring that the order of content in the code matches the logical reading order, regardless of visual presentation. Here’s how:
Structure with HTML
- Logical order: Arrange content in the HTML source code in the order it should be read. Place elements in a sequence that makes sense semantically.
- Headings: Use heading tags (
<h1>to<h6>) to create a clear hierarchy and guide the reading order. Lists: Use list elements (<ul>,<ol>,<li>) to structure lists of items. - Tables: Use table elements (
<table>,<tr>,<th>,<td>) for tabular data, ensuring headers are properly associated with data cells.
CSS for visual presentation
- Flexbox and grid: Use Flexbox or Grid layout for complex visual arrangements while maintaining a logical source order. These CSS techniques allow you to visually reposition elements without affecting the underlying HTML order.
- Avoid CSS that drastically alters order: Be cautious with CSS properties like float or absolute positioning (position: absolute) that can significantly disrupt the reading order. If you must use them, ensure the reading order remains logical in the code.
ARIA attributes (If Necessary)
aria-flowto: In cases where visual presentation requires a different reading order than the source code, use aria-flowto to define the desired sequence programmatically. This attribute allows you to explicitly specify the order in which assistive technologies should navigate elements. However, this is generally less ideal than structuring the HTML correctly in the first place.
Testing
- Screen readers: Test the page with screen readers to ensure the content is read in a logical and understandable order.
- Keyboard navigation: Check that the tab order through interactive elements follows the meaningful sequence of the content.
Example
Let’s say you have a layout with two columns where the visual order is different from the source order:
HTML
<div class="column-container">
<div class="column right">Column 2</div>
<div class="column left">Column 1</div>
</div>Instead of using float or position: absolute to visually place “Column 1” on the left, use Flexbox:
CSS
.column-container
{ display: flex; }
.right { order: 2; }
.left { order: 1; }This allows you to visually order the columns while maintaining the logical reading order (“Column 1” then “Column 2”) in the HTML.
