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

StackOverflow https://stackoverflow.com/questions/13180655

  •  25-07-2021
  •  | 
  •  

Question

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

Was it helpful?

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>

OTHER TIPS

I do not recomend using too many h1. It is not against wcag, but different heading levels helps users of screen reader (such as me) understand the hierarchy. Skipping over heading levels is not the best either, but it is still better than having too many h1. I would suggest that use h3 always in the footer and if sometimes you are skipping from h1 to h3, then it is ok. users will understand it because that part is being repeated. it is not against wcag and it is much easier to understand for the actual users.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top