WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: form labels vs label in first option tag?

for

From: Angela French
Date: Oct 31, 2012 3:04PM

If aria-label is used for AT devices and <option value="car choice">Car Choice</option> is used for sighted users (instead of an explicit label), does the <option value="car choice">Car Choice</option> create any frustration or slow down for the AT user? I'm assuming they hear "car choice" twice.

I am asking these questions in the context of using the Bootstrap responsive design framework. This use of <option value="car choice">Car Choice</option> seems to be a popular way of designing forms these days.

Angela French



>Subject: Re: [WebAIM] form labels vs label in first option tag?
>
>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>
>> >> >> >
>>>