Search code examples
accessibilitywcag

How do I use/not use headers tags in a footer so the code is WCAG 2.0 AA valid?

Here is a sample of code that is not WCAG 2.0 AA valid. The part not valid is the use of H3 tag in the footer without a H2 being present between the H1 and H3 tags: [WCAG v2 1.3.1 (A)] Nest headings properly (H1 > H2 > H3):

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <h1>test</h1>
    <p>lorem</p>
    <footer>
        <h3>test f</h3>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </footer>
</body>
</html>

considering the fact that the content before the footer is edited by an editor without proper knowledge about WCAG guidelines, what is the best way to code a WCAG website?

So far I see 2 solutions:

  1. Not use h3 or any other header tags in the footer
  2. Reset header nesting by adding a h1 and a h2 before the h3 in the footer and hide them from CSS.

I don't think any of these are good solutions. Here's why: 1. The footer is sometimes editable by a user(CMS use) and you have to always take into a account the content present before the footer content 2. I don't think hiding content with css is a good solution

Are there any solutions to this problem?

Thank you

Solution

  • You want sectioning elements: section, article, nav and aside.

    Each sectioning element should get a heading. And you can always use h1!

    So your example could look like:

    <!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <h1>test</h1>
    <p>lorem</p>
    <footer>
      <section>
        <h1>test f</h1>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
      </section>
    </footer>
</body>
</html>