WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Form labels when the field is labeled by another field

for

From: Patrick H. Lauke
Date: Oct 23, 2017 10:33AM

On 23/10/2017 17:19, Jeremy Echols wrote:
> If you visit the UO library page (https://library.uoregon.edu/), in the "LibrarySearch" area we have a field (dropdown including "Keyword", "Title", "Author", and "Subject") which is essentially acting as a label for the search text input. We've put hidden labels in so that we aren't violating WCAG, but I'm wondering if there is a better approach.
>
> We browsed a few sites which do something similar in terms of having a dropdown that acts as a label, but it seemed like in those cases the site author simply opted not to have a label at all (no "label" element, no title, no aria-label, etc.). I feel like there would be enough context if we just fixed our tab order (a different problem entirely), but I'm not sure if that satisfies WCAG 2.0 3.3.2 ("Labels or instructions are provided when content requires user input").
>
> Barring that, we could also set aria-labelledby to point to the dropdown element, which seems like it works in NVDA and Firefox. But I'm not sure if that approach is just going to make the form worse, having a field which gets relabeled. Is that helpful or just confusing?

Conceptually, what you have there are three fields:

- search for
- search term
- search in

As long as their labels (visible, hidden, aria-label, etc) reflect this,
I'd say that's the bare minimum needed to understand and operate the search.

You *could* dynamically change the label (not sure if your proposed
approach of pointing aria-labelledby to the <select> works in all
browser/AT combos, but my alternative gut feeling idea would be using
aria-label and rewriting its content with JS whenever the first dropdown
changes (so instead of "search for..." it could be changed to "author
name" when "Author" was selected), but you're right this may well end up
being more confusing than anything else to users (as the form will
appear to "morph" and change). I'd say keep it simple, to be honest.

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