Understanding WCAG SC 1.3.2 Meaningful Sequence
Version and Level: 2.0/2.1/2.2 (Level A)

WCAG SC 1.3.2 requires that the sequence in which content is presented must be meaningful during navigation for all users. This ensures that assistive technology users, such as those using screen readers, or users utilizing their own stylesheet which overrides the website stylesheet, can accurately understand and follow the content.

Benefits:

  1. Enhanced Navigation:Ensures that users with visual impairments can navigate content in a logical and meaningful sequence.

Main Objective:

To ensure that the reading sequence of content is meaningful and encoded correctly, making it accessible to all users.

Best Practices:

  • Logical and Intuitive Content: Ensure the content presented on the page is logical and intuitive.

  • HTML First: Write the HTML structure first, then apply CSS for design and layout.

  • Match Visual and DOM Order: Make sure the visual order of content matches the DOM order.

  • Use Semantic Elements: Mark your content with headings, lists, and paragraphs.

    Differentiate Navigation: Ensure users can differentiate navigation menus from the main content.

    Test with Screen Readers: Use a screen reader such as NVDA or disable style sheets to check if the content maintains its logical flow.

Examples & Explanation:

Example: A webpage uses CSS to position a navigation bar, the main story, and a side story.

What Should Be Avoided

HTML/CSS

              <div class="main-story">
                <h1>Main Story</h1>
                <p>Main story content...</p>
              </div>
              <nav class="nav-bar">
                <ul>
                  <li>Home</li>
                  <li>About</li>
                </ul>
              </nav>
              <div class="side-story">
                <h2>Side Story</h2>
                <p>Side story content...</p>
              </div>
              <style>
                .nav-bar {
                  position: absolute;
                  top: 0;
                  left: 0;
                }
                .main-story {
                  position: absolute;
                  top: 50px;
                  left: 100px;
                }
                .side-story {
                  position: absolute;
                  top: 50px;
                  left: 500px;
                }
              </style>

Explanation:Visually, the navigation bar appears first, followed by the main story and side story. However, the DOM order places the main story first, leading to a confusing reading sequence for screen readers , or to users applying their own style-sheets.

What Should Be Done

HTML/CSS

              <nav class="nav-bar">
                <ul>
                  <li>Home</li>
                  <li>About</li>
                </ul>
              </nav>
              <div class="main-story">
                <h1>Main Story</h1>
                <p>Main story content...</p>
              </div>
              <div class="side-story">
                <h2>Side Story</h2>
                <p>Side story content...</p>
              </div>
              <style>
                .nav-bar {
                  float: left;
                  width: 20%;
                }
                .main-story {
                  float: left;
                  width: 50%;
                }
                .side-story {
                  float: left;
                  width: 30%;
                }
              </style>

Explanation:In the correct implementation, the DOM order matches the visual order. The CSS positions the elements without altering the logical reading sequence, ensuring accessibility.

Next Up

Expand your knowledge with SC 1.3.3 - Sensory Characteristics. Learn to make your content accessible for all users.

Go to SC 1.3.3