General notes

  • There should only be a one singular header/banner element on the page.
  • Contains site title and typically the primary navigation.

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<header id="example-header">
  <a href="#example-nav">Skip to navigation</a>
  <a href="#">Not the navigation</a>
    <nav tabindex="-1" id="example-nav">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/contact/">Contact</a></li>
      <li><button aria-haspopup="true">Sign in</button></li>
    </ul>
  </nav>
</header>
Skip to navigation Not the navigation

When you can’t use semantic HTML

This custom header requires extra attributes.

<div role="banner" tabindex="-1" id="example-header">
  <a href="/">Website name</a>
</div>

Developer notes

Name

  • Typically doesn’t have a name or description since there should be only one instance per page

Role

  • Identifies itself as a header or banner landmark
  • If a non-semantic element must be used (like a <div>) use role="banner" to make the element discoverable.

Group

  • Contains site title and typically the primary navigation.

Focus

  • Can be targeted with a skip link, but the skip link will typically will be labelled “skip to navigation”
  • Use tabindex="-1" to make the header targetable with a skip link.
  • The <header> itself isn’t focusable with the tab key