Técnica ARIA WCAG 2.2
ARIA16Usar aria-labelledby para proporcionar un nombre a los controles de interfaz de usuario
En resumen
Muchos controles de formulario, como campos de texto o deslizadores, se entienden a la vista por el texto que los rodea, pero un lector de pantalla no los relaciona automáticamente con él. Esta técnica usa aria-labelledby para asociar el control con uno o varios textos ya presentes en la página y darle así un nombre accesible. Es útil cuando no se puede usar un elemento label dedicado o cuando el nombre debe combinar varios fragmentos de texto.
Ejemplo práctico
Buscador de la cabecera de la web de un ayuntamiento: por diseño no hay etiqueta visible, y el único texto que identifica el campo es el del botón «Buscar» que tiene al lado.
Así no: Campo de búsqueda sin nombre accesible
Visualmente se entiende por el botón contiguo, pero el campo no tiene etiqueta ni nombre accesible: el lector de pantalla solo anuncia «edición» o «campo de texto» y no dice para qué sirve. Para notarlo, tabule hasta el campo con NVDA o VoiceOver activo.
<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>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Campo etiquetado con aria-labelledby apuntando al botón
Se añade aria-labelledby="btn-buscar" al campo: su nombre accesible pasa a ser el texto visible del botón, «Buscar», sin duplicar texto en pantalla y coincidiendo con lo que se ve (criterio 2.5.3).
<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>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- aria-labelledby que apunta a un id inexistente o duplicado, con lo que el control queda sin nombre o con un nombre erróneo.
- Usar aria-labelledby en un div o span sin función, donde está prohibido asignar nombre y los lectores de pantalla lo ignoran.
- Referenciar un texto distinto del que se ve junto al control, incumpliendo el criterio 2.5.3 (etiqueta en el nombre).
- Combinar aria-labelledby con un label visible diferente, sin saber que aria-labelledby tiene prioridad y sustituye al label.
Técnica completa: traducción al español del texto 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 las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica ARIA16 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
