search

alphagov / tech-docs-gem

Gem to distribute the tech docs project
https://tdt-documentation.london.cloudapps.digital/
MIT License
15 stars 38 forks source link

Remove aria-hidden from search label #353

Open tombye opened 1 week ago

tombye commented 1 week ago

Hiding it with aria-hidden removes it from the accessibilty tree, which also stops it labelling the input textbox.

It also already has styles to hide it visually so doesn't need it for that.

What’s changed

Removed aria-hidden from the search label to prevent it being hidden from accessibility APIs, and so stopped from labelling the sibling textbox.

I also changed the search texbox to type=search because it is and because we do that on www.gov.uk. I think type=search wasn't supported widely enough[^1] when these docs were created to be used originally but that's not the case now.

Accessibility tree (in Chrome devtools) Before

search_label_before

Accessibility tree (in Chrome devtools) After

search_label_after

Identifying a user need

The use of aria-hidden here currently prevents the search textbox having an accessible name. For users of screen readers, that means it isn't announced when the textbox is in focus.

This was identified by running the WAVE accessibility checker on the tdt-documentation app (which uses this gem).

Notes for reviewers

I'm not sure what to add to the CHANGELOG because it already has unreleased changes. Happy to do whatever is advised.

[^1]: We used to support IE9, which didn't support it: https://caniuse.com/input-search