Now think about someone navigating a website with a screen reader or keyboard. If the content isn’t presented in a logical order, it can be just as confusing.
Meaningful Sequence ensures that information is delivered in the right order, so users can follow along easily, no matter how they access it.
Who this impacts
- People using screen readers: They rely on a logical reading order to understand content as it’s intended.
- People with cognitive disabilities: An understandable content sequence helps reduce confusion and aids comprehension.
- Keyboard and assistive technology users: A proper sequence ensures navigation follows a natural flow.
How to meet Meaningful Sequence
- Use semantic HTML or ARIA roles: This helps assistive technologies understand the logical structure and flow of the content.
- Avoid using CSS solely for layout: Don’t rely on visual styling to create a sequence that isn’t reflected in the underlying code. Screen readers follow the code order, not the visual appearance.
- Test reading order on complex pages: Make sure the content flows logically, even if the layout has multiple columns or sections.
Practical examples
- Step-by-Step Instructions
If you’re providing a series of steps (e.g., a tutorial), the steps should be presented in the correct order in the code, not just arranged visually with CSS. - Multi-Column Layout
On a news page with multiple columns, make sure the main article is read first, followed by sidebars or additional content, rather than mixing the content from different columns.
Exceptions
If the sequence does not impact meaning or understanding (e.g., purely decorative elements), flexibility may be allowed. However, it’s always better to keep a logical order.
Top tips
- Navigate your site with a screen reader: This helps ensure the reading order matches the intended flow.
- Use headings and landmarks: Clearly mark sections to help guide the reading sequence.
- Check the tab order for interactive elements: Ensure that users can move through the content in a logical order, especially for forms and navigational items. Use your TAB key to navigate through the page, then use SHIFT+TAB to navigate back up the page. (Yes, we’re telling you this for a reason.)