banner
The site-wide header landmark — typically holds the logo, primary navigation, and search. The top-level <header> element carries this role automatically. Only one banner per page.
When to use
Use <header> as a direct child of <body> (or <html> in a top-level fragment). When <header> is at the top level, the browser exposes it as a banner landmark automatically. When <header> is nested inside <article>, <section>, <main>, or <aside>, it is just a generic group, not a landmark.
role="banner" on a <div> is appropriate only when you cannot use <header> — for instance inside a CMS that strips landmark tags.
There must be no more than one banner per page. If you have a second header that is not the site banner (a section header, a comment thread header), use a plain <header> nested inside its section, not at the top level.
When to label
If your page has multiple landmarks of the same type (rare for banner, common for navigation), add aria-label to distinguish them. A single banner does not need a label — screen readers announce it as “banner”.
Common failures
- Multiple
<header>elements at the top of the page, each promoted to a banner landmark. Screen-reader users see two “banner” entries in the landmark menu and cannot tell which is the real header. role="banner"on a<header>that is nested inside<main>or<article>. The role overrides the default-non-landmark behaviour and pollutes the landmark navigation.- Site logo placed outside the
<header>so it falls outside the banner landmark. - Sticky navigation rendered as a separate
<div role="banner">next to the original<header>— two banners. - Banner with empty content (just decorative borders) — the landmark still appears in screen-reader navigation but has nothing in it.
Example
<body>
<header>
<a href="/" aria-label="Disability World home">
<img src="/logo.svg" alt="">
</a>
<nav aria-label="Primary">
<a href="/toolkit/">Toolkit</a>
<a href="/library/">Library</a>
</nav>
</header>
<main>…</main>
</body>