About This HTML Issue
The HTML specification maps certain elements to implicit ARIA roles. The <footer> element, when used as a direct child of <body> (i.e., not nested inside an <article>, <aside>, <main>, <nav>, or <section> element), automatically carries the contentinfo landmark role. This means screen readers and other assistive technologies already announce it as a content information landmark without any extra markup.
Adding role="contentinfo" to a <footer> element is redundant because:
- It duplicates built-in semantics. Browsers already expose the correct role to the accessibility tree. Repeating it adds no benefit and clutters your markup.
- It can cause confusion for developers. Seeing an explicit role might suggest the element doesn’t have one by default, leading to misunderstandings about how HTML semantics work.
- It violates the first rule of ARIA use. The W3C’s “Using ARIA” guide states: “If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.”
It’s worth noting that when a <footer> is nested inside a sectioning element like <article> or <section>, it does not carry the contentinfo role — it maps to a generic role instead. In that context, adding role="contentinfo" would actually change the element’s semantics rather than being redundant, though doing so is generally not appropriate since each page should have only one contentinfo landmark.
If you are working with a <div> that serves as a footer (perhaps in legacy code), the best approach is to replace it with a semantic <footer> element rather than applying role="contentinfo" to the <div>.
Examples
❌ Redundant role on <footer>
This triggers the validator warning because the role is already implicit:
<footer role="contentinfo">
<p>© 2024 Example Corp. All rights reserved.</p>
</footer>
✅ Fixed: <footer> without redundant role
Simply remove the role="contentinfo" attribute:
<footer>
<p>© 2024 Example Corp. All rights reserved.</p>
</footer>
✅ Using a <div> as a footer (legacy pattern)
If you cannot use a <footer> element for some reason, applying role="contentinfo" to a <div> is valid and meaningful since the <div> has no implicit role:
<div role="contentinfo">
<p>© 2024 Example Corp. All rights reserved.</p>
</div>
However, replacing the <div> with a <footer> is always the preferred approach.
✅ Nested footer inside a section
When <footer> appears inside a sectioning element, it does not carry the contentinfo role. No explicit role is needed here either — it simply represents footer content for that section:
<article>
<h2>Blog Post Title</h2>
<p>Article content here.</p>
<footer>
<p>Published on January 1, 2024</p>
</footer>
</article>Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.