Using HTML headings out of sequence

Question

The company I work for has recently commissioned an external web design/development agency to redevelop their website. The agency supplied HTML that used headings out of sequence and/or missed certain heading levels out altogether.

I have created the following mock-ups to illustrate:

• Product page:

  

• Product search results:

  

When a colleague raised this issue with the company they stated that this was acceptable because headings only needed to be used in sequence in the main content area of a standard content page to structure the text.

My understanding was that, for accessibility reasons, headings should be used to apply structure to the entire webpage. Therefore the way the company has used headings in the mock-ups above is incorrect.

Please can anyone with expert knowledge in this area kindly respond to help provide clarity to this situation?

Here is the relevant HTML for the search results page.

<main class="inner">

    <div class="content-container-del">

        <aside class="content-aside col-xs-16 col-md-4">

            <div class="accordion-small-container">
                <h5>Refine by:</h5>

                <dl class="accordion--small">
                    <dt class="js-accordion-dt active">Level</dt>
                    <dd class="js-accordion-dd active">

                        <div class="checkbox-list">
                            <div class="checkbox-list__checkbox">
                                <input id="checkbox" class="checkbox" value="check" name="checkboxes" type="checkbox">
                                <label for="checkbox">Checkbox</label>
                            </div>

                            <div class="checkbox-list__checkbox">
                                <input id="checkbox_3" class="checkbox" value="check_3" name="checkboxes" type="checkbox">
                                <label for="checkbox_3">Checkbox</label>
                            </div>

                        </div>
                    </dd>

                    <dt class="js-accordion-dt">Subject</dt>
                    <dd style="display: none;" class="js-accordion-dd">
                        <div class="checkbox-list">
                            <div class="checkbox-list__checkbox">
                                <input id="checkbox_5" class="checkbox" value="check_5" name="checkboxes" type="checkbox">
                                <label for="checkbox_5">Checkbox</label>
                            </div>

                            <div class="checkbox-list__checkbox">
                                <input id="checkbox_4" class="checkbox" value="check_4" name="checkboxes" type="checkbox">
                                <label for="checkbox_4">Checkbox</label>
                            </div>
                        </div>
                    </dd>
                </dl>

                <button type="button" class="btn-arrow">Apply Filters</button>
            </div>

        </aside>

        <article class="col-xs-16 col-md-12">
            <div class="general-search-header purple">
                <h3 class="general-search-header__title">Product Search</h3>

                <div class="search-box--general-search">
                    <label class="hidden" aria-hidden="true" for="search-box__input-text">Search:</label>
                    <input id="search-box__input-text" class="search-box__input-text" placeholder="Search term..." type="text">

                    <div class="search-box__label icon-search">
                        <input aria-hidden="true" id="search-box__submit" class="search-box__submit" value="Submit" type="submit">
                    </div>
                </div>

            </div>

            <div class="col-md-15 col-md-push-1">



                <ul class="search-result-list purple">
                    <li class="search-result-list__item">
                        <h4 class="search-result-list__title"><a href="">Search result 1</a></h4>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur et, vero minus. Illum eveniet, sit quia accusamus quis earum asperiores eos fugit voluptas. Vero assumenda numquam aliquid impedit ducimus esse.</p>
                    </li>

                    <li class="search-result-list__item">
                        <h4 class="search-result-list__title"><a href="">Search result 2</a></h4>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur et, vero minus. Illum eveniet, sit quia accusamus quis earum asperiores eos fugit voluptas. Vero assumenda numquam aliquid impedit ducimus esse.</p>
                    </li>
                </ul>

                <ul class="pagination purple">
    <li class="pagination__item">
        <a href="" class="pagination__link prev">«</a>
    </li>

    <li class="pagination__item active">
        <a href="" class="pagination__link">1</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link">2</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link">3</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link">4</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link">...</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link">10</a>
    </li>

    <li class="pagination__item">
        <a href="" class="pagination__link next">»</a>
    </li>
</ul>
            </div>
        </article>

    </div>
    <!-- end: content-container -->

</main>

And here's the relevant HTML for the product page.

<main class="inner">

    <div class="page-intro row">
    <div class="page-intro__left-column col-xs-16 col-md-8">

        <h1 class="page-intro__title">Product Title</h1>
        <h4 class="page-intro__sub-title">Product sub-heading</h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ipsam quia, explicabo commodi quaerat modi saepe corporis numquam autem quod deserunt, harum assumenda ratione dolorum laboriosam qui aliquam hic vel adipisci aut voluptates in! Modi commodi dolores laboriosam ad incidunt.</p>

    </div>

    <div class="col-xs-16 col-md-8">

        <div class="page-intro__media--link" style="background-image: url('http://placehold.it/730x430');">
            <a href="" class="page-intro__media--link-href">
                <span class="page-intro__media--link__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</span>
            </a>
        </div>


    </div>
