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 3:17PM

I'd recommend "Choose" instead, since this will be combined with the first
option.

About it being popular to not label form fields properly these days, that
brings up a whole new topic I think.

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


> 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>
>>> >>> >>> >>
>>>>>>> > >