search

ARIA role of a landmark for the search area on the site.

The same semantics apply to the HTML tag <search>.

        
          
          <form role="search">  <label for="search-field">Search the site:</label>  <input    type="search"    id="search-field"    name="search"    placeholder="For example, the meaning of life"  >  <input type="submit" value="Search"></form>
          <form role="search">
  <label for="search-field">Search the site:</label>
  <input
    type="search"
    id="search-field"
    name="search"
    placeholder="For example, the meaning of life"
  >
  <input type="submit" value="Search">
</form>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Screen reader will not announce the role of the area, but the user can quickly navigate to it using keyboard shortcuts.

Add role="search" to the tag. This can be a <div>, <span> or <form>. So far, the similarly named <search> element does not have stable support from screen readers (although browsers are fine with the tag), so specify an explicit role just in case as in this example:

        
          
          <search role="search">  <!-- Search field and other search elements --></search>
          <search role="search">
  <!-- Search field and other search elements -->
</search>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Inside an element with the search role, there may be not only a search field <input type="search">, but also related filters and links. For example, checkboxes for selecting product types or colors, links to search instructions, a dropdown list of words for autocomplete of the search field, or hints.

        
          
          <form role="search">  <label for="search-field">Search the site:</label>  <input    type="search"    id="search-field"    name="search"    aria-describedby="hint"    placeholder="For example, the meaning of life"  >  <span id="hint">    Supports Russian, Korean, Latin, and Pashto.  </span>  <a href="#">Search tips</a>  <fieldset>    <legend>Product type:</legend>    <label for="crowns">Crowns</label>    <input type="checkbox" id="crowns">    <label for="cloaks">Cloaks</label>    <input type="checkbox" id="cloaks">    <label for="scepters">Scepters</label>    <input type="checkbox" id="scepters">  </fieldset>  <input type="submit" value="Search"></form>
          <form role="search">
  <label for="search-field">Search the site:</label>
  <input
    type="search"
    id="search-field"
    name="search"
    aria-describedby="hint"
    placeholder="For example, the meaning of life"
  >
  <span id="hint">
    Supports Russian, Korean, Latin, and Pashto.
  </span>
  <a href="#">Search tips</a>
  <fieldset>
    <legend>Product type:</legend>
    <label for="crowns">Crowns</label>
    <input type="checkbox" id="crowns">

    <label for="cloaks">Cloaks</label>
    <input type="checkbox" id="cloaks">

    <label for="scepters">Scepters</label>
    <input type="checkbox" id="scepters">
  </fieldset>
  <input type="submit" value="Search">
</form>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The search role is compatible with all global ARIA attributes, but most often the following will be useful:

• aria-label, if there is no visible label for the search area;
• aria-labelledby, when the search area has a visible label;
• aria-describedby for hints;
• aria-errormessage for describing errors after form submission.

Fully labeling the search area is useful when the site has a global search and search for a specific page. Users will find the necessary element faster in the list of all landmarks thanks to such labeling.

Example with a label right in the aria-label attribute:

        
          
          <form  role="search"  aria-label="Search the site">  <!-- Search elements --></form>
          <form
  role="search"
  aria-label="Search the site"
>
  <!-- Search elements -->
</form>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Example with a label through aria-labelledby.

        
          
          <h4 id="form-label">Search the site</h4><form  role="search"  aria-labelledby="form-label">  <!-- Search elements --></form>
          <h4 id="form-label">Search the site</h4>
<form
  role="search"
  aria-labelledby="form-label"
>
  <!-- Search elements -->
</form>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The search role creates a search landmark on the page. This means that users of screen readers can quickly navigate to this part of the page using keyboard shortcuts or through the landmarks menu.