WebAIM - Web Accessibility In Mind

E-mail List Archives

Form labels when the field is labeled by another field

for

From: Jeremy Echols
Date: Oct 23, 2017 10:19AM

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?