How should headings be handled in global elements for accessibility purposes?

Asked 2/4, 2019 at 20:28 Answered 5/4, 2019 at 16:2

html accessibility section508 wcag wcag2.0

In many designs, a number of headings may appear in the header, footer, or other global elements of a website. One example would be denoting "Contact Us," "Our Address," and similar sections in the page footer, or a tagline in the page header.

In these cases, I've historically tended to use <h6> elements, as they're the lowest priority heading, and therefore I assumed that the would be best suited to this use case.

However, I recently started trying to improve accessibility on my projects, and I've found that essentially every automated a11y testing tool says that this isn't the correct way to do this. I constantly get errors stating "the heading structure is not logically nested" because <h6> either appears before any other heading (in the case of a tagline in the page header), or jumps from an earlier heading to <h6> (in the case of footer titles, when the rest of the content stops after anything less than <h5>).

I would just change the <h6> in the header and footer to <p> styled to match their original designs, but that seems incorrect to me – shouldn't each section with a heading in the footer be denoted with an actual heading?

What is the appropriate way to denote headings in global elements of a page to ensure accessibility?

Stephenson answered 2/4, 2019 at 20:28 Comment(0)

The typical site can have a logical heading outline by using the site name as top-level heading. Everything on the page belongs to the site, the page’s main content as well as the site navigation as well as the footer etc.

<h1>Site name</h1>

  <h2>Site navigation</h2>

  <h2>Page main content</h2>

  <h2>Contact us</h2>

  <h2>Our address</h2>

(Note that a tagline should not be a heading.)

With HTML5, you can make the sections explicit (article, aside, nav, section), and convey what each section is part of (header, main, footer):

<body>

  <header>
    <h1>Site name</h1>
    <p>Site tagline</p>

    <nav>
      <h2>Site navigation</h2>
      <!-- heading not necessarily needed -->
    </nav>
  </header>

  <main>
    <article>
      <h2>Page main content</h2>
    </article>
  </main>

  <footer>
    <section>
      <h2>Contact us</h2>
    </section>
    <section>
      <h2>Our address</h2>
    </section>
  </footer>

</body>

(If the footer consists of many sections, it can make sense to introduce grouping headings/sections where possible, e.g., 'Contact' in this example. That said, not every footer needs sections/headings to begin with, especially not if the content is rather thin or not that important.)

Whitebait answered 3/4, 2019 at 14:4 Comment(0)

Tools that flag the heading levels should only be doing so as a "warning" or "needs review". You can't make a blanket statement that an <h6> must follow an <h5>. I think what you're doing is correct. Make all the footer headings an <h6> so that it's consistent across the entire site. You might have pages that have enough information to warrant headings up to an <h5> but something like a "contact us" page probably has just an <h1>. Having an <h1> and then <h6> is not an automatic WCAG failure.

1.3.1 Info and Relationships is typically the guideline used to flag headings in error but all that requirement says is

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

It says nothing about skipping heading levels (except in some of the recommended techniques to achieve 1.3.1, but those are non-normative). For example, H42: Using h1-h6 to identify headings talks about using proper headings but one of the examples shows it's ok to have an <h2> before an <h1>.

Zoography answered 5/4, 2019 at 16:2 Comment(2)

I think you might be misunderstanding what headings are for. Generally H1s are going to be the page title. H2s are going to be a section of the page, H3s are a subsection of that section. It doesn't really make sense to have an h6 level subsection heading underneath an H1 in that context. Headings really should only be used to denote the start of a new section, whether it's at the same level of the one before it or a subsection of that section. w3.org/WAI/tutorials/page-structure/headings Although I do agree that saying it's okay to have an H2 before the H1 is confusing. – Rheumy 15/8 at 15:26

More specifically I think you are missing the organizational purpose of headings. – Rheumy 15/8 at 15:49

Recommended topics

Hot tags