<label for="siteSearch">Site search</label>
<input type="text" role="searchbox" id="siteSearch" placeholder="type something, nor nothing, or whatever">
<input type="submit" value="Find it">
HTML Example 2
<input role="searchbox" type="text">
- HTML input[type=”search”]
Inherited States and Properties
- aria-busy (state)
- aria-current (state)
- aria-disabled (state)
- aria-grabbed (state)
- aria-hidden (state)
- aria-invalid (state)
Accessible Name Required
No HTML element equivalent.
The role “searchbox” was added to represent the same element type as an HTML input element that includes type=”search”.
The use of role=”searchbox” must be the only focusable element. This differs from role=”search”, which is meant to be a landmark that includes focusable active elements.
When role=”searchbox” is used, focus must be set to the role=”searchbox” element and the content of that element must then be directly editable. Since role=”searchbox” is a form field in the same manner as role=”textbox”, it must include an explicit label using either aria-labelledby or aria-label.