Log in

Accessify Forum - Accessibility Discussion

Latest Tweets

Web #accessibility training in Edinburgh this fall: about WCAG2, understand WAI-ARIA, more http://www.rnib.org.uk... - Gary

Yesterday, RT: @webaxe

Blog RE practical research into #HTML5 & #accessibility - http://www.accessiblec... by @jkiss - Gary

Yesterday, RT: @stcaccess RT @Meera404

.@v may I suggest you add November's Accessing Higher Ground accessibility conference to lanyrd.com, too? http://j.mp/bbPai...

Yesterday, RT: @stcaccess

Drupal.org now has a quick link to all #accessibility issues. #code #a11y #axs - Gary

2 days ago, RT: @mpaciello RT @Bojhan

2 of 2:Ask @jsteh for access to #longdesc! #a11y - Gary

6 days ago

Read more...

how to label checkboxes?

  • Reply to topic
  • Post new topic

Home / Site Building & Testing / how to label checkboxes?

Reply with quote Hi,
I have the following code scenario and i dont now how to label such checkboxes:


Code:

<label for="id_comment?">Comment id x</label>
<input type="checkbox" id="id_comment?" name="id_comment[]" value="x" />

<label for="id_comment?">Comment id y</label>
<input type="checkbox" id="id_comment?" name="id_comment[]" value="y" />

<label for="id_comment?">Comment id z</label>
<input type="checkbox" id="id_comment?" name="id_comment[]" value="z" />


id_comment[] is valide code to fetch values from multiple checkboxes as an array. But first: how to name the id of each checkbox id_comment[] isnt valide. And second what value to insert in the "for" attribute of each label?

Thanks,
Armand
Reply with quote hi Armand
2 things:
1. each id must be unique, so suggest "id_comment1" "id_comment2"...
2. For input types checkbox and radio , the text label should be to the right of the control, not to the left as you have in the code examples.
_________________
Steve Faulkner
Technical Director
TPG Europe
The Paciello Group | Web Accessibility Tools Consortium
Reply with quote Hi Steve,
Thanks for your response. But it dosent solve the problem.

The problem is that the name and the id must have the same value. But in this case, how would you do it if the name is passed as an array?

thanks for help,
Armand
Reply with quote
atu wrote:

The problem is that the name and the id must have the same value


no, they don't. keep the name as it is, and just assign unique IDs and related FOR attributes
_________________
Patrick H. Lauke / webmaster / University of Salford
co-lead: WaSP Accesibility Task Force
take it to the streets ... WaSP Street Team
personal: splintered | photographia | redux
co-author: Web Accessibility - Web Standards and Regulatory Compliance
Reply with quote Thanks, it works.
Reply with quote Specifically:
Code:
<label for="id_comment_x">Comment id x</label>
<input  id="id_comment_x" type="checkbox" name="id_comment[]" value="x" />

<label for="id_comment_y">Comment id y</label>
<input  id="id_comment_y" type="checkbox" name="id_comment[]" value="y" />

<label for="id_comment_z">Comment id z</label>
<input  id="id_comment_z" type="checkbox" name="id_comment[]" value="z" />
Or:
Code:
<input  id="id_comment_x" type="checkbox" name="id_comment[]" value="x" />
<label for="id_comment_x">Comment id x</label>

<input  id="id_comment_y" type="checkbox" name="id_comment[]" value="y" />
<label for="id_comment_y">Comment id y</label>

<input  id="id_comment_z" type="checkbox" name="id_comment[]" value="z" />
<label for="id_comment_z">Comment id z</label>

I've lined up the for and id to show which values must match. The order of the attributes doesn't matter, this is just a visual aid for reading the code.
_________________
My CV type thing and my Life of Ben (Blog). Nigel Peck's Accessify Forum Requirements.

  • Reply to topic
  • Post new topic

Display posts from previous:   

All times are GMT

Jump to:  

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum