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

> About it being popular to not label form fields properly these days, that
> brings up a whole new topic I think.
I concur. What happens on popular sites does not always mean it is a
good practice.

--
Ryan E. Benson


On Wed, Oct 31, 2012 at 5:17 PM, Bryan Garaventa
< <EMAIL REMOVED> > wrote:
> 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>
>>>> >>>> >>>> >>>
>>>>>>>>>>> >> >> >
> > >