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.