Did you see any website without search form field? Almost every website usually has this search form field. The purpose of having this search form field on the website is to search as per user need and navigate to the respective sections quickly instead of browsing the entire website. Imagine, this search form field is not constructed with html input type search and is constructed with the custom controls then this search form control might not be accessible to assistive technology users. if this search form control cannot be constructed with html input type search for some reason then we are left with the option of using new aria1.1 searchbox role to make this custom control accessible.
Aria1.1 Searchbox role can be used for the type of textbox intended for specifying search criteria . When searchbox role is applied to container then screen readers are expected to announce as “search edit type and text” or something like that. Search role and searchbox role are different from each other and they are not identical/same. To be precise, The role=”searchbox” must be provided for focusable element whereas role=”search” is the landmark that includes focusable active elements. On the similar lines, textbox role and searchbox role are different from each other and they are not same/identical. Searchbox role is equivalent of the html <input type=”search” element.
Author notes
- Author must set the accessible name when searchbox role is used
Code snippet
<div id=’test’ role=’searchbox’ contenteditable=’true’></div>
References
I don’t understand it’s purpose Please explain
Hello Peter, to make it simpler, if you want to make custom searchbox accessible then one needs to use this role to convey the semantics to the AT users. as explained in the post, it is equivalent of html5 input type search. please let me know if you still need further clarification. Thank you.