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:52PM

That's the problem I have with it. It is too fragile and
unpredictable IMHO. I've seen too many people add titles, assuming
that a screen reader would read them, but often screen readers do not.
This is generally because there is some other label, that is
ambiguous, that causes it not to be read.

Still, you're probably right, and for the sake of compatibility, she
should probably use both a title and an aria-label.

Aaron

On 9/8/15, Moore,Michael (Accessibility) (HHSC)
< <EMAIL REMOVED> > wrote:
> Aaron,
>
> Which screen readers do not support the title in form fields when there is
> not another means of determining the accessible label for the item? I
> thought that this was universally supported and provided more backwards
> compatibility than aria-label.
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission
> Civil Rights Office
> (512) 438-3431 (Office)
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Aaron Cannon
> Sent: Tuesday, September 08, 2015 3:17 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] form select dropdown - label, title or aria?
>
> 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!
>>
>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > http://webaim.org/discussion/archives
> > > > > >