Search Bar

On many websites, search bars or search inputs serve as a way to find results for something on a very large or complex site. They are often used in lieu of extensive navigation as the user attempts to find a quick answer to a very specific query.

Search bars can be a way for users of assistive technology to quickly find answers without tabbing through the navigation or reading all the content of a web page. Making a skip link to your site’s search bar may even be advisable if that is a way you can simplify the experience of accessible users.

Best Practices

  • Refer to the forms and form validation section to get the best practices for form, label, and input elements.
  • A search bar should be set up in a form as paired label and input.

  • Using a submit button to search decreases the number of keystrokes necessary to use the form.

  • Always include an ARIA role='search' somewhere on the form or fieldset.

  • Also, always include the word ‘search’ in the label somewhere (you can visually hide it, though) and in the submit button.

  • For the search input, you could technically use the type='search', but the following accessible websites use type='text' instead:

    • Perkins School for the Blind
    • Freedom Scientific
    • Simply Accessible
1
2
3
4
5
6
7
8
9
10
11
<form role='search' action="/" method="get">
  <label for='header-search'>
    <span class='visually-hidden'>Search</span>
  </label>

  <input type='text' id='header-search'/>

  <button type='submit'>
    <span class='visually-hidden'>Submit Search</span>
  </button>
</form>

Tools & Resources

See Live Examples of Accessible Search Bars: