1

Consider the Amazon search bar: it has a drop-down at the beginning that lets you select which department to search in, then the search input, and then the search submit button.

Screenshot of Amazon search bar

I'd like to have a similar search interface, but have it display in a modal that opens up when the user clicks a search button. For most people - interacting visually with the site - throwing focus on the input when search opens will be the best UX. The subset who want to select a result category other than "all" can click or shift-tab to it.

However, we can't use that approach if it means screenreader users won't know the select even exists. Is there a way to let the screenreader user know the select drop-down is there when the focus is set on the input, later in the HTML?

The closest I have come to a solution is to use an aria-describedby attribute on the input, pointing at visually-hidden text describing the select and its relationship to the input, but my attempts at that text are clunky and long and not very clear.

Browse other questions tagged or ask your own question.