WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: List with Checkboxes & Links

for

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

From: Patrick Burke
Date: Wed, Apr 01 2015 1:59PM
Subject: List with Checkboxes & Links
No previous message | Next message →

>Hi everyone,

Sorry for yet *another* variant of the form-field-with-extra-content problem.:

I'm working with a site that has a list of names, with a checkbox for
each one. The checkboxes let you select or deselect people for
further action (Recommend for Promotion, Fire 'em All!, etc).

The current arrangement is a 2-column table, with all the checkboxes
in the left column (with no association to the names on the right.) I
would simply suggest a list of checkboxes, with the names as labels.
HOWEVER, each name is also linked to personnel profile info (simple
href leading to a separate page for each individual).

So, what's the simplest construct we can recommend? It should: have
the checkboxes labeled appropriately, allow lookup of the individual
personnel links, yet not have too much repetition of the names.

In a very quick test, embedding the anchor inside the label tag
appears to be a BAD IDEA! (Jaws+Firefox). The form field is
recognized, but not the link. Of course this also breaks the expected
behavior of clicking on the label to activate the form field.

Thanks much for any ideas,

Patrick


--
Patrick J. Burke

Coordinator
UCLA Disabilities &
Computing Program

Phone: 310 206-6004
E-mail: = EMAIL ADDRESS REMOVED =
Location: 4909 Math Science


Department Contact: = EMAIL ADDRESS REMOVED =

From: Lucy Greco
Date: Wed, Apr 01 2015 2:02PM
Subject: Re: List with Checkboxes & Links
← Previous message | Next message →

can you use labled by for the check box and then point to the link for the
lable

On Wed, Apr 1, 2015 at 12:59 PM, Patrick Burke < = EMAIL ADDRESS REMOVED = > wrote:

>
> Hi everyone,
>>
>
> Sorry for yet *another* variant of the form-field-with-extra-content
> problem.:
>
> I'm working with a site that has a list of names, with a checkbox for each
> one. The checkboxes let you select or deselect people for further action
> (Recommend for Promotion, Fire 'em All!, etc).
>
> The current arrangement is a 2-column table, with all the checkboxes in
> the left column (with no association to the names on the right.) I would
> simply suggest a list of checkboxes, with the names as labels. HOWEVER,
> each name is also linked to personnel profile info (simple href leading to
> a separate page for each individual).
>
> So, what's the simplest construct we can recommend? It should: have the
> checkboxes labeled appropriately, allow lookup of the individual personnel
> links, yet not have too much repetition of the names.
>
> In a very quick test, embedding the anchor inside the label tag appears to
> be a BAD IDEA! (Jaws+Firefox). The form field is recognized, but not the
> link. Of course this also breaks the expected behavior of clicking on the
> label to activate the form field.
>
> Thanks much for any ideas,
>
> Patrick
>
>
> --
> Patrick J. Burke
>
> Coordinator
> UCLA Disabilities &
> Computing Program
>
> Phone: 310 206-6004
> E-mail: = EMAIL ADDRESS REMOVED =
> Location: 4909 Math Science
>
>
> Department Contact: = EMAIL ADDRESS REMOVED =
> > > > >



--
Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces

From: Moore,Michael (DARS)
Date: Wed, Apr 01 2015 2:14PM
Subject: Re: List with Checkboxes & Links
← Previous message | Next message →

That sounds correct

Sample code

...<td><input type="check" aria-labelledby="p1" .../></td><td><a href... id="p1">John Doe</a><td>...


The screen reader would say "John Doe Checkbox Not checked"

Mike Moore
Accessibility Coordinator,
Texas Department of Assistive and Rehabilitative Services
(512) 424-4159 (Office)
(512) 574-0091 (Cell)


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lucy Greco
Sent: Wednesday, April 01, 2015 3:02 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] List with Checkboxes & Links

can you use labled by for the check box and then point to the link for the lable

On Wed, Apr 1, 2015 at 12:59 PM, Patrick Burke < = EMAIL ADDRESS REMOVED = > wrote:

>
> Hi everyone,
>>
>
> Sorry for yet *another* variant of the form-field-with-extra-content
> problem.:
>
> I'm working with a site that has a list of names, with a checkbox for
> each one. The checkboxes let you select or deselect people for further
> action (Recommend for Promotion, Fire 'em All!, etc).
>
> The current arrangement is a 2-column table, with all the checkboxes
> in the left column (with no association to the names on the right.) I
> would simply suggest a list of checkboxes, with the names as labels.
> HOWEVER, each name is also linked to personnel profile info (simple
> href leading to a separate page for each individual).
>
> So, what's the simplest construct we can recommend? It should: have
> the checkboxes labeled appropriately, allow lookup of the individual
> personnel links, yet not have too much repetition of the names.
>
> In a very quick test, embedding the anchor inside the label tag
> appears to be a BAD IDEA! (Jaws+Firefox). The form field is
> recognized, but not the link. Of course this also breaks the expected
> behavior of clicking on the label to activate the form field.
>
> Thanks much for any ideas,
>
> Patrick
>
>
> --
> Patrick J. Burke
>
> Coordinator
> UCLA Disabilities &
> Computing Program
>
> Phone: 310 206-6004
> E-mail: = EMAIL ADDRESS REMOVED =
> Location: 4909 Math Science
>
>
> Department Contact: = EMAIL ADDRESS REMOVED =
> > > archives at http://webaim.org/discussion/archives
> >



--
Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces

From: Patrick Burke
Date: Wed, Apr 01 2015 2:55PM
Subject: Re: List with Checkboxes & Links
← Previous message | Next message →

Eeexcellent! Thanks Mike/Lucy!

Patrick

At 01:14 PM 4/1/2015, Moore,Michael (DARS) wrote:
>That sounds correct
>
>Sample code
>
>...<td><input type="check" aria-labelledby="p1" .../></td><td><a
>href... id="p1">John Doe</a><td>...
>
>
>The screen reader would say "John Doe Checkbox Not checked"
>
>Mike Moore
>Accessibility Coordinator,
>Texas Department of Assistive and Rehabilitative Services
>(512) 424-4159 (Office)
>(512) 574-0091 (Cell)
>
>
>-----Original Message-----
>From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>Behalf Of Lucy Greco
>Sent: Wednesday, April 01, 2015 3:02 PM
>To: WebAIM Discussion List
>Subject: Re: [WebAIM] List with Checkboxes & Links
>
>can you use labled by for the check box and then point to the link
>for the lable
>
>On Wed, Apr 1, 2015 at 12:59 PM, Patrick Burke < = EMAIL ADDRESS REMOVED = > wrote:
>
> >
> > Hi everyone,
> >>
> >
> > Sorry for yet *another* variant of the form-field-with-extra-content
> > problem.:
> >
> > I'm working with a site that has a list of names, with a checkbox for
> > each one. The checkboxes let you select or deselect people for further
> > action (Recommend for Promotion, Fire 'em All!, etc).
> >
> > The current arrangement is a 2-column table, with all the checkboxes
> > in the left column (with no association to the names on the right.) I
> > would simply suggest a list of checkboxes, with the names as labels.
> > HOWEVER, each name is also linked to personnel profile info (simple
> > href leading to a separate page for each individual).
> >
> > So, what's the simplest construct we can recommend? It should: have
> > the checkboxes labeled appropriately, allow lookup of the individual
> > personnel links, yet not have too much repetition of the names.
> >
> > In a very quick test, embedding the anchor inside the label tag
> > appears to be a BAD IDEA! (Jaws+Firefox). The form field is
> > recognized, but not the link. Of course this also breaks the expected
> > behavior of clicking on the label to activate the form field.
> >
> > Thanks much for any ideas,
> >
> > Patrick
> >
> >
> > --
> > Patrick J. Burke
> >
> > Coordinator
> > UCLA Disabilities &
> > Computing Program
> >
> > Phone: 310 206-6004
> > E-mail: = EMAIL ADDRESS REMOVED =
> > Location: 4909 Math Science
> >
> >
> > Department Contact: = EMAIL ADDRESS REMOVED =
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
>
>
>
>--
>Lucia Greco

From: Sylvia Richardson
Date: Wed, Apr 01 2015 3:21PM
Subject: Re: List with Checkboxes & Links
← Previous message | Next message →

Because users won't be able to select the checkboxes by clicking the label, it might also be a good idea to make them a little larger than normal.

-Sylvia

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Moore,Michael (DARS)
Sent: Wednesday, April 01, 2015 4:15 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] List with Checkboxes & Links

That sounds correct

Sample code

...<td><input type="check" aria-labelledby="p1" .../></td><td><a href... id="p1">John Doe</a><td>...


The screen reader would say "John Doe Checkbox Not checked"

Mike Moore
Accessibility Coordinator,
Texas Department of Assistive and Rehabilitative Services
(512) 424-4159 (Office)
(512) 574-0091 (Cell)


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lucy Greco
Sent: Wednesday, April 01, 2015 3:02 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] List with Checkboxes & Links

can you use labled by for the check box and then point to the link for the lable

On Wed, Apr 1, 2015 at 12:59 PM, Patrick Burke < = EMAIL ADDRESS REMOVED = > wrote:

>
> Hi everyone,
>>
>
> Sorry for yet *another* variant of the form-field-with-extra-content
> problem.:
>
> I'm working with a site that has a list of names, with a checkbox for
> each one. The checkboxes let you select or deselect people for further
> action (Recommend for Promotion, Fire 'em All!, etc).
>
> The current arrangement is a 2-column table, with all the checkboxes
> in the left column (with no association to the names on the right.) I
> would simply suggest a list of checkboxes, with the names as labels.
> HOWEVER, each name is also linked to personnel profile info (simple
> href leading to a separate page for each individual).
>
> So, what's the simplest construct we can recommend? It should: have
> the checkboxes labeled appropriately, allow lookup of the individual
> personnel links, yet not have too much repetition of the names.
>
> In a very quick test, embedding the anchor inside the label tag
> appears to be a BAD IDEA! (Jaws+Firefox). The form field is
> recognized, but not the link. Of course this also breaks the expected
> behavior of clicking on the label to activate the form field.
>
> Thanks much for any ideas,
>
> Patrick
>
>
> --
> Patrick J. Burke
>
> Coordinator
> UCLA Disabilities &
> Computing Program
>
> Phone: 310 206-6004
> E-mail: = EMAIL ADDRESS REMOVED =
> Location: 4909 Math Science
>
>
> Department Contact: = EMAIL ADDRESS REMOVED =
> > > archives at http://webaim.org/discussion/archives
> >



--
Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces
Blue Cross and Blue Shield of North Carolina

Confidentiality Notice: This message is intended only for the use of the individual or entity to which it is addressed. This communication may contain individual protected health information ("PHI") that is subject to protection under state and federal laws, or other privileged, confidential or proprietary information of Blue Cross and Blue Shield of North Carolina that may not be further disclosed. If you are not the intended recipient, or the employee or agent responsible for delivering this communication to the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. If you have received this communication in error, please notify us immediately by replying to this message and deleting it from your computer. Thank you.

From: Jonathan Avila
Date: Wed, Apr 01 2015 3:26PM
Subject: Re: List with Checkboxes & Links
← Previous message | Next message →

I agree there may be confusion about clicking the label to check the box - this can be problematic

Jon

> On Apr 1, 2015, at 5:22 PM, Sylvia Richardson < = EMAIL ADDRESS REMOVED = > wrote:
>
> Because users won't be able to select the checkboxes by clicking the label, it might also be a good idea to make them a little larger than normal.
>
> -Sylvia
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Moore,Michael (DARS)
> Sent: Wednesday, April 01, 2015 4:15 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] List with Checkboxes & Links
>
> That sounds correct
>
> Sample code
>
> ...<td><input type="check" aria-labelledby="p1" .../></td><td><a href... id="p1">John Doe</a><td>...
>
>
> The screen reader would say "John Doe Checkbox Not checked"
>
> Mike Moore
> Accessibility Coordinator,
> Texas Department of Assistive and Rehabilitative Services
> (512) 424-4159 (Office)
> (512) 574-0091 (Cell)
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lucy Greco
> Sent: Wednesday, April 01, 2015 3:02 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] List with Checkboxes & Links
>
> can you use labled by for the check box and then point to the link for the lable
>
>> On Wed, Apr 1, 2015 at 12:59 PM, Patrick Burke < = EMAIL ADDRESS REMOVED = > wrote:
>>
>>
>> Hi everyone,
>>
>> Sorry for yet *another* variant of the form-field-with-extra-content
>> problem.:
>>
>> I'm working with a site that has a list of names, with a checkbox for
>> each one. The checkboxes let you select or deselect people for further
>> action (Recommend for Promotion, Fire 'em All!, etc).
>>
>> The current arrangement is a 2-column table, with all the checkboxes
>> in the left column (with no association to the names on the right.) I
>> would simply suggest a list of checkboxes, with the names as labels.
>> HOWEVER, each name is also linked to personnel profile info (simple
>> href leading to a separate page for each individual).
>>
>> So, what's the simplest construct we can recommend? It should: have
>> the checkboxes labeled appropriately, allow lookup of the individual
>> personnel links, yet not have too much repetition of the names.
>>
>> In a very quick test, embedding the anchor inside the label tag
>> appears to be a BAD IDEA! (Jaws+Firefox). The form field is
>> recognized, but not the link. Of course this also breaks the expected
>> behavior of clicking on the label to activate the form field.
>>
>> Thanks much for any ideas,
>>
>> Patrick
>>
>>
>> --
>> Patrick J. Burke
>>
>> Coordinator
>> UCLA Disabilities &
>> Computing Program
>>
>> Phone: 310 206-6004
>> E-mail: = EMAIL ADDRESS REMOVED =
>> Location: 4909 Math Science
>>
>>
>> Department Contact: = EMAIL ADDRESS REMOVED =
>> >> >> archives at http://webaim.org/discussion/archives
>> >
>
>
> --
> Lucia Greco
> Web Accessibility Evangelist
> IST - Architecture, Platforms, and Integration University of California, Berkeley
> (510) 289-6008 skype: lucia1-greco
> http://webaccess.berkeley.edu
> Follow me on twitter @accessaces
> > > >
> Blue Cross and Blue Shield of North Carolina
>
> Confidentiality Notice: This message is intended only for the use of the individual or entity to which it is addressed. This communication may contain individual protected health information ("PHI") that is subject to protection under state and federal laws, or other privileged, confidential or proprietary information of Blue Cross and Blue Shield of North Carolina that may not be further disclosed. If you are not the intended recipient, or the employee or agent responsible for delivering this communication to the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. If you have received this communication in error, please notify us immediately by replying to this message and deleting it from your computer. Thank you.
> > > >

From: _mallory
Date: Thu, Apr 02 2015 11:01AM
Subject: Re: List with Checkboxes & Links
← Previous message | No next message

On Wed, Apr 01, 2015 at 08:14:59PM +0000, Moore,Michael (DARS) wrote:
> That sounds correct
>
> Sample code
>
> ...<td><input type="check" aria-labelledby="p1" .../></td><td><a href... id="p1">John Doe</a><td>...
>
>
> The screen reader would say "John Doe Checkbox Not checked"

Wait, would this then be needed for the common case of labels for
checkboxes that do something like
<label for="foo">I agree to the <a href="tc.html">terms and conditions</a> of the company</label>
<input type="checkbox" id="foo" name="bar">

Or is this somewhat different due to unequal label text vs link text?
_mallory