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?

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.

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.

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.

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.