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

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>
>>>>>>
>>>>>>>>>>>>>>>>>>messages to <EMAIL REMOVED>
>>>>> >>>>> >>>>> >>>>
>>>>>>>>>>>>>>> >>> >>> >>
>>>>>>> > >