Listas de casillas de verificación HTML correctas semánticamente

Question

Tengo una lista de casillas de verificación HTML que me gustaría mostrar en el siguiente formato:

Click all that apply:
                                 Title A      Title B

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

Me pregunto cuál es la mejor forma de codificar esto de forma semántica.

He visto una pregunta relacionada en las casillas de verificación semánticamente correctas, pero esto no tiene en cuenta los títulos.

¿Alguna idea?

Answer 1

¿Filas y columnas etiquetadas? Este es casi seguramente un caso en el que una tabla es lo correcto.

Imagine que, una vez que el usuario ha hecho sus selecciones y ha enviado el formulario, puede volver a mostrarles sus elecciones. Claramente, sería correcto usar una tabla para mostrar los datos recopilados, por lo que es correcto usar una tabla para mostrar el formulario que recopila los datos.

Answer 2

Sugeriré que una tabla sería la estructura semántica correcta para esto porque el significado de una casilla de verificación está determinado por la fila y la columna en la que aparece.

Piensa en cómo mostrarías este conjunto de 1s y 0s: lo harías en una tabla. Todo lo que estás haciendo es hacer que las celdas sean editables.

Estoy más convencido que cuando comencé a redactar esta publicación. Una tabla es la estructura correcta para esto.

Answer 3

Semánticamente, este diseño me parece una tabla, así que si realmente necesitas usar este diseño, debes marcarlo como una tabla. (Use th para los títulos y opciones, td para las celdas que contienen las casillas de verificación).

Sin embargo, la forma resultante será bastante difícil de usar. Ninguno de los textos es adecuado para usar como una etiqueta para cada casilla de verificación individual, por lo que los usuarios se verán obligados a encontrar & amp; haga clic en la pequeña área activa de la casilla de verificación.

Mi sugerencia sería utilizar dos grupos de opciones, como por ejemplo:

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

Sí, esto significa repetir parte de su texto, lo que impide su mantenimiento en cierta medida; sin embargo, creo que para una forma, la usabilidad debería triunfar sobre la mantenibilidad.

Answer 4

Las tablas serían la forma más fácil, pero las tablas deberían usarse para datos como sabemos.

Así que usaría una construcción div:

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

Todo debería ir en un CSS. (También las definiciones de ancho 'en línea' arriba)

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

No estoy seguro de si esto funciona, lo intentaría así.

EDIT: Ah, estas casillas son " div " s, por cierto.