hi,
I don’t know to put in labels for these checkboxes
http://mayacove.com/dev/checkboxes.html
because in each row the two checkboxes have different id’s… (and of course cna’t repeat id’s…) so what do I put in the <label>…</label> tags for each row?
thank you…
I think this is a prime example of when you can and should use a table to lay out a form - you have a tabular setup, with row headings and column headings (row headings should use <th scope=“row”> of course!) and a grid pattern to fill in. So far, so funky.
The who label issue is where it starts to get tricky. You don’t want the text in the left-hand column to act as labels, because which set of checkboxes are they labels for? If you have them as labels, you risk having people inadvertently clicking on the label and changing their answers without realising it. No, just leave the text as text in a <th>.
But you do need a label, because speech synthesisers and other accessibility software will often ignore anything in a <form> that isn’t a fieldset, legend, input or label. That’s easy though - just position the labels off-screen so that they don’t interfere with the visuals.
oh brother… never thought making a form accessible could be so complicated…
(btw, I did have form tags in my code, they were outside the table, and I didn’t think to include them…)
thank you very much for taking the time to post all this code… will use table you posted… just checked, it validates…
(title for inputs, who knew…
thank you very very much…
I used to use td scope=“row” but when I started using th’s in the tbodies, I started wondering if that was necessary or too redundant (in a simple table, not a complex one). I’d like to find out more about scope vs headers… as in, how much can header at the beginning of a row imply that it heads the stuff in the row?
But you do need a label, because speech synthesisers and other accessibility software will often ignore anything in a <form> that isn’t a fieldset, legend, input or label. That’s easy though - just position the labels off-screen so that they don’t interfere with the visuals.
My “titles” example was one way around that, but off-screen labels is another good choice.
Maya: Whatever you do, try to fill in and submit using a text browser (Lynx and others do some table rendering) and try it in a few popular screen readers (using free demos available or whatever). My copy of JAWS ignores all the table-stuff of a table in a form, so while a properly-marked-up table is a good thing, you must make sure the form inside is totally independent… that the form controls themselves can give ALL the necessary information.
So, I’m saying, test it.
Validates out of pure luck… I wrote it here. But good that you checked. : )
The dilemma is, while it’s technically legal to have multiple labels per input, it’s not possible to have multiple inputs per label.
While the use of a table makes sense visually here, it’s going to be a problem having it in a form like this. I notice you don’t have any form tags, but if this is getting filled in and sent somewhere, it’ll have to be a form (or is this going to be something else??).
What you might end up doing is have each group of two questions inside a fieldset. The legend of the fieldset is your “Drug one” “Drug two” etc text. Each checkbox gets its own label. Maybe those labels have to be invisible.
If someone’s in Forms Mode in a screen reader, their reader is going to ignore all the table stuff: and your table is explaining the meaning of each checkbox. So if you must keep this table setup, you’ll want at least invisible labels for those who aren’t seeing a table.
Here’s the actual form-form:
(here I have two labels wrapping and two not wrapping, just to show)
<form action="" id="formMeds">
<fieldset>
<legend>Past and current drugs</legend>
<fieldset>
<legend>Drug One</legend>
<label for="drugOnePresently">
<input name="what_meds" id="drugOnePresently" type="checkbox" value="" /> Presently</label>
<label for="drugOnePast">
<input name="what_meds" id="drugOnePast" type="checkbox" value="" /> In the Past</label>
</fieldset>
<fieldset>
<legend>Drug Two</legend>
<label for="drugTwoPresently">
<input name="what_meds" id="drugTwoPresently" type="checkbox" value="" /> Presently</label>
<label for="drugTwoPast">
<input name="what_meds" id="drugTwoPast" type="checkbox" value="" /> In the Past</label>
</fieldset>
<fieldset>
<legend>Drug Three</legend>
<input name="what_meds" id="drugThreePresently" type="checkbox" value="" /> <label for="drugThreePresently">Presently</label>
<label for="drugThreePast">
<input name="what_meds" id="drugThreePast" type="checkbox" value="" /> <label for="drugThreePast">In the Past</label>
</fieldset>
<fieldset>
<legend>Drug Four</legend>
<input name="what_meds" id="drugFourPresently" type="checkbox" value="" /> <label for="drugFourPresently">Presently</label>
<input name="what_meds" id="drugFourPast" type="checkbox" value="" /> <label for="drugFourPast">In the Past</label>
</fieldset>
<input type="submit" value="Submit" />
</fieldset>
</form>
To get it looking all fancy and table-like, I’d have to find an example brothercake posted a while ago… because styling legends is a b****. Damn near impossible. He did something else, but he did make it look like a table. Was pretty cool.
If it MUST be a table, at least make it a properly marked-up one inside a form, and you’ll need to use the title attribute on the inputs to replace the labels:
<form action="" id="formMeds">
<fieldset>
<legend>Past and current drugs</legend>
<table>
<thead>
<tr>
<th scope="col" class="invisible">Drug List</th>
<th scope="col">Currently Taking</th>
<th scope="col">Taken in the Past</th>
</tr>
<thead>
<tbody>
<tr>
<th>Drug One</th>
<td>
<input name="what_meds" id="drugOnePresently" type="checkbox" [b]title="Taking Drug One Presently"[/b] value="" /></td>
<td>
<input name="what_meds" id="drugOnePast" type="checkbox" [b]title="Took Drug One in the Past"[/b] value="" /></td>
</tr>
<tr>
<th>Drug Two</th>
<td>
<input name="what_meds" id="drugTwoPresently" type="checkbox" title="Taking Drug Two Presently" value="" /></td>
<td>
<input name="what_meds" id="drugTwoPast" type="checkbox" title="Took Drug Two in the Past" value="" /></td>
</tr>
<tr>
<th>Drug Three</th>
<td>
<input name="what_meds" id="drugThreePresently" type="checkbox" title="Taking Drug Three Presently" value="" /></td>
<td>
<input name="what_meds" id="drugThreePast" type="checkbox" title="Took Drug Three in the Past" value="" /></td>
</tr>
<tr>
<th>Drug Four</th>
<td>
<input name="what_meds" id="drugFourPresently" type="checkbox" title="Taking Drug Four Presently" value="" /></td>
<td>
<input name="what_meds" id="drugFourPast" type="checkbox" title="Took Drug Four in the Past" value="" /></td>
</tr>
</tbody>
</table>
<input type="submit" value="Submit" />
</fieldset>
</form>
With some CSS to make that work.
However, form1 > form2.