WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: form labels vs label in first option tag?

for

From: Bryan Garaventa
Date: Oct 31, 2012 2:58PM

If the form field doesn't have an explicit label, the screen reader may try
to use the nearest text instead, which isn't reliable because it may not be
the intended label for the field, such as if the select is within a data
table. This is why all form fields should have explicit labels as a general
practice.

Instead, either of the following will work reliably:

<select title="Label Text">

<label for="sel"> Label Text </label>
<select id="sel">

Or aria-label or aria-labelledby can be used to simulate the same behavior.



----- Original Message -----
From: "Angela French" < <EMAIL REMOVED> >
To: "'WebAIM Discussion List'" < <EMAIL REMOVED> >
Sent: Wednesday, October 31, 2012 1:42 PM
Subject: Re: [WebAIM] form labels vs label in first option tag?


> Paul,
> So what happens when coded as below? Does this method cause any confusion
> or slow a screen reader user down?
>
> <select>
> <option value="car choice">Car choice</li>
> <option value="volvo">Volvo</option>
> <option value="saab">Saab</option>
> <option value="opel">Opel</option>
> <option value="audi">Audi</option>
> </select>
>
> Angela French
>
>>Subject: Re: [WebAIM] form labels vs label in first option tag?
>>
>>I always recommend an explicit label for every single form field. That's
>>pretty
>>easy to remember and it's bulletproof.
>>
>>VoiceOver will guess the label if you don't specifically set one.
>>
>><!DOCTYPE html>
>><html>
>><body>
>>blah
>><select>
>> <option value="volvo">Volvo</option>
>> <option value="saab">Saab</option>
>> <option value="opel">Opel</option>
>> <option value="audi">Audi</option>
>></select>
>>
>></body>
>></html>
>>Here VO guesses that the label is "blah".
>>
>><!DOCTYPE html>
>><html>
>><body>
>>blah
>><label for=sel>Car Choice</label>
>><select id=sel>
>> <option value="volvo">Volvo</option>
>> <option value="saab">Saab</option>
>> <option value="opel">Opel</option>
>> <option value="audi">Audi</option>
>></select>
>>
>></body>
>></html>
>>Here there is no guess. Label is Car Choice.
>>
>><!DOCTYPE html>
>><html>
>><body>
>>blah
>><select aria-label="Car Choice">
>> <option value="volvo">Volvo</option>
>> <option value="saab">Saab</option>
>> <option value="opel">Opel</option>
>> <option value="audi">Audi</option>
>></select>
>>
>></body>
>></html>
>>aria-label also prevents guessing in VO
>>
>><!DOCTYPE html>
>><html>
>><body>
>>blah
>><select title="Car Choice">
>> <option value="volvo">Volvo</option>
>> <option value="saab">Saab</option>
>> <option value="opel">Opel</option>
>> <option value="audi">Audi</option>
>></select>
>>
>></body>
>></html>
>>Title kind of works but there is a ~7 second "Help Tag" (OS X) or ~3
>>second
>>"Hint" (iOS) delay before spoken by VO. User can manually speak Help Tag
>>on
>>OS X with VO+SHIFT+H. Problem with this example with the title attribute
>>is
>>that VO still guesses that "blah" is the label.
>>
>>The guessing behavior is different in JAWS. Thankfully, NVDA never guesses
>>which is why it's the best for accessibility testing!
>>
>>Paul J. Adam
>>Accessibility Evangelist
>>Deque Systems
>> <EMAIL REMOVED>
>>www.PaulJAdam.com
>>@pauljadam on Twitter
>>
>>On Oct 31, 2012, at 1:47 PM, Angela French < <EMAIL REMOVED> > wrote:
>>
>>> Hello,
>>> I would be interested in hearing various opinions regarding the
>>> accessibility
>>of using the label tag to identify form elements versus using an
>>identifier as
>>the first option in a select list.
>>>
>>> Thank you for your considered opinions.
>>>
>>> Angela French
>>> Internet Specialist
>>> State Board for Community and Technical Colleges
>>> 360-704-4316
>>> <EMAIL REMOVED>
>>> http://www.checkoutacollege.com/
>>>
>>> >>> >>> list messages to <EMAIL REMOVED>
>>
>>>>>>messages to <EMAIL REMOVED>
> > >