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
<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 theul
menu orrole="navigation"
as an attribute in theul
is sufficient and actually more practical for screen reader users.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.