Is a hidden heading in the <footer> needed for accessibility?

72 Views Asked by At

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

There are 2 best solutions below

1
Yash Burshe On BEST ANSWER

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.

0
Johannes On

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