The <search> Element
As defined in the HTML Living Standard, the <search> element represents a part of a document or application that contains a set of form controls or other content related to performing a search or filtering operation.
<search>
<form action="/search">
<label for="search-input">Search</label>
<input type="search" id="search-input" name="q">
<button>Search</button>
</form>
</search>
View HTML Living Standard: The search element
Accessibility Landmark: search
The <search> element is programmatically identified as a search landmark.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Historically, developers had to use <div role="search"> to identify search areas. The native <search> element provides this landmark role automatically. This allows screen reader users to use shortcut keys (like 'S' or landmark navigation menus) to jump directly to the search field from anywhere on the page, significantly improving efficiency.
Nesting and Content
The <search> tag is a wrapper for search-related content. It typically contains a <form>, but it can also contain filtering controls, toggle switches, or informational text about the search parameters.
- Filtering: Use it for search result pages that include "Filter by date" or "Sort by relevance" controls.
- Multiple Search Areas: If a page has multiple search landmarks (e.g., a site-wide search and a scoped document search), use
aria-labelto help users distinguish them.
<search aria-label="Documentation search">
<!-- form and filters here -->
</search>
Bypassing Blocks
By providing a clear landmark for the search area, the <search> element contributes to meeting WCAG SC 2.4.1 (Bypass Blocks). While a "Skip to Main Content" link is the primary mechanism, landmark navigation provides a more granular way for users to skip navigation headers and footer blocks to reach the specific tools they need.
A11y Tip: Input Labels
Even when wrapped in a <search> tag, the <input> field still requires a visible <label> or a hidden aria-label to satisfy WCAG SC 3.3.2. The landmark defines the region, while the label defines the specific control.