La importancia de las etiquetas

13/11/2020

Todo elemento de control debe tener una etiqueta. Esta debe ser visible para ayudar a todas las personas a entender el propósito del control y debe estar programáticamente asociada.

Esta última parte suele ser pasada por alto, pero es muy importante que la etiqueta esté asociada para quitar toda ambigüedad sobre el propósito del control. Una persona vidente puede inferir la relación entre etiqueta y control basándose en indicadores visuales como la proximidad de los elementos. Al establecer esta relación de manera programática, nos aseguramos de que sea percibida por todos, no solo personas sin discapacidades visuales.

Existen distintos métodos para asociar etiquetas, a continuación veremos un resumen de ellas, explicamos cuál es la manera correcta de asociarlas y cuándo son apropiados los distintos métodos.

Métodos de asociación

  • Usando la etiqueta label
  • Usando la propiedad aria-labelledby
  • Usando la propiedad aria-label

label

Label es un elemento nativo de html y su propósito es darle un nombre a un control. Existen dos tipos de asociaciones para un label.

Asociación explícita

La asociación explícita se hace a través del atributo for. El valor del atributo debe ser igual al valor del atributo id en el control y debe ser único en la página. Si existen valores duplicados pueden generar un conflicto y las etiquetas podrían quedar asociadas al control incorrecto.

<label for="foo">Nombre<label> <input type="text" id="foo" />

Asociación implícita

La asociación implícita se hace envolviendo el elemento label sobre el control.

<label> Nombre <input type="text" /> </label>

Existen saliendo del sitio: problemas en software de reconocimiento de voz como saliendo del sitio: Dragon y saliendo del sitio: Voice control donde no puedes seleccionar un control por el nombre visible si la asociación es implícita. Por esto es recomendable utilizar una asociación explícita siempre que sea posible ya que es más robusta en cuanto soporte de tecnologías de asistencia.

Recomendación

El uso de html semántico, es decir, usar elementos acorde a su significado, y no a la forma en que se ven visualmente es casi siempre recomendado como una primera opción.

El elemento label asociado explícitamente tiene además el beneficio adicional de agrandar el área de enfoque. El usuario puede hacer click tanto en la etiqueta como en el control para enfocarlo, lo cual podría ser útil para personas con discapacidades motoras.

Una de las limitaciones del elemento label es que solo se puede usar como etiqueta para 1 elemento. Al crear controles personalizados, a veces es necesario crear asociaciones a múltiples de ellos.

Es además importante tener en cuenta que no todos los elementos son etiquetables, y por tanto un label no debe ser usado en ciertos casos. Los elementos etiquetables son: <button>, <input> (todos excepto los que tengan un atributo type con valor hidden), <meter>, <output>, <progress>, <select> y <textarea>.

A menos que exista un buen motivo para no usarlo como por ejemplo cuando tienes un control personalizado, utilizar un elemento label con una asociación explícita es la mejor opción.

aria-labelledby

aria-labelledby es un atributo ARIA, en inglés: Accessible Rich Internet Applications , que sirve para darle un nombre accesible a un elemento.

La asociación se hace de manera similar al elemento label, pero con la diferencia de que una etiqueta label nombra a un elemento, mientras que aria-labelledby identifica a un elemento que es nombrado por otro.

// El control input está siendo nombrado por el botón <input type="text" aria-labelledby="foo" /> <button id="foo">Buscar</button>

El valor del atributo aria-labelledby debe ser igual al valor del atributo id y debe ser único en la página. Si existen valores duplicados pueden generar un conflicto y las etiquetas podrían quedar asociadas al elemento incorrecto.

Otra diferencia es que aria-labelledby puede hacer referencia a múltiples elementos, lo cual resulta útil en algunos casos. Por ejemplo, si creamos un control personalizado del tipo “listbox” y queremos que el nombre accesible del botón sea el resultado de la etiqueta y la opción seleccionada.

<span id=”foo”>Estado civil<span> <div> <button id=”bar” aria-labelledby=”foo bar”>casado<button> <ul role=”listbox”> <li role=”option”>casado<li> <li role=”option”>soltero</li> </ul> </div>

Si utilizaramos un label con asociación explícita, el nombre accesible del botón sería sólo el nombre de la etiqueta (estado civil). Esto debido a que en la calculación del nombre accesible, el elemento label toma precedencia al texto del botón y no son posible asociaciones múltiples. Utilizando aria-labelledby podemos concatenar múltiples valores con el atributo id y lograr el resultado esperado, el nombre accesible del botón sería: Estado civil casado.

aria-labelledby tiene el beneficio adicional de poder usarlo no solo en elementos nativos que son etiquetables. Sin embargo, el soporte del atributo es más robusto en elementos interactivos como enlaces y controles de entrada. Por esto es recomendable no usar el atributo en elementos que no sean semánticos como un <div> o un <span> a menos que contengan un rol ARIA.

Recomendación

Usar cuando no sea posible utilizar el elemento label.

aria-label

aria-label es otro atributo ARIA que sirve para darle un nombre accesible a un elemento. A diferencia de aria-labelledby, el uso de aria-label le da al control un nombre accesible invisible y solo estará disponible para alguien usando un lector de pantalla.

<input type=”text” aria-label=”buscar” />

Uno de los pocos casos en que es aceptable utilizar aria-label en un elemento de control de entrada es en un buscador con un botón con ícono de una lupa.

<input type=”search” aria-label=”buscar recetas” /> <button aria-label=”buscar”> <icono aria-hidden=”true”> // pseudo código como ejemplo </button>

El motivo es que el ícono de la lupa es reconocido universalmente y por tanto sirve como reemplazo a una etiqueta visual.

Recomendación

Usar con cuidado ya que las etiquetas deben ser visibles para que todos entiendan el propósito del control. Al no ser así se falla al saliendo del sitio: criterio de conformidad 3.3.2 - Etiquetas o instrucciones (en inglés)