search
A landmark region that contains a collection of items and objects that, as a whole, combine to create search functionality. Use this for site-wide or major search features that users need to find quickly.
Purpose
Identifies the search functionality so users can quickly find it
HTML Equivalent
<search> element (HTML5.3+) or role="search"
Screen Reader
Announced as "search" landmark for quick navigation
💡When to Use
Site-Wide Search
The primary search functionality for your website
Product/Content Search
Search within a specific section (e-commerce, documentation, articles)
Advanced Search Forms
Search with filters, facets, and advanced options
💻Code Examples
Basic Search Landmark
Creating a search landmark region
<!-- Search using role="search" -->
<div role="search">
<form>
<label for="site-search">Search</label>
<input type="search" id="site-search" name="q" />
<button type="submit">Search</button>
</form>
</div>
<!-- Using <search> element (HTML5.3+) -->
<search>
<form>
<label for="product-search">Search Products</label>
<input type="search" id="product-search" />
<button type="submit">Search</button>
</form>
</search>Advanced Search with Filters
Search region with multiple options and filters
<div role="search" aria-label="Product search">
<form>
<!-- Search Input -->
<label for="product-query">Search Products</label>
<input
type="search"
id="product-query"
name="q"
placeholder="Enter product name..."
/>
<!-- Filters -->
<fieldset>
<legend>Category</legend>
<label>
<input type="checkbox" name="category" value="electronics" />
Electronics
</label>
<label>
<input type="checkbox" name="category" value="clothing" />
Clothing
</label>
</fieldset>
<!-- Price Range -->
<label for="min-price">Min Price</label>
<input type="number" id="min-price" name="min" />
<label for="max-price">Max Price</label>
<input type="number" id="max-price" name="max" />
<button type="submit">Search</button>
</form>
</div>React Search Component
Implementing search landmark in React
import { useState } from 'react'
export default function SiteSearch() {
const [query, setQuery] = useState('')
const [results, setResults] = useState([])
const handleSearch = async (e: React.FormEvent) => {
e.preventDefault()
// Perform search
const data = await fetch(`/api/search?q=${query}`)
setResults(await data.json())
}
return (
<div role="search">
<form onSubmit={handleSearch}>
<label htmlFor="search-input">
Search the site
</label>
<input
type="search"
id="search-input"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search..."
/>
<button type="submit">Search</button>
</form>
{results.length > 0 && (
<div role="region" aria-label="Search results">
<h2>{results.length} Results</h2>
<ul>
{results.map((result) => (
<li key={result.id}>
<a href={result.url}>{result.title}</a>
</li>
))}
</ul>
</div>
)}
</div>
)
}⭐Best Practices
Use for Site Search
Use search role for the primary site search functionality. Users can jump directly to it with screen reader shortcuts.
Label When Multiple
If you have multiple search regions, add aria-label to distinguish them (e.g., "Product search", "Site search").
Accessible Form
Ensure the search input has a label and the submit button is keyboard accessible.