Pattern: Search Box
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.
<label for="nyu-search-input" class="sr-only">Enter search term</label>
<input type="text" id="nyu-search-input">
<img src="path/to/magifier.svg" alt="search">
- 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.”