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, andinputelements. A search bar should be set up in a
formas pairedlabelandinput.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 usetype='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> |