Label y los radio buttons en HTML/XHTML

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

<label for=”nombre”>Nombre:</label> <input type=”text” name=”nombre” size=”20″ />

Hoy he visto un error utilizando label con elementos radio button. Concretamente, el error es este:

<label for=”tipoEmpreBusqueda”>Tipo Empresa</label>

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

Buttons Label

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.

¿Y cuál es la solución del problema?

Lo correcto sería así:

Tipo Empresa

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



0 comments ↓

There are no comments yet...Kick things off by filling out the form below..

Dejar un comentario


¡IMPORTANTE! Responde a la pregunta: ¿Cuál es el valor de 5 7 ?