Técnica ARIA WCAG 2.2
ARIA16Dar nombre a los controles con aria-labelledby
Nombre oficial en el W3C: Usar aria-labelledby para proporcionar un nombre a los controles de interfaz de usuario
En pocas palabras
A veces un campo o un control no tiene etiqueta propia, pero cerca hay un texto visible que explica para qué sirve. Con aria-labelledby se usa ese texto como nombre del control. También se pueden juntar varios textos de la página para formar un nombre completo.
Por qué es importante
Quien ve la página adivina para qué sirve un campo por lo que tiene alrededor. Un lector de pantalla (programa que lee en voz alta la pantalla) no puede: necesita que el campo tenga un nombre propio.
Sin nombre, la persona oye «campo de texto» y no sabe qué escribir. Con aria-labelledby, oye el mismo texto que ven los demás.
Cómo se hace
- Siempre que pueda, use
<label>: al pulsar la etiqueta, el foco va al campo. Conaria-labelledbyeso no ocurre. - Use
aria-labelledbycuando no haya sitio para una etiqueta o cuando el nombre salga de un texto que ya existe: un título, el texto de un botón, una celda de tabla. - Dé un
idúnico al texto que hará de nombre. - Añada al control
aria-labelledbycon eseid. Si son varios textos, ponga losidseparados por espacios, en el orden en que deben leerse. - Tenga en cuenta que
aria-labelledbymanda sobre<label>yaria-label. Si los combina, solo se lee el suyo.
Ejemplo práctico
Buscador de la cabecera de la web de un ayuntamiento. Por diseño, no tiene etiqueta visible. El único texto que explica el campo es el del botón «Buscar», que está al lado.
Así no: Campo de búsqueda sin nombre
A la vista se entiende gracias al botón. Pero el campo no tiene etiqueta ni nombre para el lector de pantalla. Solo se oye «edición» o «campo de texto», sin decir para qué sirve. Para notarlo, active NVDA o VoiceOver y llegue al campo con el tabulador.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<form role="search" action="#" class="buscador">
<input type="search" id="q" name="q">
<button type="submit" id="btn-buscar">Buscar</button>
</form>
<style>
.buscador { display: flex; gap: .5em; }
.buscador input { flex: 1; padding: .4em; border: 1px solid #555; }
.buscador button { background: #744E9A; color: #fff; border: 0; padding: .4em 1em; }
.buscador :focus-visible { outline: 3px solid #0B2239; outline-offset: 2px; }
</style>Así sí: Campo que toma su nombre del botón con aria-labelledby
Se añade aria-labelledby="btn-buscar" al campo. Su nombre pasa a ser el texto del botón: «Buscar». No hace falta repetir texto en pantalla. Además, el nombre coincide con lo que se ve (criterio 2.5.3).
Pruébelo aquí:
Ver el código del ejemplo correcto
<form role="search" action="#" class="buscador">
<input type="search" id="q" name="q" aria-labelledby="btn-buscar">
<button type="submit" id="btn-buscar">Buscar</button>
</form>
<style>
.buscador { display: flex; gap: .5em; }
.buscador input { flex: 1; padding: .4em; border: 1px solid #555; }
.buscador button { background: #744E9A; color: #fff; border: 0; padding: .4em 1em; }
.buscador :focus-visible { outline: 3px solid #0B2239; outline-offset: 2px; }
</style>Cómo comprobarlo
Errores frecuentes en auditorías
- Apuntar a un id que no existe o está repetido. El control se queda sin nombre o con uno equivocado.
- Usar aria-labelledby en un div o span sin función. Ahí no se permite dar nombre y los lectores de pantalla lo ignoran.
- Apuntar a un texto distinto del que se ve junto al control. Así se incumple el criterio 2.5.3 (etiqueta en el nombre).
- Combinar aria-labelledby con un label visible diferente. aria-labelledby tiene prioridad y sustituye al label.
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica ARIA16 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Tecnologías que admiten Accessible Rich Internet Applications (WAI-ARIA).
Descripción
El propósito de esta técnica es proporcionar nombres para los controles de interfaz de usuario que puedan ser leídos por las tecnologías de asistencia. WAI-ARIA ofrece una forma de asociar un texto a una sección, un dibujo, un elemento de formulario, una fotografía, etc., mediante la propiedad aria-labelledby. Esta técnica usa el atributo aria-labelledby para asociar un control de interfaz de usuario, como un campo de formulario, con un texto de la página que lo etiqueta.
Al igual que aria-describedby, aria-labelledby puede aceptar varios id para apuntar a otros elementos de la página mediante una lista separada por espacios. Esta capacidad hace que aria-labelledby sea especialmente útil en situaciones en las que las personas videntes usan información del contexto circundante para identificar un control. Usar aria-labelledby para concatenar una etiqueta a partir de varios nodos de texto contiene más ejemplos de situaciones en las que los nombres se crean a partir de varios otros elementos de texto de la página.
Aunque la función de aria-labelledby parece similar a la del elemento label nativo de HTML, existen algunas diferencias:
-
aria-labelledbypuede hacer referencia a más de un elemento de texto;labelsolo puede hacer referencia a uno. -
aria-labelledbypuede usarse en una gran variedad de elementos, mientras que el elementolabelsolo puede usarse en elementos de formulario. - Al hacer clic en un
label, el campo de formulario asociado recibe el foco. Esto no ocurre conaria-labelledby. Si se necesita este comportamiento, uselabelo implemente esta funcionalidad mediante scripts.
Ejemplos
Etiquetar un campo de texto sencillo
El siguiente es un ejemplo de aria-labelledby usado en un campo de texto sencillo para proporcionar una etiqueta en una situación en la que no hay texto disponible para una etiqueta dedicada, pero sí hay otro texto en la página que puede usarse para etiquetar con precisión el control.
<input name="searchtxt" type="text" aria-labelledby="searchbtn">
<input name="searchbtn" id="searchbtn" type="submit" value="Search">Etiquetar un deslizador
A continuación se muestra un ejemplo de aria-labelledby usado para proporcionar una etiqueta a un control deslizante. En este caso, el texto de la etiqueta se selecciona dentro de una cadena de texto adyacente más larga. Tenga en cuenta que este ejemplo está simplificado para mostrar únicamente la relación de etiquetado; quienes implementen controles personalizados también deben asegurarse de que los controles cumplen los demás criterios de conformidad.
<p>Please select the <span id="mysldr-lbl">number of days for your trip</span></p>
<div id="mysldr" role="slider" aria-labelledby="mysldr-lbl"></div>Una etiqueta a partir de varias fuentes
El siguiente ejemplo de aria-labelledby con varias referencias usa el elemento label. Para más detalles sobre cómo concatenar varias fuentes de información en una etiqueta con aria-labelledby, consulte la técnica Usar aria-labelledby de ARIA para concatenar una etiqueta a partir de varios nodos de texto.
<label id="l1" for="f3">Notify me</label>
<select name="amt" id="f3" aria-labelledby="l1 f3 l2">
<option value="1">1</option>
<option value="2">2</option>
</select>
<span id="l2">days in advance</span>Nota: el uso del elemento label se incluye por varias razones. Si el usuario hace clic en el texto del elemento label, el campo de formulario correspondiente recibe el foco, lo que hace que el objetivo del clic sea mayor para las personas con problemas de destreza. Además, el elemento label siempre se expone a través de la API de accesibilidad. Podría haberse usado un span; sin embargo, un span perdería la ventaja de la zona de clic más amplia.
Pruebas
Procedimiento
Para cada elemento de control de interfaz de usuario en el que esté presente un atributo aria-labelledby:
- Comprobar que el valor del atributo
aria-labelledbyes elidde un elemento o una lista deidseparados por espacios de la página web. - Comprobar que el texto del elemento o elementos referenciados etiqueta con precisión el control de interfaz de usuario.
Resultados esperados
- Las comprobaciones n.º 1 y n.º 2 son verdaderas.
Recursos
- WAI-ARIA Authoring Practices Guide (guía de prácticas de autor de WAI-ARIA)
- HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation (cálculo del nombre y la descripción accesibles)
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica ARIA16 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.