Verdadero

Falso

Intenten clickear verdadero. Luego el falso. ¿Se nota la diferencia?

Es frustrante. Quizá hay muchos usuarios que ni se percatan de que clickeando el texto al lado de un checkbox (o cualquier otro tipo de input) pueden accionar sobre él. Pero hay una mayoría (espero) que sabe que al hacer click en el texto de rótulo de un elemento, el mismo se accionará.

Al perder este comportamiento rompemos con la consistencia y eso afecta la experiencia de usuario, en particular la usabilidad del sistema.

Cómo usarlo

Para utilizar un rótulo de este tipo lo único que hay que hacer es utilizar el tag <label for="element-id">, donde el atributo for define el ID del elemento que queremos accionar. También se puede lograr poniendo el input dentro del label, pero no es tan limpio y no se puede hacer en todos los casos.

Como ejemplo, el código de Verdadero/Falso:

<input type="checkbox" id="verdadero" /> <label for="verdadero" id="label-usuario-ok" >Verdadero</label>
<input id="falso" type="checkbox" /> <span id="label-usuario-mal" >Falso</span>

Como comentario aparte, este “error”  es uno de los tantos que pasan desapercibidos por más que el HTML valide perfectamente.

Referencia

• https://developer.mozilla.org/en/HTML/Element/label