ARIA: searchbox role

The searchbox can be used instead of textbox when the text box is within an element with role search. A searchbox is the semantic equivalent is HTML's <input> of type search, <input type="search">, which should be used instead if possible.

The searchbox must have an accessible name. If the searchbox role is applied to an HTML <input> element, an associated <label> should be used. Otherwise, use aria-labelledby if a visible label is present, or aria-label if a visible label is not present.

The screen reader will announce "search box", "search edit", or "search field" plus the accessible name. This can be redundant if "search" is included in the label.

<div tabindex="0" aria-label="search" role="searchbox" contenteditable></div>

While the above is valid, it is simpler, more concise, and less redundant to the screen reader user to write:

<input type="search" />

The following is a search form with a searchbox and button, ARIA live region, and container for search results.

<form role="search">
  <input
    type="search"
    role="searchbox"
    aria-description="search results will appear below"
    id="search"
    value="" />
  <label for="search">Search this site</label>
  <button>Submit search</button>
</form>
<div aria-live="polite" role="region" aria-atomic="true">
  <div class="sr-only"></div>
</div>
<div id="search-results"></div>

Including role="searchbox" when the form is a search and the label indicates the element is a search may result in assistive technology announcing something along the lines of "search search this site search box", which is redundant. The inclusion of role="searchbox" is not necessary:

<input
  type="search"
  aria-description="search results will appear below"
  id="search"
  value="" />

• <input type="search">
• ARIA: search role
• ARIA: textbox role