WebAIM - Web Accessibility In Mind

E-mail List Archives

form select dropdown - label, title or aria?

for

From: Diane.Tomlins@hcahealthcare.com
Date: Sep 8, 2015 1:49PM

I have a form that I'm working on to make it more accessible and it has a select box on it like this:

<select class="form-control" name="quality_reporting_facility" id="quality_reporting_facility" aria-labelledby="Please Choose a Facility">
Example of the form is here: http://regionalhospital-hut.ehctest.com/about/quality-safety/

We don't want a separate visible label that repeats the same as what's there for the default option value - Please Choose a Facility or Please Choose a Category

Digging around, I find that I can use the title attribute, aria-label, or aria-labelledby.

Which is better, or does it really matter? The WAVE tool complains there is no <label>, but doesn't recognize either the aria-label nor the aria-labelledby when I add one or the other, although the both are noted as acceptable in the additional information.

I know I could also add the label and pull it off-screen with css, but I'd rather avoid that if possible.

Thanks!