Skip to content

Accessibility improvements to search box

Amy Qualls requested to merge docs-aqualls-patch-search-aria into main

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:

  1. Declare role="search" as that's a common and known landmark; let's improve accessibility for users who navigate with landmarks
  2. Declare that the search box has an autocomplete function, so screenreader users know what to expect from the field
  3. 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

Merge request reports