search

When to use

Around the site’s primary search affordance — usually a <form> containing an input and a submit button. Use the native <search> element if you can; it ships the landmark for free. For older browsers, apply role="search" to the <form> instead.

The point of the landmark is to expose the search affordance in the screen-reader landmark menu so users can jump to it directly. Without the landmark, the search form is just another form on the page.

The input inside the search landmark should use <input type="search"> — that gives you the search semantic on the field, the platform clear-button affordance, and a “Search” return key on mobile.

When to label

A single search landmark does not need a label. If you have multiple searches on the same page (a global site search in the header AND a filter search inside the page content), label each one — “Site search”, “Filter results”.

Common failures

• Search form with no landmark. Users can’t navigate to it via landmark navigation.
• role="search" applied to the <input> instead of the surrounding <form> or wrapper. The role belongs on the container, not the field.
• Multiple search landmarks with no labels.
• Search landmark wrapping just the input but not the submit button. Users find the field but the button sits outside the landmark.
• Using role="search" on a generic “find by name” input inside a CRUD page — over-applied; that’s a filter, not site search.

Example

<!-- Preferred (modern HTML) -->
<search>
  <form action="/search">
    <label for="q">Search</label>
    <input id="q" type="search" name="q">
    <button type="submit">Go</button>
  </form>
</search>

<!-- Broader browser support today -->
<form role="search" action="/search">
  <label for="q2">Search</label>
  <input id="q2" type="search" name="q">
  <button type="submit">Go</button>
</form>