contentinfo
A region that contains information about the parent document such as copyright, links to privacy statements, and site maps. Typically implemented as the page footer with legal information and site-wide links.
Purpose
Identifies the site footer containing copyright, legal links, and document-wide information
HTML Equivalent
Automatically applied to top-level <footer> elements
Screen Reader
Announced as "contentinfo" or "footer" landmark for quick navigation
💡When to Use
Site Footer
The main footer at the bottom of your website containing site-wide information
Copyright Information
When you need to display copyright notices and ownership information
Legal Links
For privacy policy, terms of service, accessibility statement, and other legal pages
Contact Information
Site-wide contact details, social media links, or company address
💻Code Examples
Basic Contentinfo Role
Using the contentinfo role on a footer element
<!-- Using semantic HTML (Preferred) -->
<footer>
<p>© 2025 Company Name. All rights reserved.</p>
<nav aria-label="Footer navigation">
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a>
<a href="/contact">Contact Us</a>
</nav>
</footer>
<!-- Using role="contentinfo" explicitly -->
<div role="contentinfo">
<p>© 2025 Company Name. All rights reserved.</p>
<nav aria-label="Footer">
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</div>Complex Footer with Multiple Sections
A comprehensive footer with multiple navigation sections and social links
<footer>
<div class="footer-content">
<!-- Company Info -->
<section>
<h2>About Company</h2>
<p>We provide excellent services...</p>
<address>
123 Main Street<br />
City, State 12345<br />
<a href="mailto:info@example.com">info@example.com</a>
</address>
</section>
<!-- Quick Links -->
<section>
<h2>Quick Links</h2>
<nav aria-label="Footer quick links">
<ul>
<li><a href="/about">About Us</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/careers">Careers</a></li>
</ul>
</nav>
</section>
<!-- Legal Links -->
<section>
<h2>Legal</h2>
<nav aria-label="Legal information">
<ul>
<li><a href="/privacy">Privacy Policy</a></li>
<li><a href="/terms">Terms of Service</a></li>
<li><a href="/cookies">Cookie Policy</a></li>
<li><a href="/accessibility">Accessibility</a></li>
</ul>
</nav>
</section>
<!-- Social Media -->
<section>
<h2>Follow Us</h2>
<nav aria-label="Social media links">
<a href="https://twitter.com" aria-label="Twitter">
<svg><!-- Twitter icon --></svg>
</a>
<a href="https://facebook.com" aria-label="Facebook">
<svg><!-- Facebook icon --></svg>
</a>
<a href="https://linkedin.com" aria-label="LinkedIn">
<svg><!-- LinkedIn icon --></svg>
</a>
</nav>
</section>
</div>
<!-- Copyright -->
<div class="footer-bottom">
<p>© 2025 Company Name. All rights reserved.</p>
</div>
</footer>React Component Example
Implementing contentinfo role in a React footer component
import Link from 'next/link'
export default function SiteFooter() {
const currentYear = new Date().getFullYear()
const footerLinks = {
company: [
{ label: 'About Us', href: '/about' },
{ label: 'Careers', href: '/careers' },
{ label: 'Press', href: '/press' },
],
product: [
{ label: 'Features', href: '/features' },
{ label: 'Pricing', href: '/pricing' },
{ label: 'Documentation', href: '/docs' },
],
legal: [
{ label: 'Privacy', href: '/privacy' },
{ label: 'Terms', href: '/terms' },
{ label: 'Cookies', href: '/cookies' },
],
}
return (
<footer className="site-footer">
<div className="footer-grid">
{/* Company Links */}
<section>
<h2 className="footer-heading">Company</h2>
<nav aria-label="Company links">
<ul>
{footerLinks.company.map((link) => (
<li key={link.href}>
<Link href={link.href}>{link.label}</Link>
</li>
))}
</ul>
</nav>
</section>
{/* Product Links */}
<section>
<h2 className="footer-heading">Product</h2>
<nav aria-label="Product links">
<ul>
{footerLinks.product.map((link) => (
<li key={link.href}>
<Link href={link.href}>{link.label}</Link>
</li>
))}
</ul>
</nav>
</section>
{/* Legal Links */}
<section>
<h2 className="footer-heading">Legal</h2>
<nav aria-label="Legal links">
<ul>
{footerLinks.legal.map((link) => (
<li key={link.href}>
<Link href={link.href}>{link.label}</Link>
</li>
))}
</ul>
</nav>
</section>
</div>
<div className="footer-bottom">
<p>© {currentYear} Company Name. All rights reserved.</p>
</div>
</footer>
)
}⭐Best Practices
Use Semantic HTML
Prefer using the <footer> element at the document level. It automatically has the contentinfo role.
Only One per Page
There should only be one contentinfo landmark per page. Multiple footers are fine in articles, but only the page footer is contentinfo.
Include Copyright
The contentinfo should contain copyright information, legal links, and site-wide footer content.
Footer Navigation
Include links to privacy policy, terms of service, accessibility statement, and other legal/informational pages.
Place at Bottom
The contentinfo should be the last major landmark on the page, containing site-wide footer information.
Accessible Links
Ensure all footer links are keyboard accessible and have clear, descriptive text.
⚠️Common Mistakes to Avoid
Multiple Contentinfo Landmarks
Adding role="contentinfo" to multiple elements on the same page
<footer role="contentinfo">Site Footer</footer>
<div role="contentinfo">Another Footer</div> ❌Only have one contentinfo landmark per page (the site footer)
<footer>Site Footer</footer>
<div>Another Footer Section</div> ✓Using for Article Footers
Using role="contentinfo" for article or section footers
<article>
<h1>Article Title</h1>
<p>Content...</p>
<footer role="contentinfo">
Posted on January 1, 2025
</footer>
</article> ❌Contentinfo is only for the page footer, not content footers
<article>
<h1>Article Title</h1>
<p>Content...</p>
<footer>
Posted on January 1, 2025
</footer>
</article> ✓Contentinfo Inside Main
Placing the contentinfo inside the main content area
<main>
<div>Content</div>
<footer role="contentinfo">Footer</footer>
</main> ❌Contentinfo should be a top-level landmark, outside main
<main>
<div>Content</div>
</main>
<footer>Footer</footer> ✓🔗Related ARIA Attributes
aria-label
Provide a label if you have contextual footers that need distinction
<footer aria-label="Site footer">aria-labelledby
Reference an element that labels the footer
<footer aria-labelledby="footer-heading">♿Accessibility Support
Screen Readers
Contentinfo landmarks are announced by screen readers, allowing users to quickly navigate to the footer using landmark navigation shortcuts.
Keyboard Navigation
Users can jump directly to the footer using keyboard shortcuts, accessing legal information and site-wide links efficiently.
Browser Support
Universally supported across all modern browsers and assistive technologies. The semantic <footer> element provides automatic contentinfo role mapping.