WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: form labels vs label in first option tag?

for

From: Ryan E. Benson
Date: Oct 31, 2012 3:13PM

Are you saying?
<select aria-label="Car Choice">
<option value="car choice">Car Choice</option>
</select>
?
This will announce car choice twice.

--
Ryan E. Benson


On Wed, Oct 31, 2012 at 5:04 PM, Angela French < <EMAIL REMOVED> > wrote:
> 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>
>>> >>> >>> >>
>>>>>>> > >