SiteLint documentation and guidelines

Meaningful content sequence

Description

The meaningful content sequence rule ensures that the content of a webpage is presented in a logical and intuitive order. This rule is crucial for accessibility, particularly for users relying on assistive technologies such as screen readers. A logical content sequence helps all users, especially those with disabilities, to understand and navigate the content effectively.

Example of the content sequence that remains logical and accessible
<header>
    <!-- Site header -->
</header>

<nav>
    <!-- Navigation -->
</nav>

<main>
    <section>
        <!-- Section of content -->
    </section>
    <aside>
        <!-- Sidebar content -->
    </aside>
</main>

<footer>
    <!-- Site footer -->
</footer>

Disabilities impacted

  • Visual impairments: users with visual impairments rely on screen readers to navigate through the content. If the content is not in a logical order, it can be confusing and difficult to follow.
  • Cognitive disabilities: users with cognitive disabilities benefit from a clear and predictable content sequence, which helps them process and understand the information better.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices need a logical content flow to interact with the content efficiently.

Why it matters

Presenting content in a logical and intuitive order enhances the accessibility and usability of a webpage. It ensures that all users can follow the content as intended, reducing confusion and making the information easier to understand and navigate. This is particularly important for users who rely on assistive technologies.

Coding problems and solutions

Common coding problems

  • Non-logical content order: content is presented in a non-logical order, making it difficult to understand and navigate.
  • Improper use of HTML elements: using HTML elements inappropriately can disrupt the natural content flow.
  • Dynamic content issues: dynamically inserted content that does not maintain the logical sequence of the page.

How to fix it

Ensure logical content order

Structure your HTML to reflect the logical order of the content.

Incorrect example
<main>
    <section id="section2">
        <h2>Section 2</h2>
        <p>Content for section 2.</p>
    </section>
    <header>
        <h1>Main Title</h1>
        <nav>
            <ul>
                <li><a href="#section1">Section 1</a></li>
                <li><a href="#section2">Section 2</a></li>
            </ul>
        </nav>
    </header>
    <section id="section1">
        <h2>Section 1</h2>
        <p>Content for section 1.</p>
    </section>
</main>
<footer>
    <p>Footer content.</p>
</footer>
Correct example
<header>
    <h1>Main Title</h1>
    <nav>
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
        </ul>
    </nav>
</header>
<main>
    <section id="section1">
        <h2>Section 1</h2>
        <p>Content for section 1.</p>
    </section>
    <section id="section2">
        <h2>Section 2</h2>
        <p>Content for section 2.</p>
    </section>
</main>
<footer>
    <p>Footer content.</p>
</footer>

Use HTML elements appropriately

Ensure that HTML elements are used according to their semantic purpose to maintain a logical flow.

Incorrect example
<article>
    <section>
        <h2>Introduction</h2>
        <p>List item 1</p>
        <p>List item 2</p>
        <p>List item 3</p>
    </section>
    <header>
        <h1>Article Title</h1>
        <p>Author name</p>
    </header>
    <section>
        <h2>Details</h2>
        <p>Detailed content.</p>
    </section>
    <footer>
        <p>Footer information.</p>
    </footer>
</article>
Correct example
<article>
    <header>
        <h1>Article Title</h1>
        <p>Author name</p>
        <ul>
         <li>List item 1</li>
         <li>List item 2</li>
         <li>List item 3</li>
        </ul>
    </header>
    <section>
        <h2>Introduction</h2>
        <p>Introductory content.</p>
    </section>
    <section>
        <h2>Details</h2>
        <p>Detailed content.</p>
    </section>
    <footer>
        <p>Footer information.</p>
    </footer>
</article>

Maintain sequence in dynamic Content

Ensure dynamically inserted content maintains the logical sequence of the page.

Correct example
<div id="content">
    <h1>Main Title</h1>
    <div id="dynamic-content"></div>
    <p>Static content.</p>
</div>

<script>
    document.getElementById('dynamic-content'). insertAdjacentHTML('afterbegin, '<h2>Dynamic Section</h2><p>Dynamic content goes here.</p>');
</script>

Known limitations

  • Complex interactions: for pages with complex interactions, ensure that the content sequence remains logical and accessible.
  • Responsive design: ensure that the content sequence remains logical across different screen sizes and devices.
  • Dynamic content updates: regularly review and test dynamic content to ensure it maintains the logical sequence of the page.

Resources