Técnica ARIA WCAG 2.2
ARIA6Usar aria-label para proporcionar etiquetas a los objetos
En resumen
Hay elementos (menús de navegación repetidos, regiones, botones solo con icono, fórmulas matemáticas...) sin ningún texto visible en la página que sirva de etiqueta. Esta técnica muestra cómo darles un nombre con aria-label para que los lectores de pantalla lo anuncien. Recuerde que aria-label sustituye al nombre nativo (alt, label) y que aria-labelledby tiene prioridad sobre él; úselo solo cuando no haya texto visible al que referirse.
Ejemplo práctico
Barra de iconos de la cabecera de una tienda online (buscar, cesta y menú): botones que solo muestran un icono SVG y no tienen ningún texto en la página que pueda usarse como etiqueta.
Así no: Botones de icono sin nombre accesible
Los iconos están ocultos a las tecnologías de asistencia y el botón no tiene texto: el lector de pantalla anuncia tres veces «botón» sin decir qué hace cada uno. Para notarlo, recorra la barra con Tab con NVDA o VoiceOver activo.
<div class="barra">
<button type="button">
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="10" cy="10" r="6" fill="none" stroke="#0B2239" stroke-width="2"/><line x1="15" y1="15" x2="21" y2="21" stroke="#0B2239" stroke-width="2"/></svg>
</button>
<button type="button">
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M2 4h3l3 11h11l2-8H6" fill="none" stroke="#0B2239" stroke-width="2"/><circle cx="9" cy="20" r="1.5" fill="#0B2239"/><circle cx="18" cy="20" r="1.5" fill="#0B2239"/></svg>
</button>
<button type="button">
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 6h18M3 12h18M3 18h18" stroke="#0B2239" stroke-width="2"/></svg>
</button>
</div>
<style>
.barra { display: flex; gap: .5em; }
.barra button { background: #fff; border: 1px solid #744E9A; border-radius: 4px; padding: .4em; line-height: 0; }
.barra button: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í: Nombre accesible con aria-label
Cada botón recibe un aria-label que describe su función («Buscar», «Cesta», «Menú»). El icono sigue oculto con aria-hidden, así que el nombre procede solo de aria-label y no se duplica.
<div class="barra">
<button type="button" aria-label="Buscar">
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="10" cy="10" r="6" fill="none" stroke="#0B2239" stroke-width="2"/><line x1="15" y1="15" x2="21" y2="21" stroke="#0B2239" stroke-width="2"/></svg>
</button>
<button type="button" aria-label="Cesta">
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M2 4h3l3 11h11l2-8H6" fill="none" stroke="#0B2239" stroke-width="2"/><circle cx="9" cy="20" r="1.5" fill="#0B2239"/><circle cx="18" cy="20" r="1.5" fill="#0B2239"/></svg>
</button>
<button type="button" aria-label="Menú">
<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 6h18M3 12h18M3 18h18" stroke="#0B2239" stroke-width="2"/></svg>
</button>
</div>
<style>
.barra { display: flex; gap: .5em; }
.barra button { background: #fff; border: 1px solid #744E9A; border-radius: 4px; padding: .4em; line-height: 0; }
.barra button:focus-visible { outline: 3px solid #0B2239; outline-offset: 2px; }
</style>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Poner aria-label en elementos sin función, como div o span, donde está prohibido y los lectores de pantalla lo ignoran.
- Usar aria-label en un botón o enlace con texto visible diferente, de modo que el nombre no contiene la etiqueta visible (criterio 2.5.3).
- Etiquetas en inglés o heredadas del nombre del icono («search», «icon-cart») en una página en español.
- Varias regiones nav sin aria-label, o todas con el mismo, imposibles de distinguir en la lista de regiones.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
Tecnologías compatibles con Accessible Rich Internet Applications (WAI-ARIA).
Descripción
El propósito de esta técnica es proporcionar a los objetos una etiqueta que las tecnologías de asistencia puedan leer. El atributo aria-label proporciona la etiqueta textual de un objeto, como un botón. Cuando un lector de pantalla encuentra el objeto, lee el texto de aria-label, de modo que el usuario sabe de qué se trata.
Quien desarrolla debe tener en cuenta que las tecnologías de asistencia pueden ignorar aria-label cuando se usa aria-labelledby en el mismo objeto. Para más información sobre la jerarquía de asignación de nombres, consulte la sección accessible name and description computation de la recomendación Accessible Name And Description Computation. También debe tener en cuenta que el uso de aria-label anulará cualquier mecanismo nativo de asignación de nombre, como el alt de las imágenes o el label asociado a un campo de formulario mediante el atributo for.
Ejemplos
Distinguir regiones de navegación
El siguiente ejemplo muestra cómo podría usarse aria-label para distinguir dos regiones (landmarks) de navegación en un documento HTML, cuando hay más de dos regiones del mismo tipo en la misma página y no existe en ella ningún texto al que pueda hacerse referencia como etiqueta.
<div role="navigation" aria-label="Primary">
<ul>
<li>...a list of links here ...</li>
</ul>
</div>
<div role="navigation" aria-label="Secondary">
<ul>
<li>...a list of links here ...</li>
</ul>
</div>Identificar regiones genéricas
El siguiente ejemplo muestra cómo podría añadirse una región (landmark) genérica "region" a un portlet meteorológico. No existe en la página ningún texto al que pueda hacerse referencia como etiqueta, así que se etiqueta con aria-label.
<div role="region" aria-label="weather portlet">
...
</div>Proporcionar una etiqueta a contenido matemático
A continuación se muestra un ejemplo de una función en MathML, que usa el rol math, una etiqueta adecuada y la representación en MathML:
<div role="math" aria-label="6 divided by 4 equals 1.5">
<math xmlns="https://www.w3.org/1998/Math/MathML">
<mfrac>
<mn>6</mn>
<mn>4</mn>
</mfrac>
<mo>=</mo>
<mn>1.5</mn>
</math>
</div>Pruebas
Procedimiento
Para cada elemento en el que esté presente un atributo aria-label.
- Examinar si la descripción textual etiqueta con precisión el objeto, describe su propósito o proporciona información equivalente.
Resultados esperados
- La comprobación n.º 1 es verdadera.
Recursos
- HTML Accessibility API Mappings 1.0
- WAI-ARIA Authoring Practices Guide (guía de prácticas de autor de WAI-ARIA)
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 ARIA6 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.
