Blog what I write

Asociación implícita de etiquetas LABEL para controles de formulario

post - - 9 replies -

Aprovechando las bondades del tag LABEL podemos mejorar tanto la accesibilidad como la usabilidad de los formularios en las interfaces web.

LABEL se encarga de asociar la etiqueta textual a un control determinado (input, radio, select, etc.) proporcionando información acerca del control.

Cabe destacar que LABEL cuando recibe el foco, automáticamente se lo cede al control asociado.

Dos formas de usar este tag

Mediante la asociación explicita:

<input name="terms" id="terms" type="checkbox" value="1" />
<label for="terms">He leído y acepto las <a href="/terms">condiciones del servicio</a></label>

Mediante la asociación implicita:

<label for="terms">
    <input name="terms" id="terms" type="checkbox" value="1" />
    <span>He leído y acepto las <a href="/terms">condiciones del servicio</a></span>
</label>

El uso es muy simple, basta con indicar el atributo for con el identificador al que se quiera asociar la etiqueta. Por lo tanto los atributos for (del LABEL) e id (de INPUT) han de ser iguales.
También podemos incorporar el atributo title en un LABEL.

Recordar por último que esta etiqueta con sus controles asociados deben ser contenidos por otra etiqueta en bloque. Yo suelo usar listas, o si se trata de una sola opción un simple párrafo.

Respecto a las dos opciones de uso siempre me he inclinado por la segunda (asociación implícita).

  1. Algunas plataformas de navegación anticuadas (muy anticuadas) no reconocen la asociación for e id. Con esta forma obligamos a estas plataformas a realizar dicha asociación.
  2. La manipulación de estilo permite hacer prácticamente lo que quieras con esta estructura. En el ejemplo he puesto la cadena de texto contenida por la etiqueta SPAN a la que podemos incorporar estilos CSS (display: block, float, font-size, etc).
  3. Simplemente esta forma me resulta más lógica.

Emmanuelle de la fundación SIDAR nos da su opinión al respecto en este comentario.

Simples ventajas

Aparte de las consideraciones de accesibilidad (que las hay 🙂 ). No me digan que no resulta comodisimo hacer click en la etiqueta textual y que el foco se traslade al input donde vamos a introducir texto, o hacer click en un texto para que se marque el radio/check sin falta de atinar con el puntero en el cuadradito de turno.

Una vez más la usabilidad vuelve a estar en los pequeños detalles como este, y todo debido a que nos estamos aprovechando de la ya comentada ley de fitts.

Algunas dudas

Si todo es tan bueno, bonito y fácil ¿cuál es la razón por la que esta etiqueta es “poco” usada?.

A mi entender debería ser tan conocida como P y en parte por eso estoy escribiendo este post.

Por mencionar un ejemplo, last.fm en su formulario de registro usa la etiqueta en todos los campos asociados a inputs menos en el último (el radio con la nota legal). Ejemplos como este y algunos muy descabellados hay a centenares.

  • Hola, es mejor utilizar la forma explícita, pues algunas tecnologías asistivas tienen problemas con las formas implícitas (JAWS 7.10 y Window-Eyes 5.5 con Explorer 6.0 y Firefox 1.5)

    Por ello las WCAG 2.0 recomienda la forma explícita:
    H44: Using label elements to associate text labels with form controls (http://www.w3.org/TR/WCAG20-TECHS/H44.html)

    Un saludo,

  • Hola, yo uso la forma implícita, tal cual lo has indicado tú, ya que no solo, lo asocias implícitamente al hacer que el label contenga al control, sino que además añades el atributo for, de forma que queda asociado también de forma explicitamente.

    Muy buen post, de estos que te hacen pensar porque hacemos tal cosa.

    Saludos

    • Muchas gracias de nuevo Queli Coto.
      Navegando un poco he encontrado esto en la lista de accesibilidad: http://es.groups.yahoo.com/group/accesoweb/message/6255

      Justamente la pregunta es que forma usar, y hasta la mismisima Emmanuelle (de Sidar.org) recomienda la forma comentada.

      La cuestión es que se trata de un e-mail del 2005. Cuando WCAG2 era un borrador.

      En cualquier caso tampoco es un tema para obsesionarse porque ambas formas son (y creo que deben) ser válidas para cualquier dispositivo medianamente actual.

      Un saludo 😉

  • Claro que sigo el blog 🙂 pero no suelo comentar en ninguno a no ser que tenga algo realmente importante que aportar. Yo sigo decantandome por hacer caso a las WCAG 2.0 🙂

  • Bueno, entro en la conversación un poco tarde, pero estoy de acuerdo con Olga en que si las WCAG2 recomiendan la forma explícita, sea ésta la que se deba utilizar.

    Hay otra razón por la que diría que opto por la forma explícita, y es la que tiene que ver con la idea de superar tecnológicamente las versiones anticuadas de los dispositivos.

    No obstante es cierto que nos podemos encontrar con un detalle que le he leído a Emmanuelle respecto de considerar escenarios de utilización de clientes anticuados, pero entiendo que la generalidad (que me parece lo más razonable) es que estos casos se entiendan como un singularidad, fuera del objetivo de aplicación de una forma implícita, debiendo ser tratada de forma singular, específica y excepcional.

    Mis dos céntimos 🙂

  • Ese Dani!

    El argumento de la generalidad/singularidad es algo que convence.
    Definitivamente me paso a explicita, pero sobre todo por la idea de superar tecnológicamente las versiones anticuadas.

  • Jorge

    Una consulta, Tengo asociado un label a un check: ¿se puede alinear el texto asociado al label de manera vertical? Imaginad que es un texto de 10 lineas
    Muchas gracias.
    Jorge