E-mail List Archives

Search E-mail List Archives 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)

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

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

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

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