Overview
The search role serves to designate the search feature, representing the specific area on a page designated for exploring content across your site or platform.
Semantic Markup
- Provide a clear label
- A search field must include a search button
- Provide a form id, specificing the search area, e.g. <form id="site-search"> or <form id="page-search">
- Further clarify search area inside an aria label, e.g. aria-label="Search sidewide" or aria-label="Search page only"
- Use role="search" for <form>
- Use type="search" for the <input>
WAI-ARIA
- Aria-labels should be used when there is no visible text on the page that can be used to describe the purpose of the element. This can be especially useful for elements that are interactive, such as buttons, links, and form elements, as well as for images that convey meaning but have no alternative text.
- .sr-only class is used to hide an element visually, but keep it accessible to screen readers. It is commonly used to hide elements such as form labels or instructions that are required for a11y, but are not necessary for sighted users.
- clarify search area inside an aria label, e.g. aria-label="Search sidewide" or aria-label="Search page only"
Keyboard Interactions
|
tab |
Focus moves to the search field |
|
enter |
Search button is activated |
|
space |
Search is activated |