WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Search fields hidden behind button

for

From: Patrick H. Lauke
Date: Nov 17, 2019 5:06PM

On 18/11/2019 00:02, K Barcham wrote:
> I've been asked to feedback on a site prototype with a search that makes me
> wary.
> The designer has 'hidden' the search input field behind the search button
> (a magnifying glass icon/button).
> In order to search, the user has to click on the magnifying glass before
> the search field appears as the form field and magnifying glass button.
> This doesn't feel like good usability but I'm also wondering if there are
> any obvious accessibility issues doing it this way.

As long as this is implemented in a reasonable way - the magnifying
button acts as a disclosure widget (with aria-expanded="..." to reflect
its state), or even as a simple button control with a clear label (e.g.
"Search" or "Open search" or similar would likely do it) that, when
activated, sets focus directly to the search text input - it should be
ok. Of course, there are many ways in which this can be messed up :)

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke