Técnica ARIA WCAG 2.2
ARIA14Usar aria-label para proporcionar una etiqueta invisible cuando no se puede usar una etiqueta visible
En resumen
Hay controles cuyo propósito se entiende a la vista pero no tienen texto, como el botón «×» que cierra un diálogo. Quien usa un lector de pantalla necesita un nombre accesible que diga qué hace ese control. Esta técnica muestra cómo asignarlo con el atributo aria-label cuando el diseño no permite una etiqueta visible o cuando el control no es etiquetable con un elemento label, por ejemplo un div editable.
Aplicabilidad
Tecnologías que admiten Accessible Rich Internet Applications (WAI-ARIA).
Descripción
Para las personas videntes, el contexto y el aspecto visual de un elemento pueden ofrecer pistas suficientes para determinar su propósito. Un ejemplo es el símbolo «×» que suele usarse en la esquina superior derecha de los diálogos para indicar el control que los cierra. Aunque visualmente quede claro que el botón con el símbolo «×» cierra el diálogo, quienes usan tecnologías de asistencia dependen de nombres accesibles que comuniquen con claridad el propósito de los componentes, en este caso «Cerrar».
Cuando no hay disponible una etiqueta de texto visible clara por decisiones de diseño, el nombre accesible puede establecerse en su lugar mediante el atributo aria-label, siempre que el elemento tenga, implícita o explícitamente, una función (role) que admita recibir nombre.
El atributo aria-label también puede usarse para proporcionar un nombre accesible a controles personalizados que no son elementos etiquetables y que, por tanto, no pueden usar un elemento <label> con el atributo for.
Por ejemplo, aria-label o aria-labelledby son la forma más adecuada de proporcionar un nombre accesible cuando se hace editable un elemento <div> mediante el atributo contentEditable, en lugar de elementos de formulario nativos como <input type="text"> o <textarea>, con el fin de ofrecer una experiencia de edición de texto más rica.
Ejemplos
Un botón de cierre en un diálogo
En una página, un botón muestra un diálogo (un elemento <div>) con información adicional. El elemento de «cierre» se implementa como un <button> que contiene únicamente el símbolo «×». La propiedad aria-label="close" se usa para proporcionar un nombre accesible al botón.
<dialog id="dialog">
This is the content of the dialog.
<button aria-label="Close">×</button>
</dialog>Ejemplo funcional: Ejemplo de botón de cierre.
Un número de teléfono con varios campos
<div role="group" aria-labelledby="groupLabel">
<span id="groupLabel">Work Phone</span>
+<input autocomplete="tel-country-code" type="number" aria-label="country code">
<input autocomplete="tel-area-code" type="number" aria-label="area code">
<input autocomplete="tel-local" type="number" aria-label="subscriber number">
</div>Pruebas
Procedimiento
Para los elementos que usan el atributo aria-label:
- Comprobar que el valor del atributo
aria-labeldescribe adecuadamente el propósito del elemento en el que se requiere la entrada del usuario.
Resultados esperados
- La comprobación n.º 1 es verdadera.
Recursos
- WAI-ARIA Authoring Practices Guide (guía de prácticas de autor de WAI-ARIA)
- HTML Accessibility API Mappings
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 ARIA14 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.
