Developer notes

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

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

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

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

Role

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

Group

  • Typically contains site title and primary navigation

Focus

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