Search is a popular way for users to quickly find content within the site. The search region should take the search ARIA role, its input must have a label (even if visually hidden) and the input should have a focus style so sighted keyboard users can see clearly when it is ready to be typed into.

The code

<div role="search">
<form>
<label for="nyu-search-input" class="sr-only">Enter search term</label>
<input type="text" id="nyu-search-input">
<button type="submit">
<img src="path/to/magifier.svg" alt="search">
</button>
</form>
</div>

Notes

  • The input is labeled by the <label> because the for and id attributes share a value. This means “enter search term” is read out to screen reader users when the input is focused.
  • role="search" means the region can be moved to directly using screen reader navigation menus.
  • The <form> wrapper is provided so that the search term is submitted on Enter as well as by clicking the button.
  • The magnifier icon is provided using an image. The alt text of “search” becomes the button’s accessible label. When a screen reader user focuses it, they will hear “search button.”