Semantically Correct HTML Checkbox lists

Question

I've got an HTML checkbox list that I would like to display in the following format:

Click all that apply:
                                 Title A      Title B

Option 1                         [  ]         [  ]
Option 2                         [  ]         [  ]
Option 3                         [  ]         [  ]

I'm wondering what the best way to code this semantically?

I've seen a related question on semantically correct checkboxes, but this doesn't take into account the titles.

Any ideas?

Bertold

Incidentally, it should prompt "Check all that apply". – Colotomy

Answer 1

Labelled rows and columns? This is almost certainly a case where a table is the correct thing.

Imagine that, once the user has made their selections and submitted the form, you then display their choices back to them. It would clearly be correct to use a table to display the gathered data, so it is correct to use a table to display the form that gathers the data.

Healey

Ok. I can see why a table might apply. How would I semantically create that? Something like the following (see next comment)? Is there a rule saying that any input 'must' have a label associated with it, or will the headers in the table suffice? Thanks Sniffer – Bertold

<table> <thead> <tr> <th axis="options"></th> <th axis="title1">Title 1</th> <th axis="title2">Title 2</th> </tr> </thead> <tbody> <tr> <td headers="options" axis="option1">Option 1</td> <td headers="option1 title1"><input id="option1_title1" type="checkbox" value="checked" /></td> <td headers="option1 title2"><input ... /></td> </tr> <tr> <td headers="options" axis="option2">Option 2</td> <td headers="option2 title1"><input ... /></td> <td headers="option2 title2"><input ... /></td> </tr> <tr> ... </tr> </tbody> </table> – Bertold

Sorry - that didn't come out very nice. The 600 character limit is a bit restricting if you are talking about code (although I understand the reasons behind short comments). – Bertold

There's no rule that says inputs must have a label associated with them, but having a label helps vastly in the usability department. Many people have trouble controlling a mouse accurately, and clicking the teeny-tiny active area of a checkbox is a big problem. – Urgency

Answer 2

I will suggest that a table would be the correct semantic structure for this because the meaning of a check box is determined by the row and column in which it appears.

Think of how you would display this set of 1s and 0s: You would do it in a table. All you are doing is making the cells editable.

I am even more convinced than when I started composing this post. A table is the right structure for this.

Ailsun

Answer 3

Semantically, this layout looks to me like a table, so if you really need to use this layout, you should mark it up as a table. (Use th for the titles and options, td for the cells containing the checkboxes.)

However, the resulting form will be pretty hard to use. None of the text is suitable to use as a label for each individual checkbox, so users will be forced to find & click on the tiny active area of the checkbox itself.

My suggestion would be to use two groups of options, like so:

<fieldset><legend>Title 1</legend>
  <input type="checkbox" id="t1o1"><label for="t1o1">Option 1</label>
  <input type="checkbox" id="t1o2"><label for="t1o2">Option 2</label>
  ...
</fieldset>
<fieldset><legend>Title 2</legend>
  ...
  <input type="checkbox" id="t3o2"><label for="t2o3">Option 2</label>
  <input type="checkbox" id="t2o3"><label for="t2o3">Option 3</label>
</fieldset>

Yes, this means repeating some of your text, which impedes maintainability to some extent; however, I think for a form, usability should trump maintainability.

Urgency

Hi Martha This is how I would have probably tried to mark it up initially, but I can see why it would be regarded as tabular data, hence my comments above. – Bertold

Oh, there's no question that the layout you posted is tabular - see the first paragraph of my answer. It's just that IMO such a layout makes the form hard to use, because there's no clickable text. (It probably also suffers in the accessibility area; using table markup properly helps, but tables are inherently harder for screen readers to parse.) – Urgency

Answer 4

Tables would be the easiest way, but tables should be used for data as we know.

So I'd use a div construction:

+---style="width:XXXpx"--------------------------------------------------+
|+---style="width:100%"-------------------------------------------------+|
||                                                +class=opt++class=opt+||
||                                                | title a || title b |||
||                                                +---------++---------+||
|+----------------------------------------------------------------------+|
|+---style="width:100%"-------------------------------------------------+|
||+----------------------------------------------++class=opt++class=opt+||
||| Option 1                                     ||   [x]   ||   [x]   |||
||+----------------------------------------------++---------++---------+||
|+----------------------------------------------------------------------+|
| //repeat for every option                                              |
+------------------------------------------------------------------------+

Everything should go into a CSS. (Also the 'inline' width definitions above)

.opt { 
  float:right; width: 10%; /*probably*/ z-index: 99; 
  /*edit2:*/ position: relative;
}

I'm not sure if this works, I would try it like this.

EDIT: Ah, these boxes are "div"s, btw.

Nies