skip to Main Content

Is it necessary or helpful for accessibility of my website to add a heading saying footer in the footer? I know the footer is a landmark en therefor a user of a screen reader could find out the heading ‘Menu’ is inside the footer. But using the heading list option of the screen reader this information is not present so a user doesn’t know its in the footer? Any advice on this?

So should I do this:

<footer>
  <h2 class="visually-hidden">Footer</h2>
  <h3>Menu</h3>
  <ul>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
  </ul>
</footer>

Or this:

<footer>
  <h2>Menu</h2>
  <ul>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
  </ul>
</footer>

2

Answers


  1. <footer> is already a (very common) tag which screenreaders can interpret, so you don’t need an additional (hidden) header for it.

    Apart from that, also your "Menu" <h2> headers in both examples are not necessary – a <nav> tag around the ul menu or role="navigation" as an attribute in the ul is sufficient and actually more practical for screen reader users.

    Login or Signup to reply.
  2. According to MDN Web Docs and W3.org just having the <footer> tag by itself is enough to be accessible as long as it is not used inside an <article> or <section> element. The second option should be enough from an accessibility stand point.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search