Accessibility improvements to search box
Our header has an accessibility error centered around the search box - because it's an autocomplete box, we chose to hide the submit
button, and gave the button no aria
value. I've been puzzling over the best way to explain the function of the box and declare the button. The initial solution I've come up with involves three changes:
- Declare
role="search"
as that's a common and known landmark; let's improve accessibility for users who navigate with landmarks - Declare that the search box has an autocomplete function, so screenreader users know what to expect from the field
- Declare a name for the hidden search submit button so screenreaders don't skip it entirely.
I'm not certain my approach is right, but I'm hoping to start a conversation with this merge request. cc @marcel.amirault @jeldergl