CODEWITHSUNDEEP
htmlaccessibilitysection508wcagwcag2.0
JacobTheDev
JacobTheDev

Reputation: 18520

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

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?

Upvotes: 6

Views: 1422

Answers (2)

slugolicious
slugolicious

Reputation: 17435

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>.

Upvotes: 1

unor
unor

Reputation: 96547

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.)

Upvotes: 2

Related Questions