</div>


    <div id="course-description" class="course-description row">

        <div class="col-md-11">
            <div class="course-description__left-column">
                <h2 class="sub-title">Product Description</h2>

                <div class="js-readmore-container js-readmore-active">
                    <div style="height: 400px;" class="content-inner js-block-height" data-height="400">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde vel et, exercitationem laudantium numquam totam mollitia fuga neque ea laborum eum, deleniti omnis veritatis repellat porro minus recusandae earum, animi.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora placeat ea reiciendis iste, dignissimos ex accusantium maiores magnam neque! Vero explicabo quo nostrum autem tenetur delectus suscipit, atque ut dicta facilis temporibus maxime eius minima, odit quidem consectetur quibusdam. Cum eligendi repudiandae, ea odit, exercitationem veritatis ab soluta vitae iste.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sunt nesciunt expedita, fugiat, delectus commodi, distinctio exercitationem, maiores natus nobis cumque sequi. Eaque rem iste neque minima! Quod, ullam dolorum aliquid voluptas maxime hic voluptatibus provident officia. Eveniet maxime laborum laudantium, dicta. Omnis debitis, excepturi cum perferendis pariatur consequuntur error. Id labore, excepturi natus reiciendis eveniet iusto impedit rerum, itaque eos. Aliquid obcaecati aut quasi dolorum facilis dignissimos, consequuntur minima fugiat quaerat placeat earum adipisci totam perspiciatis, laboriosam, sint in! Provident temporibus hic aperiam, magnam rerum quidem, sequi eaque ipsa, dolorum fuga veritatis cumque! Delectus, rem, officiis? Voluptatibus, est quibusdam?</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat aut molestias, facere dicta natus ipsum velit rerum repellat, necessitatibus itaque possimus harum. Repellendus delectus, hic eum itaque ipsa, quaerat adipisci neque ipsum a totam perspiciatis tenetur architecto sed repellat at.</p>
                    </div>

                    <button class="show-more js-show-more" type="button">Show More</button>
                </div>
            </div>

        </div>

    </div>

    <div class="course-block row">
        <h2 class="sub-title">Why choose Company X?</h2>
        <div class="boxed-panel--green">
            <section class="boxed-panel__box">
                <h4 class="boxed-panel__box-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, accusantium!</h4>
            </section>
            <section class="boxed-panel__box">
                <h4 class="boxed-panel__box-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, accusantium!</h4>
            </section>
            <section class="boxed-panel__box">
                <h4 class="boxed-panel__box-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, accusantium!</h4>
            </section>
            <section class="boxed-panel__box">
                <h4 class="boxed-panel__box-title">Lorem ipsum dolor sit amet</h4>
            </section>
        </div>
    </div>

</main>

Answer 1

Every sectioning element, such as article, section and aside can start a new heading hierarchy. The main heading in each sectioning element can be a h1. @Quentin is right in that it might be best to avoid this.

It is completely wrong to chose heading level after which size it's shown as. Add classes to the elements and style those instead.

Product page

<h1> and <h2> are correct.

<h4> Product sub-title I think is better as a <strong> element.

The <h4> blocks should probably not be headings. Instead I think <p> with font-weight: bold; would be more semantically correct.

Product search result

<h3> Product search should be <h1>

<h4> Search result should be <h2>

I think the <h5> Filters heading on the search result page should not be a heading at all but a <legend> inside a <form>.

Answer 2

Despite the fact that it is HTML5 valid, it's not accessibility friendly.

Here are some quotes from the WCAG techniques:

G141: Organizing a page using headings

To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.).

H42: Using h1-h6 to identify headings

It is important to note that the example code below is not intended to prescribe what level of heading should be used for a particular section of the web page. In the example, the layout could be presented with the first heading in each column at the same logical level (such as an h1), or as found in the example, where the logical level reflects its importance in relation to the main content.

In your case:

First screenshot: h4 is used for a subtitle, and for text paragraphs. Not for title. Bad. See "F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content"

Second screenshot:

The logical level does not reflect its importance in relation to the main content : h5 for "Filters" when h3 is used for the main content.

Filters are obviously a subpart of the "Product Search" page, not an aside section. It should appear after the page title, in the source code, and logically have the lower level (or no level at all, as this is just a part of the form).

tl;dr : Regarding accessibility, you have to list your heading hierarchy to see if it is coherent.

Answer 3

The HTML5 specs allow for heading levels the way they've built it, but people who use assistive tech will be confused by the use of H4 on the product page (none of it is really heading content) and more particularly by the missing H1 and H2 on the search results page. The H5 placed before the H3 and H2 content is unusual but understandable. I'd probably make the H3 a H1, and all the others H2, but you could make a case for the filter heading being a H3. The WCAG2 specs are more concerned with whether or not the content is understandable than following HTML5 specs.

Screenreader and Braille-reader users frequently use a keyboard shortcut to have the headings listed for them, and use this to understand the structure of the page. They can also skip to the heading that interests them, making it easier to navigate a long page (that would be especially useful on a search results page). There is very little browser or device support for the HTML5 document outline method, where article/section/etc was intended to provide the context for out-of-sequence or missing headings.

So the agency is technically correct but wrong in practice, and will cause the approximately 8% of users who rely on headings a lot of unnecessary confusion, thinking they've missed a chunk of content or gotten lost. It might not sound like much but I bet you're supporting an old browser with fewer users in your audience :)

Edited to add: a thorough article on the HTML5 outline method which notes that there's no browser implementation of the heading-levels-anywhere method yet. And a warning about the lack of implementation from the W3C. Their write-up of headings (scroll up a bit on that link) also says you shouldn't use H1-6 for subtitles, etc. as your agency does on the product page.

Answer 4

My understanding was that, for accessibility reasons

A quick search and I found this link that quotes the W3C specification and what it boils down to is that each <section> can start a new header tag heirarchy. However, the heirarchy need not start with <h1> and continue down, it can start with <h3> if that is what you want to do. There is a short section on the linked page about what is best for assistive technologies, it is for the most part subjective.

You could also read the W3C spec yourself and see how you interpret it. I would ask "is it important?" Do you have any users who need a purely semantic layout (as suggested with regard to assistive tech.), because not every site does. And if you do have users with assistive needs, did your company make that clear in the spec for the development they are doing, because it is a lot of extra work and testing. Screen readers can be free, but many paid ones exist too.

Short answer, based on what I have seen, the header tags in your mockup appear valid html.