it-swarm-es.com

¿Debería hacerse clic en el espacio entre la casilla de verificación y la etiqueta?

Tomemos, por ejemplo, estos dos escenarios. Ambos HTML muy similares, pero semánticamente diferentes:

Escenario 1:

<label for="myCheckbox">
    <input type="checkbox" id="myCheckbox" />
    My Checkbox
</label>

Escenario 2:

<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">My Checkbox</label>

Ambos aparecerían para producir exactamente lo mismo. Sin embargo, no lo hacen. La diferencia es el espacio implícito entre la casilla de verificación y la etiqueta. En el primer escenario, este espacio también activaría la casilla de verificación porque es parte de la etiqueta. Sin embargo, el segundo escenario no lo haría porque está fuera de la etiqueta. Esto crea una pequeña cantidad de espacio donde, si el usuario hace clic, no activará la casilla de verificación como se esperaba.

My CheckboxMy CheckboxMy Checkbox

Dependiendo de cómo se configure la casilla de verificación, podría haber una cantidad aún mayor de espacio allí. Por ejemplo, si flota la casilla de verificación a la izquierda y coloca un margen de 10, 15 o 20 píxeles a la derecha.

Normalmente cuando pienso en el UX, trato de hacer que todo el bloque relacionado sea cliqueable para la misma cosa. Para mí, el lado izquierdo de la casilla de verificación hasta el lado derecho de su etiqueta debe ser parte de un bloque sólido que active el control.

¿Debería activarse también el espacio entre la casilla de verificación y el texto de la etiqueta? ¿Cuáles son algunas (si las hay) circunstancias en las que no desea hacer esto?

80
animuson

Creo que debería, ya que toda la región a los ojos del usuario es la "selección". Ahora, creo que puedes ver este tema desde otro ángulo que es ... ¿cómo eliminamos la percepción de un espacio?

Una solución es incluir un fondo que rodea la casilla de verificación y la región de la etiqueta. Al pasar el mouse por encima, el fondo también podría cambiar de color para reforzar aún más que toda esta área es seleccionable. enter image description here

77
Tom R

Estoy de acuerdo con su opinión de que se debe hacer clic en toda el área desde la izquierda de la casilla de verificación a la derecha de la etiqueta, ya que esto permite menos fallas de clics y ayuda en los dispositivos táctiles.

El icono del mouse también debe indicar esto visualmente en toda el área en la que se puede hacer clic.

8
darryn.ten

De acuerdo con http://www.w3.org/wiki/HTML/Elements/label su primer escenario es incorrecto y debe aparecer como:

<!-- SCENARIO 1 -->
<label>
    <input type="checkbox" id="myCheckbox" />
    My Checkbox
</label>

Ahora, en la otra parte, ¿cómo se debe manejar el espacio implícito?

<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">My Checkbox</label>

vs

<!-- SCENARIO 1 -->
<label>
    <input type="checkbox" id="myCheckbox" />
    My Checkbox
</label>

Voy a volver a desglosarlos, con algunas observaciones de formato

<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" /><!-- implicit HTML space exists here, is outside "label" -->
<label for="myCheckbox">My Checkbox</label>

vs

<!-- SCENARIO 1 -->
<label>
    <input type="checkbox" id="myCheckbox" /><!-- implicit HTML space exists here, is inside "label" -->
    My Checkbox
</label>

¿Debería activarse también el espacio entre la casilla de verificación y el texto de la etiqueta?

El escenario 2 debe tener un espacio en blanco no cliqueable entre la casilla de verificación y la etiqueta, porque el espacio HTML implícito es entre los dos elementos.

El escenario 1 debe tener un espacio en blanco en el que se puede hacer clic entre la casilla de verificación y la etiqueta porque hay un espacio HTML implícito adyacente a el nodo de texto y el elemento de entrada.

¿Cuáles son algunas (si las hay) circunstancias en las que no le gustaría hacer esto?

Sinceramente, no puedo pensar en tal circunstancia. Personalmente, quiero que toda una región alrededor de mi casilla de verificación seleccione la casilla de verificación. Ver el respuesta de Tom R .


Si desea evitar esto en el futuro, use este formulario:

<!-- SCENARIO 2 -->
<input type="checkbox" id="myCheckbox" /><label for="myCheckbox">My Checkbox</label>
<!-- non-implicit HTML space here, since the elements directly abut -->

Sin embargo, probablemente tenga algo de relleno en sus elementos de formulario para comenzar, por lo que tendrán espacio a su alrededor. Esto se convierte en un problema de CSS.

6
jcolebrand

Hacer clic en la etiqueta a veces se usa para obtener acceso a información adicional sobre la selección, o para crear instancias de la información sobre herramientas al hacer clic en lugar de pasar el mouse por algún propósito estético. A menos que sea necesario, el mejor enfoque suele ser maximizar la región en la que se puede hacer clic, incluso si no está bien definida visualmente (es mejor evitar los cuadros en cuadros siempre que sea posible).

1
Shash

Sí, se debe poder hacer clic en el espacio entre una casilla de verificación y su etiqueta. Esto se debe a que si un usuario hace clic en el espacio intermedio, generalmente porque intencionalmente quería hacer clic en la casilla de verificación o en la etiqueta de texto, pero accidentalmente movió el mouse al espacio. Debe tener en cuenta estos errores del usuario y hacer que también se pueda hacer clic en el hueco.

Aquí hay un buen artículo que le muestra la forma correcta de hacer clic en sus casillas de verificación: ¿Por qué las casillas de verificación de sus formularios deben tener etiquetas de etiquetas?

1
pearso

En mi opinión, si. Es simplemente una continuación del control con la misma acción en lugar de dos acciones separadas.

El único caso en el que puedo ver dónde no quieres que esto suceda es si hacer clic en cualquiera de los espacios da como resultado diferentes acciones. (es decir, al hacer clic en una etiqueta se seleccionaron los elementos secundarios, otros elementos relacionados con el mismo tema, etc.)

0
Ben