E-mail List Archives
Thread: Unlabelled form field with adjacent button as label?
Number of posts in this thread: 13 (In chronological order)
From: Lynn Holdsworth
Date: Sat, Feb 28 2015 4:19PM
Subject: Unlabelled form field with adjacent button as label?
No previous message | Next message →
Hi all,
http://www.w3.org/TR/WCAG20-TECHS/G167.html
Technique G167 (link above) for WCAG2 success criterion 3.3.2 (labels
or instructions) describes the use of a button to label an adjacent
field.
There's a note that says "The field must also have a programmatically
determined name, per Success Criterion 4.1.2".
Does this mean that the field *does* need a label of some description,
and that the adjacent button doesn't serve as a label by itself unless
it's associated somehow with the field, for example by using the
ARIA-LABELLEDBY attribute?
Thanks as always,
Lynn
From: Jonathan Avila
Date: Sat, Feb 28 2015 5:34PM
Subject: Re: Unlabelled form field with adjacent button as label?
← Previous message | Next message →
> Does this mean that the field *does* need a label of some description, and that the adjacent button doesn't serve as a label by itself unless it's associated somehow
Lynn, my understanding is that you don't have to associate the visual label and the input's accessible name -- that is, you could use a title attribute on the input. The idea here is that you need a visual and a programmatic label for all input -- but there are many ways that could be solved. Using aria-labelledby is certainly semantically best but I don't think required. If you look at the checks they say:
For a field and a button using this technique:
1.Check that the field and button are adjacent to one another in the programmatically determined reading sequence.
2.Check that the field and button are visually rendered adjacent to one another.
The check doesn't required programmatic association other than reading order. In my opinion there should also be a check there to make sure the field has an accessible name.
Also, for what it's worth sufficient techniques are not required for conformance - conformance can be met using other techniques as long as the success criteria is met.
Jonathan
--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lynn Holdsworth
Sent: Saturday, February 28, 2015 6:19 PM
To: WebAIM Discussion List
Subject: [WebAIM] Unlabelled form field with adjacent button as label?
Hi all,
http://www.w3.org/TR/WCAG20-TECHS/G167.html
Technique G167 (link above) for WCAG2 success criterion 3.3.2 (labels or instructions) describes the use of a button to label an adjacent field.
There's a note that says "The field must also have a programmatically determined name, per Success Criterion 4.1.2".
Does this mean that the field *does* need a label of some description, and that the adjacent button doesn't serve as a label by itself unless it's associated somehow with the field, for example by using the ARIA-LABELLEDBY attribute?
Thanks as always,
Lynn
From: Lynn Holdsworth
Date: Sun, Mar 01 2015 9:08AM
Subject: Re: Unlabelled form field with adjacent button as label?
← Previous message | Next message →
Hi Jonathan,
Thanks for the confirmation - I fweared that was the case but hoped
I'd interpreted it incorrectly.
Yes, I understand that sufficient techniques aren't the only way. But
I wish that this particular one didn't exist, as I don't think an
adjacent button should serve as a label by itself.
Thanks again, Lynn
On 01/03/2015, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>> Does this mean that the field *does* need a label of some description, and
>> that the adjacent button doesn't serve as a label by itself unless it's
>> associated somehow
>
>
>
> Lynn, my understanding is that you don't have to associate the visual label
> and the input's accessible name -- that is, you could use a title attribute
> on the input. The idea here is that you need a visual and a programmatic
> label for all input -- but there are many ways that could be solved. Using
> aria-labelledby is certainly semantically best but I don't think required.
> If you look at the checks they say:
>
>
>
> For a field and a button using this technique:
>
> 1.Check that the field and button are adjacent to one another in the
> programmatically determined reading sequence.
>
> 2.Check that the field and button are visually rendered adjacent to one
> another.
>
>
>
> The check doesn't required programmatic association other than reading
> order. In my opinion there should also be a check there to make sure the
> field has an accessible name.
>
>
>
> Also, for what it's worth sufficient techniques are not required for
> conformance - conformance can be met using other techniques as long as the
> success criteria is met.
>
>
>
> Jonathan
>
>
>
>
>
> --
>
> Jonathan Avila
>
> Chief Accessibility Officer
>
> SSB BART Group
>
> = EMAIL ADDRESS REMOVED =
>
>
>
> 703-637-8957 (o)
>
> Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
>
>
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lynn Holdsworth
> Sent: Saturday, February 28, 2015 6:19 PM
> To: WebAIM Discussion List
> Subject: [WebAIM] Unlabelled form field with adjacent button as label?
>
>
>
> Hi all,
>
>
>
> http://www.w3.org/TR/WCAG20-TECHS/G167.html
>
>
>
> Technique G167 (link above) for WCAG2 success criterion 3.3.2 (labels or
> instructions) describes the use of a button to label an adjacent field.
>
>
>
> There's a note that says "The field must also have a programmatically
> determined name, per Success Criterion 4.1.2".
>
>
>
> Does this mean that the field *does* need a label of some description, and
> that the adjacent button doesn't serve as a label by itself unless it's
> associated somehow with the field, for example by using the ARIA-LABELLEDBY
> attribute?
>
>
>
> Thanks as always,
>
>
>
> Lynn
>
> >
> > messages to
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> > > >
From: Steve Faulkner
Date: Sun, Mar 01 2015 1:33PM
Subject: Re: Unlabelled form field with adjacent button as label?
← Previous message | Next message →
On 1 March 2015 at 16:08, Lynn Holdsworth < = EMAIL ADDRESS REMOVED = > wrote:
> Yes, I understand that sufficient techniques aren't the only way. But
> I wish that this particular one didn't exist, as I don't think an
> adjacent button should serve as a label by itself.
>
why?
--
Regards
SteveF
HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>;
From: Patrick H. Lauke
Date: Sun, Mar 01 2015 4:52PM
Subject: Re: Unlabelled form field with adjacent button as label?
← Previous message | Next message →
On 01/03/2015 16:08, Lynn Holdsworth wrote:
> Hi Jonathan,
>
> Thanks for the confirmation - I fweared that was the case but hoped
> I'd interpreted it incorrectly.
>
> Yes, I understand that sufficient techniques aren't the only way. But
> I wish that this particular one didn't exist, as I don't think an
> adjacent button should serve as a label by itself.
It satisfies 3.3.2 - as in, a sighted user will likely understand the
purpose of the text field. *IF* the text field has no explicit name,
though (no visually hidden <label>, no title attribute, no aria-label,
etc), then of course it can still satisfy 3.3.2 but will fail at least
4.1.2 (assuming that your concern here is that the technique would be
seen as being sufficient for all types of users, and provides a
suggested solution that passes all other SCs...which of course it doesn't).
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: Lynn Holdsworth
Date: Wed, Mar 04 2015 4:42AM
Subject: Re: Unlabelled form field with adjacent button as label?
← Previous message | Next message →
Hi Steve,
If I'm ploughing through a large form, or looking for a particular
form element, I'll pull up the JAWS forms list (Insert+F5). If an
element doesn't have a label, JAWS will say "unlabelled 1",
"unlabelled 2" etc. for each consecutive unlabelled field.
Adding ARIA-LABEL or ARIA-LABELLEDBY to the mix fixes this problem in
JAWS 16 (I haven't tested older versions).
I've knocked up a quick set of examples to illustrate this. It's at:
http://behindtheyellowline.org.uk/examples/unlabelled.htm
Example 1 (sufficient technique = unlabelled textbox) and example 4
(using ARIA-DESCRIBEDBY) bring up "unlabelled X" in the JAWS forms
list.
KR, Lynn
On 01/03/2015, Steve Faulkner < = EMAIL ADDRESS REMOVED = > wrote:
> On 1 March 2015 at 16:08, Lynn Holdsworth < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Yes, I understand that sufficient techniques aren't the only way. But
>> I wish that this particular one didn't exist, as I don't think an
>> adjacent button should serve as a label by itself.
>>
>
>
> why?
>
> --
>
> Regards
>
> SteveF
> HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>;
> > > >
From: Patrick H. Lauke
Date: Wed, Mar 04 2015 4:46AM
Subject: Re: Unlabelled form field with adjacent button as label?
← Previous message | Next message →
On 04/03/2015 11:42, Lynn Holdsworth wrote:
> If I'm ploughing through a large form, or looking for a particular
> form element, I'll pull up the JAWS forms list (Insert+F5). If an
> element doesn't have a label, JAWS will say "unlabelled 1",
> "unlabelled 2" etc. for each consecutive unlabelled field.
The success criterion is not aimed at users of assistive technologies,
but at users that can see the screen/page. To them, having the adjacent
button is a sufficient form of labelling.
In general, SCs don't always cover all possible types of
abilities/disabilities.
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: Lynn Holdsworth
Date: Wed, Mar 04 2015 5:12AM
Subject: Re: Unlabelled form field with adjacent button as label?
← Previous message | Next message →
Thanks Patrick.
But isn't it hugely confusing if a success criterion for one
checkpoint fails on others? Presumably this one fails 4.1.2? As a
developer, if I implement this success criterion, aren't I likely to
assume that it passes WCAG2?
Best, Lynn
On 04/03/2015, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
> On 04/03/2015 11:42, Lynn Holdsworth wrote:
>> If I'm ploughing through a large form, or looking for a particular
>> form element, I'll pull up the JAWS forms list (Insert+F5). If an
>> element doesn't have a label, JAWS will say "unlabelled 1",
>> "unlabelled 2" etc. for each consecutive unlabelled field.
>
> The success criterion is not aimed at users of assistive technologies,
> but at users that can see the screen/page. To them, having the adjacent
> button is a sufficient form of labelling.
>
> In general, SCs don't always cover all possible types of
> abilities/disabilities.
>
> 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: Steve Faulkner
Date: Wed, Mar 04 2015 5:15AM
Subject: Re: Unlabelled form field with adjacent button as label?
← Previous message | Next message →
Hi Lynn, I am not questioning the need for an accessible name for a
control, but in limited situations the accessible name does not need to be
provided using a visible <label>.
Note any control that does not have an accessible name fails criteria 4.1.2
Name, Role, Value [1]
The accessible name for a control(exposed via accessibility APIs in
browsers) is calculated from a variety of sources [2], the fallback method
to provide accessible name for a control (if no other sources are provided)
is the title attribute.
[1] http://www.w3.org/TR/WCAG20/#ensure-compat
[2]
http://rawgit.com/w3c/aria/master/html-aam/html-aam.html#accessible-name-and-description-calculation
--
Regards
SteveF
HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>;
On 4 March 2015 at 03:42, Lynn Holdsworth < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Steve,
>
> If I'm ploughing through a large form, or looking for a particular
> form element, I'll pull up the JAWS forms list (Insert+F5). If an
> element doesn't have a label, JAWS will say "unlabelled 1",
> "unlabelled 2" etc. for each consecutive unlabelled field.
>
> Adding ARIA-LABEL or ARIA-LABELLEDBY to the mix fixes this problem in
> JAWS 16 (I haven't tested older versions).
>
> I've knocked up a quick set of examples to illustrate this. It's at:
>
> http://behindtheyellowline.org.uk/examples/unlabelled.htm
>
> Example 1 (sufficient technique = unlabelled textbox) and example 4
> (using ARIA-DESCRIBEDBY) bring up "unlabelled X" in the JAWS forms
> list.
>
> KR, Lynn
>
> On 01/03/2015, Steve Faulkner < = EMAIL ADDRESS REMOVED = > wrote:
> > On 1 March 2015 at 16:08, Lynn Holdsworth < = EMAIL ADDRESS REMOVED = >
> > wrote:
> >
> >> Yes, I understand that sufficient techniques aren't the only way. But
> >> I wish that this particular one didn't exist, as I don't think an
> >> adjacent button should serve as a label by itself.
> >>
> >
> >
> > why?
> >
> > --
> >
> > Regards
> >
> > SteveF
> > HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>;
> > > > > > > >
> > > >
From: Patrick H. Lauke
Date: Wed, Mar 04 2015 5:26AM
Subject: Re: Unlabelled form field with adjacent button as label?
← Previous message | Next message →
On 04/03/2015 12:12, Lynn Holdsworth wrote:
> But isn't it hugely confusing if a success criterion for one
> checkpoint fails on others? Presumably this one fails 4.1.2?
On its own, it would fail 4.1.2. Of course, you'd then also need to look
at making sure your form fields pass 4.1.2, which would lead you down
the path of using a <label> element, aria-label, aria-labelledby, etc.
> As a
> developer, if I implement this success criterion, aren't I likely to
> assume that it passes WCAG2?
You'd assume wrong. Just implementing a technique that is sufficient for
one SC does not mean it satisfies all other SCs.
For instance, imagine if you added a nice visible <label>...but then
styled it so that its color contrast is something like 1.5:1. Yes, you
just satisfied 4.1.2, but now are failing 1.4.3.
To pass WCAG2, you need to ensure all SCs are satisfied. If, as a
developer, you just take one sufficient technique that addresses one SC
and hope that this then automatically also satisfies all other SCs,
you're going to have a bad time in many cases.
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: Wed, Mar 04 2015 5:49AM
Subject: Re: Unlabelled form field with adjacent button as label?
← Previous message | Next message →
Great discussion.
I agree with Lynn in that I find the wording in the technique confusing.
Basically what the technique is saying is that an invisible label,
such as ones provided by aria-label or title (easy to implement, no
layout or design changes required), is sufficient for cases where an
input field is next to a button, visibly and in focus order.
I wish the wording of the technique was clearer on this, and it would
help eliminate any confusion.
I was somewhat confused when reading this myself, and I have dabbled
in accessibility for some time now.
I think a clearer wording would help everybody.
It should say something along the lines of
"in those cases, an invissible accessible name, provided via the
aria-label or title attribute, (see accessible name calculation) is
sufficient for the form field).
Cheers
-B
On 3/4/15, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
> On 04/03/2015 12:12, Lynn Holdsworth wrote:
>> But isn't it hugely confusing if a success criterion for one
>> checkpoint fails on others? Presumably this one fails 4.1.2?
>
> On its own, it would fail 4.1.2. Of course, you'd then also need to look
> at making sure your form fields pass 4.1.2, which would lead you down
> the path of using a <label> element, aria-label, aria-labelledby, etc.
>
>> As a
>> developer, if I implement this success criterion, aren't I likely to
>> assume that it passes WCAG2?
>
> You'd assume wrong. Just implementing a technique that is sufficient for
> one SC does not mean it satisfies all other SCs.
>
> For instance, imagine if you added a nice visible <label>...but then
> styled it so that its color contrast is something like 1.5:1. Yes, you
> just satisfied 4.1.2, but now are failing 1.4.3.
>
> To pass WCAG2, you need to ensure all SCs are satisfied. If, as a
> developer, you just take one sufficient technique that addresses one SC
> and hope that this then automatically also satisfies all other SCs,
> you're going to have a bad time in many cases.
>
> 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: Steve Faulkner
Date: Wed, Mar 04 2015 6:05AM
Subject: Re: Unlabelled form field with adjacent button as label?
← Previous message | Next message →
You can file issues on the techniques on github
https://github.com/w3c/wcag/issues
you can also send comments
http://www.w3.org/WAI/WCAG20/comments/
--
Regards
SteveF
HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>;
On 4 March 2015 at 04:49, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = >
wrote:
> Great discussion.
>
> I agree with Lynn in that I find the wording in the technique confusing.
> Basically what the technique is saying is that an invisible label,
> such as ones provided by aria-label or title (easy to implement, no
> layout or design changes required), is sufficient for cases where an
> input field is next to a button, visibly and in focus order.
> I wish the wording of the technique was clearer on this, and it would
> help eliminate any confusion.
> I was somewhat confused when reading this myself, and I have dabbled
> in accessibility for some time now.
> I think a clearer wording would help everybody.
> It should say something along the lines of
> "in those cases, an invissible accessible name, provided via the
> aria-label or title attribute, (see accessible name calculation) is
> sufficient for the form field).
>
> Cheers
> -B
>
> On 3/4/15, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
> > On 04/03/2015 12:12, Lynn Holdsworth wrote:
> >> But isn't it hugely confusing if a success criterion for one
> >> checkpoint fails on others? Presumably this one fails 4.1.2?
> >
> > On its own, it would fail 4.1.2. Of course, you'd then also need to look
> > at making sure your form fields pass 4.1.2, which would lead you down
> > the path of using a <label> element, aria-label, aria-labelledby, etc.
> >
> >> As a
> >> developer, if I implement this success criterion, aren't I likely to
> >> assume that it passes WCAG2?
> >
> > You'd assume wrong. Just implementing a technique that is sufficient for
> > one SC does not mean it satisfies all other SCs.
> >
> > For instance, imagine if you added a nice visible <label>...but then
> > styled it so that its color contrast is something like 1.5:1. Yes, you
> > just satisfied 4.1.2, but now are failing 1.4.3.
> >
> > To pass WCAG2, you need to ensure all SCs are satisfied. If, as a
> > developer, you just take one sufficient technique that addresses one SC
> > and hope that this then automatically also satisfies all other SCs,
> > you're going to have a bad time in many cases.
> >
> > 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: Wed, Mar 04 2015 6:18AM
Subject: Re: Unlabelled form field with adjacent button as label?
← Previous message | No next message
Cheers Steve - very useful - will raise an issue.
On 04/03/2015, Steve Faulkner < = EMAIL ADDRESS REMOVED = > wrote:
> You can file issues on the techniques on github
> https://github.com/w3c/wcag/issues
>
> you can also send comments
> http://www.w3.org/WAI/WCAG20/comments/
>
> --
>
> Regards
>
> SteveF
> HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>;
>
> On 4 March 2015 at 04:49, Birkir R. Gunnarsson
> < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Great discussion.
>>
>> I agree with Lynn in that I find the wording in the technique confusing.
>> Basically what the technique is saying is that an invisible label,
>> such as ones provided by aria-label or title (easy to implement, no
>> layout or design changes required), is sufficient for cases where an
>> input field is next to a button, visibly and in focus order.
>> I wish the wording of the technique was clearer on this, and it would
>> help eliminate any confusion.
>> I was somewhat confused when reading this myself, and I have dabbled
>> in accessibility for some time now.
>> I think a clearer wording would help everybody.
>> It should say something along the lines of
>> "in those cases, an invissible accessible name, provided via the
>> aria-label or title attribute, (see accessible name calculation) is
>> sufficient for the form field).
>>
>> Cheers
>> -B
>>
>> On 3/4/15, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
>> > On 04/03/2015 12:12, Lynn Holdsworth wrote:
>> >> But isn't it hugely confusing if a success criterion for one
>> >> checkpoint fails on others? Presumably this one fails 4.1.2?
>> >
>> > On its own, it would fail 4.1.2. Of course, you'd then also need to
>> > look
>> > at making sure your form fields pass 4.1.2, which would lead you down
>> > the path of using a <label> element, aria-label, aria-labelledby, etc.
>> >
>> >> As a
>> >> developer, if I implement this success criterion, aren't I likely to
>> >> assume that it passes WCAG2?
>> >
>> > You'd assume wrong. Just implementing a technique that is sufficient
>> > for
>> > one SC does not mean it satisfies all other SCs.
>> >
>> > For instance, imagine if you added a nice visible <label>...but then
>> > styled it so that its color contrast is something like 1.5:1. Yes, you
>> > just satisfied 4.1.2, but now are failing 1.4.3.
>> >
>> > To pass WCAG2, you need to ensure all SCs are satisfied. If, as a
>> > developer, you just take one sufficient technique that addresses one SC
>> > and hope that this then automatically also satisfies all other SCs,
>> > you're going to have a bad time in many cases.
>> >
>> > 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.
>> >> >> >>
> > > >