WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: WCAG2: Form fields and labels

for

From: Birkir R. Gunnarsson
Date: Feb 5, 2015 6:30AM

Hi

My understanding has always been that "programatically" means there is
explicit connection between a label and a form field, put in by the
author, giving the assistive technology no chance of guessing the
appropriate piece of text label for a form control.
Sure, most assistive technologies are smart , and they can often guess
the label text correctly, but also I have seen them fail miserably,
and they should not have to fail.

There are sevral ways of doing this.
Explicit labeling (label tag with a for attribute pointing to ID of
associated form control) and implicit labeling (label tag wrapped
around the form control and labeling text) are preferred because they
create the extra clickable area for the mouse user.
aria-labelledby does not create the larger clickable area.
aria-label and title are least preferred, because they are text
strings invisible to sighted keyboard only users. But sometimes they
are appropriate, or at least acceptable, when visually there is a
clear association, either through image or positioning (think specific
aria labels for 3 parts of a phone number, visually the text "phone
number" spans all 3 parts), also when the page uses tables for layout.
I really like this article by my colleague (and mentor) Dailesh
comparing different ways of labeling form fields
http://www.deque.com/blog/techniques-labeling-standard-html-form-controls/
Cheers
-B

On 2/5/15, Lynn Holdsworth < <EMAIL REMOVED> > wrote:
> Thanks both. I think I will fail it under 4.1.2 as well as 1.3.1 and 4.1.1.
>
> What exactly does WCAG mean by "programmatically"? I always assumed
> that it meant that a browser's accessibility layer could pick up, for
> example, this field/label association, so that AT wouldn't need to use
> heuristics to guess from positioning or other factors. But I discussed
> this with a more knowledgeable friend yesterday, who felt that
> positioning in this scenario would have been a sufficient technique.
> But if this form field had been a checkbox, surely the extra click
> area offered by explicitly associating the field and label would be a
> huge boon for people who struggle with fine motor control?
>
> Am I going off on a tangent here? Should I put this in a post with a
> more appropriate subject line?
>
> Thanks, Lynn
>
> On 05/02/2015, Birkir R. Gunnarsson < <EMAIL REMOVED> > wrote:
>> I have always called those under 1.3.1 .. 4.1.1 is also technically
>> valid I think, it wouldn't validate, but 1.3.1 is more specific re the
>> authors intension.
>> And, yes, either you type correct ID or not, trying to type the
>> correct ID .. well, hope he fixes it without any grief.
>>
>> On 2/5/15, Patrick H. Lauke < <EMAIL REMOVED> > wrote:
>>> On 05/02/2015 11:24, Lynn Holdsworth wrote:
>>>> Hi all,
>>>>
>>>> If a page contains a form field with a label that the developer has
>>>> attempted to associate but has typed the field's ID incorrectly inside
>>>> the FOR attribute, hence the association doesn't work, can I fail this
>>>> under checkpoint 4.1.2 (name, role, value)?
>>>
>>> Yes...regardless of good intention (maybe just a typo?), the end effect
>>> is that the label is not associated correctly, so the form field lacks a
>>> programmatically associated name.
>>>
>>> "Do, or do not. There is no try" or something...
>>>
>>> P
>>> --
>>> Patrick H. Lauke
>>>
>>> www.splintered.co.uk | https://github.com/patrickhlauke
>>> http://flickr.com/photos/redux/ | http://redux.deviantart.com
>>> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>>> >>> >>> >>>
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> >>
> > > >


--
Work hard. Have fun. Make history.