Description
Example
HTML Example
<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
<div role="search">
<input role="searchbox" type="text">
<button role="button">Search</button>
</div>
Characteristics
- textbox
Base Concept
- HTML input[type=”search”]
Inherited States and Properties
- aria-activedescendant
- aria-atomic
- aria-autocomplete
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-multiline
- aria-owns
- aria-placeholder
- aria-readonly
- aria-relevant
- aria-required
- aria-roledescription
Name From
- author
Accessible Name Required
- True
Semantic HTML
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.