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 4:18PM

The text field example I found was a poor one. I need to find a select list.

>-----Original Message-----
>From: <EMAIL REMOVED> [mailto:webaim-forum-
> <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
>Sent: Wednesday, October 31, 2012 3:13 PM
>To: WebAIM Discussion List
>Subject: Re: [WebAIM] form labels vs label in first option tag?
>
>It's not reliable to depend on the value of a text field to act as it's label,
>especially when 'focus' is used to clear the field in preparation for typing.
>
> NVDA for example automatically triggers the 'focus' handler for any element
>it comes across when arrowing down the page.
>
>----- Original Message -----
>From: "Ryan E. Benson" < <EMAIL REMOVED> >
>To: "WebAIM Discussion List" < <EMAIL REMOVED> >
>Sent: Wednesday, October 31, 2012 2:57 PM
>Subject: Re: [WebAIM] form labels vs label in first option tag?
>
>
>> Since they put a predefined value in the textbox, it will be announced
>> as if the person typed that into the field. If the field cleared as
>> you tabbed into it, like it does when you click into it, it would not
>> be read. However - I think JAWS emulates a click as you tab in, or it
>> does at times.
>> --
>> Ryan E. Benson
>>
>>
>> On Wed, Oct 31, 2012 at 5:32 PM, Angela French < <EMAIL REMOVED> >
>wrote:
>>> "Choose" without a label doesn't allow the sighted user to know the
>>> nature of what they are choosing.
>>> Here is a similar example on amazon.com, though with a text field search
>>> box:
>>> http://www.amazon.com/New-Used-Textbooks-
>Books/b/ref=sv_b_6?ie=UTF8&nodeF5600 .
>>> How does a screen reader user know what is supposed to be entered into
>>> the text field before entering the field?
>>>
>>> Angela French
>>>
>>>
>>>
>>>>-----Original Message-----
>>>>From: <EMAIL REMOVED> [mailto:webaim-forum-
>>>> <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
>>>>Sent: Wednesday, October 31, 2012 2:18 PM
>>>>To: WebAIM Discussion List
>>>>Subject: Re: [WebAIM] form labels vs label in first option tag?
>>>>
>>>>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>
>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>list
>>>>>>>>messages to <EMAIL REMOVED>
>>>>>>> >>>>>>> >>>>>>> >>>>>>
>>>>>>>>>>>>>>>>>>>>>>> >>>>> >>>>> >>>>
>>>>>>>>>>>>>>> >>> >>> >> >> >> >
>>>