WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: WCAG2: Form fields and labels

for

Number of posts in this thread: 11 (In chronological order)

From: Lynn Holdsworth
Date: Thu, Feb 05 2015 4:24AM
Subject: WCAG2: Form fields and labels
No previous message | Next message →

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

Thanks, Lynn

From: Patrick H. Lauke
Date: Thu, Feb 05 2015 4:31AM
Subject: Re: WCAG2: Form fields and labels
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Thu, Feb 05 2015 5:45AM
Subject: Re: WCAG2: Form fields and labels
← Previous message | Next message →

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

From: Lynn Holdsworth
Date: Thu, Feb 05 2015 6:19AM
Subject: Re: WCAG2: Form fields and labels
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Thu, Feb 05 2015 6:30AM
Subject: Re: WCAG2: Form fields and labels
← Previous message | Next message →

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

From: Patrick H. Lauke
Date: Thu, Feb 05 2015 6:41AM
Subject: Re: WCAG2: Form fields and labels
← Previous message | Next message →

On 05/02/2015 13:19, Lynn Holdsworth wrote:

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

I would disagree with your friend here. Programmatically to me means "is
exposed correctly in the accessibility API by the browser", which
generally means "no AT-specific heuristics". In fact, if you rely purely
on AT heuristics, you're going to have a bad time...as heuristics can
and will differ between different ATs (and even different
versions/combinations of browser/OS of the same AT).

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

From: Andrew Kirkpatrick
Date: Thu, Feb 05 2015 7:26AM
Subject: Re: WCAG2: Form fields and labels
← Previous message | Next message →

Thanks both. I think I will fail it under 4.1.2 as well as 1.3.1 and 4.1.1.

I disagree that this would fail 4.1.1. The content can be parsed correctly as written, it is just that there is an error in what is written.
AWK

From: Birkir R. Gunnarsson
Date: Thu, Feb 05 2015 7:38AM
Subject: Re: WCAG2: Form fields and labels
← Previous message | Next message →

Greetings

Andrew, quick question on 4.1.1
I thought it could possibly fail 4.1.1 because the label tag
references a non-existent ID attribute (assuming the typo is such as
the for=ID value of the label tag points to an ID that does not exist
on the page).


On 2/5/15, Andrew Kirkpatrick < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks both. I think I will fail it under 4.1.2 as well as 1.3.1 and 4.1.1.
>
> I disagree that this would fail 4.1.1. The content can be parsed correctly
> as written, it is just that there is an error in what is written.
> AWK
> > > >


--
Work hard. Have fun. Make history.

From: Birkir R. Gunnarsson
Date: Thu, Feb 05 2015 7:41AM
Subject: Re: WCAG2: Form fields and labels
← Previous message | Next message →

Sorry, clicked "send" by mistake.
When I run this construct through a validator
https://html5.validator.nu/
I get the error
"Error: The for attribute of the label element must refer to a form control."
I have really not used 4.1.1 much, so I absolutely agree, I would call
this under 1.3.1, but I thought that 4.1.1 could be used if the html
fails validation, but I culd very easily be wrong on that point.
The spec admittedly says:
"Parsing: In content implemented using markup languages, elements have
complete start and end tags, elements are nested according to their
specifications, elements do not contain duplicate attributes, and any
IDs are unique, except where the specifications allow these features.
(Level A) "
So while multiple IDs are clearly 4.1.1 violations, missing IDs are
not mentioned.
Thanks
-Birkir


On 2/5/15, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> Greetings
>
> Andrew, quick question on 4.1.1
> I thought it could possibly fail 4.1.1 because the label tag
> references a non-existent ID attribute (assuming the typo is such as
> the for=ID value of the label tag points to an ID that does not exist
> on the page).
>
>
> On 2/5/15, Andrew Kirkpatrick < = EMAIL ADDRESS REMOVED = > wrote:
>> Thanks both. I think I will fail it under 4.1.2 as well as 1.3.1 and
>> 4.1.1.
>>
>> I disagree that this would fail 4.1.1. The content can be parsed
>> correctly
>> as written, it is just that there is an error in what is written.
>> AWK
>> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
>


--
Work hard. Have fun. Make history.

