- There should only be a one singular header/banner element on the page.
- Typically contains site title and primary navigation.
Use semantic HTML
This semantic HTML contains all accessibility features by default.
When you can’t use semantic HTML
This custom header requires extra attributes.
- Typically doesn’t have a name or description
- 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
role="banner"to make the element discoverable.
- Typically contains site title and primary navigation
- Can be targeted with a skip link, but isn’t focusable with the tab key
tabindex="-1"to make the header targetable with a skip link.