Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<a href="#example-footer">Skip to example footer</a>
<footer tabindex="-1" id="example-footer">
  <nav aria-label="Site map">
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/contact/">Contact</a></li>
  © 2021
Skip to example footer

When you can’t use semantic HTML

This custom footer requires extra attributes.

<div role="contentinfo" tabindex="-1" id="example-footer">
  &copy; 2021 Site Name

Developer notes


  • Typically doesn’t have a name


  • Identifies itself as a footer or contentinfo landmark
  • If a non-semantic element must be used (like a <div>) use role="contentinfo".


  • Typically contains copyright information, navigation links, and privacy statements.


  • Can be targeted with a skip link, but isn’t focusable with the tab key
  • Use tabindex="-1" to make the footer targetable with a skip link.