Label es una marca que se utiliza para adjuntar información a un control. Por ejemplo, si tenemos un formulario donde se solicita la intruducción del nombre, normalmente tendremos una etiqueta que diga "nombre" y un campo de texto. Así:
En este caso, "nombre" debería llevar una marca label para que un lector de pantalla sepa qué texto va asociado al campo de texto. Así:
Hoy he visto un error utilizando label con elementos radio button. Concretamente, el error es este:
<input type="radio" name="tipoEmpreBusqueda" value="1" />Actividad Nacional
<input type="radio" name="tipoEmpreBusqueda" value="0" checked="checked" />Actividad Minorista
Es un error por dos razones:
1) Label debe referenciar un id en el atributo for.
2) Label ha de etiquetar un único control.
Si funcionara tal y como está hecho, un lector de pantalla no sabe qué información va con cada posible opción. Si no pudieramos ver, el lector nos diría que nuestras posibles opciones son Tipo Empresa y Tipo Empresa.
Lo correcto sería así:
<input type="radio" id="nacional" name="tipoEmpreBusqueda" value="1" /><label for="nacional">Actividad Nacional</label>
<input type="radio" id="minorista" name="tipoEmpreBusqueda" value="0" checked="checked" /><label for="minorista">Actividad Minorista</label>
En este caso, el lector nos informaría que nuestras dos posibles opciones son Actividad Nacional y Actividad Minorista.
Muy bueno. Es una duda que tuve durante mucho tiempo.
Un par de detalles más. En los radiobuttons y los checkbox, son dos de las pocas excepciones en el que se utiliza el atributo name en XHTML estricto o en la versión 1.1
Y por otro lado, es mucho mejor que la etiqueta (label) tenga dentro el elemento de formulario al que hace referencia, ya que hay menos dificultades para asociarlas adecuadamente.
Y ya como curiosidad: si utilizamos label, el elemento de formulario y la etiqueta se comporta como un sólo elemento, al desplazarnos con el tabulador o al hacer click con el ratón.
Saludos.
Sí, es verdad. Ni me acordaba de eso... creo que se llamaba "declaración implícita", ¿no? De todas formas, sólo quería resolver esa pequeña duda que yo también tuve con respecto labels y radios.
Has hecho muy bien en escribirlo, je je.
Pregunta:
Esta etiqueta Label se debe incluir siempre para hacer la página accesible. No basta con el atributo id?????
Mira el punto 12 sobre pautas de accesibilidad, concretamente el 12.4.:
"12.4 Asocie EXPLÍCITAMENTE las etiquetas con sus controles"
Como complemento a lo dicho también se deberían poner los radiobuttons de un mismo grupo dentro de un elemento fieldset, con su correspondiente legend que identifica al grupo, de este modo se facilita la comprensión de la estructura del formulario.
Saludos.
buen blog
gracias colega!
ricardo