From: Lynn Holdsworth
Date: Thu, Feb 05 2015 9:53AM
Subject: Re: WCAG2: Form fields and labels
← Previous message | Next message →

Thanks everyone. I find these discussions invaluable.

On 05/02/2015, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> Sorry, clicked "send" by mistake.
> When I run this construct through a validator
> https://html5.validator.nu/
> I get the error
> "Error: The for attribute of the label element must refer to a form
> control."
> I have really not used 4.1.1 much, so I absolutely agree, I would call
> this under 1.3.1, but I thought that 4.1.1 could be used if the html
> fails validation, but I culd very easily be wrong on that point.
> The spec admittedly says:
> "Parsing: In content implemented using markup languages, elements have
> complete start and end tags, elements are nested according to their
> specifications, elements do not contain duplicate attributes, and any
> IDs are unique, except where the specifications allow these features.
> (Level A) "
> So while multiple IDs are clearly 4.1.1 violations, missing IDs are
> not mentioned.
> Thanks
> -Birkir
>
>
> On 2/5/15, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
>> Greetings
>>
>> Andrew, quick question on 4.1.1
>> I thought it could possibly fail 4.1.1 because the label tag
>> references a non-existent ID attribute (assuming the typo is such as
>> the for=ID value of the label tag points to an ID that does not exist
>> on the page).
>>
>>
>> On 2/5/15, Andrew Kirkpatrick < = EMAIL ADDRESS REMOVED = > wrote:
>>> Thanks both. I think I will fail it under 4.1.2 as well as 1.3.1 and
>>> 4.1.1.
>>>
>>> I disagree that this would fail 4.1.1. The content can be parsed
>>> correctly
>>> as written, it is just that there is an error in what is written.
>>> AWK
>>> >>> >>> >>>
>>
>>
>> --
>> Work hard. Have fun. Make history.
>>
>
>
> --
> Work hard. Have fun. Make history.
> > > >

From: Katie Haritos-Shea GMAIL
Date: Fri, Feb 06 2015 8:33AM
Subject: Re: WCAG2: Form fields and labels
← Previous message | No next message

Birkir,

I do agree with you on 4.1.1, and it is under what I call Broken Couplings,
if in fact it fails validation. I would also call out 1.3.1 and 4.1.2.



* katie *
 
Katie Haritos-Shea
Senior Accessibility SME (WCAG/Section 508/ADA/AODA)
 
Cell: 703-371-5545 | = EMAIL ADDRESS REMOVED = | Oakton, VA | LinkedIn Profile |
Office: 703-371-5545

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R.
Gunnarsson
Sent: Thursday, February 5, 2015 9:42 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] WCAG2: Form fields and labels

Sorry, clicked "send" by mistake.
When I run this construct through a validator https://html5.validator.nu/ I
get the error
"Error: The for attribute of the label element must refer to a form
control."
I have really not used 4.1.1 much, so I absolutely agree, I would call this
under 1.3.1, but I thought that 4.1.1 could be used if the html fails
validation, but I culd very easily be wrong on that point.
The spec admittedly says:
"Parsing: In content implemented using markup languages, elements have
complete start and end tags, elements are nested according to their
specifications, elements do not contain duplicate attributes, and any IDs
are unique, except where the specifications allow these features.
(Level A) "
So while multiple IDs are clearly 4.1.1 violations, missing IDs are not
mentioned.
Thanks
-Birkir


On 2/5/15, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> Greetings
>
> Andrew, quick question on 4.1.1
> I thought it could possibly fail 4.1.1 because the label tag
> references a non-existent ID attribute (assuming the typo is such as
> the for=ID value of the label tag points to an ID that does not exist
> on the page).
>
>
> On 2/5/15, Andrew Kirkpatrick < = EMAIL ADDRESS REMOVED = > wrote:
>> Thanks both. I think I will fail it under 4.1.2 as well as 1.3.1 and
>> 4.1.1.
>>
>> I disagree that this would fail 4.1.1. The content can be parsed
>> correctly as written, it is just that there is an error in what is
>> written.
>> AWK
>> >> >> list messages to = EMAIL ADDRESS REMOVED =
>>
>
>
> --
> Work hard. Have fun. Make history.
>


--
Work hard. Have fun. Make history.
messages to = EMAIL ADDRESS REMOVED =