WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: form select dropdown - label, title or aria?

for

From: Aaron Cannon
Date: Sep 8, 2015 2:16PM

Forget the title, at least for screen reader users. Many screen
readers will ignore it in certain circumstances. If you use
aria-labelledby, you will need to give it an ID of an HTML element
that contains the label of the field. At that point, you might as
well just use a label.

If you're absolutely certain you don't want to move the label off
screen, then you're only real option is to use an aria-label
attribute.

Aaron

On 9/8/15, <EMAIL REMOVED>
< <EMAIL REMOVED> > wrote:
> 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!
>
>
> > > > >