banner
A region that contains mostly site-oriented content, rather than page-specific content. Typically contains the site logo, main navigation, and other site-wide elements that appear on every page.
Purpose
Identifies the site-wide header containing branding, navigation, and other global elements
HTML Equivalent
Automatically applied to top-level <header> elements
Screen Reader
Announced as "banner" or "header" landmark, allows quick navigation
💡When to Use
Site Header
The main header at the top of your website containing site-wide elements
Global Navigation
When you need to group the main site navigation with branding
Every Page
The banner should appear consistently across all pages of your site
💻Code Examples
Basic Banner Role
Using the banner role on a header element
<!-- Using semantic HTML (Preferred) -->
<header>
<div class="logo">My Website</div>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<!-- Using role="banner" explicitly -->
<div role="banner">
<div class="logo">My Website</div>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</div>Complex Banner with Multiple Elements
A complete header with logo, navigation, search, and user menu
<header>
<div class="header-container">
<!-- Logo/Branding -->
<a href="/" aria-label="Homepage">
<img src="logo.png" alt="Company Name" />
</a>
<!-- Main navigation -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<!-- Search -->
<form role="search" aria-label="Site search">
<input
type="search"
aria-label="Search query"
placeholder="Search..."
/>
<button type="submit">Search</button>
</form>
<!-- User menu -->
<div class="user-menu">
<button aria-expanded="false" aria-controls="user-dropdown">
Account
</button>
</div>
</div>
</header>React Component Example
Implementing banner role in a React component
import { useState } from 'react'
import Link from 'next/link'
export default function SiteHeader() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
return (
<header className="site-header">
<div className="container">
<Link href="/" aria-label="Go to homepage">
<img src="/logo.svg" alt="Company Name" />
</Link>
<button
className="mobile-menu-toggle"
aria-expanded={mobileMenuOpen}
aria-controls="main-nav"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
>
Menu
</button>
<nav
id="main-nav"
aria-label="Main navigation"
className={mobileMenuOpen ? 'open' : ''}
>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<Link href="/services">Services</Link>
<Link href="/contact">Contact</Link>
</nav>
</div>
</header>
)
}⭐Best Practices
Use Semantic HTML
Prefer using the <header> element at the top level of the document. It automatically has the banner role.
Only One per Page
There should only be one banner landmark per page. Multiple headers are fine, but only the top-level one is the banner.
Avoid Nested Banners
Do not nest banner landmarks within other landmarks like main, complementary, or contentinfo.
Place at Top of Page
The banner should be the first major landmark on the page, containing site-wide navigation and branding.
Include Site Navigation
The banner typically contains the main site navigation, logo, search, and other site-wide elements.
Keyboard Accessible
Ensure all interactive elements in the banner (navigation, search, buttons) are keyboard accessible.
⚠️Common Mistakes to Avoid
Multiple Banners
Adding role="banner" to multiple elements on the same page
<header role="banner">Site Header</header>
<div role="banner">Another Header</div> ❌Only have one banner landmark per page
<header>Site Header</header>
<div>Another Header Section</div> ✓Banner Inside Main
Placing the banner inside the main content area
<main>
<header role="banner">Header</header>
<div>Content</div>
</main> ❌Banner should be a top-level landmark, not nested in main
<header>Header</header>
<main>
<div>Content</div>
</main> ✓Using Banner for Page Headers
Using role="banner" for article or section headers
<article>
<header role="banner">Article Title</header>
<p>Content...</p>
</article> ❌Banner is only for the site header, not content headers
<article>
<header>Article Title</header>
<p>Content...</p>
</article> ✓🔗Related ARIA Attributes
aria-label
Provide a label if you have multiple headers for different contexts
<header aria-label="Site header">aria-labelledby
Reference an element that labels the banner
<header aria-labelledby="site-title">♿Accessibility Support
Screen Readers
Banner landmarks are announced by screen readers, allowing users to quickly navigate to the site header using landmark navigation shortcuts (e.g., "B" key in NVDA/JAWS).
Keyboard Navigation
Users can jump directly to the banner using keyboard shortcuts, bypassing repeated content to access site-wide navigation efficiently.
Browser Support
Universally supported across all modern browsers and assistive technologies. The semantic <header> element provides automatic banner role mapping.