aria-label

Cuándo usarlo

Cuando un control no tiene texto visible — botones solo con icono, campos de búsqueda con únicamente el glifo de una lupa, botones de cerrar (×), iconos de redes sociales. La cadena que se introduce en aria-label se convierte en el nombre accesible del elemento, y los lectores de pantalla la anuncian en lugar de cualquier texto interno.

El equivalente HTML nativo es el elemento <label> para los campos de formulario, o el texto visible de un botón. Se debe recurrir a aria-label únicamente cuando ninguna de esas opciones es posible.

Cómo funciona

Acepta una única cadena de texto. El valor de aria-label reemplaza cualquier texto visible dentro del elemento — el nombre accesible es lo que escuchan los usuarios de tecnologías de apoyo, pero es invisible para los usuarios videntes. Esa asimetría es el origen de la mayoría de los fallos con este atributo.

La cadena no se traduce automáticamente. Si el sitio admite varios idiomas, el valor de aria-label debe localizarse como cualquier otra cadena de la interfaz. Los lectores de pantalla también tratan el valor como texto sin formato — sin HTML, sin saltos de línea, sin marcado.

Si el elemento tiene texto visible, se prefiere aria-labelledby apuntando a ese texto, de modo que la etiqueta visible y el nombre accesible permanezcan sincronizados.

Fallos habituales

• Poner aria-label="Haga clic aquí" en un botón que ya dice «Enviar pedido» — el texto visible queda oculto para las tecnologías de apoyo, y el usuario escucha algo incorrecto.
• Infringir el criterio de conformidad WCAG 2.5.3 «Etiqueta en el nombre»: aria-label="Enviar" en un botón cuyo texto visible dice «Enviar pedido» impide que un usuario de control por voz diga «clic en Enviar pedido» para activarlo.
• Añadir aria-label a un elemento no interactivo como un <div> o un <span> — la mayoría de los navegadores lo ignoran porque el elemento no tiene un rol que admita nombre.
• Dejar el valor sin traducir cuando el resto de la página está en otro idioma.
• Usar aria-label en lugar de un <label> real en un campo de formulario, perdiendo la capacidad de enfocar el campo al hacer clic en la etiqueta.
• Incluir instrucciones en aria-label en lugar de en aria-describedby. El nombre debe ser breve; el texto de ayuda va en la descripción.

Ejemplo

<!-- Botón solo con icono: sin texto visible, aria-label es obligatorio -->
<button type="button" aria-label="Cerrar diálogo">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<!-- Texto visible + icono: NO se debe usar aria-label aquí -->
<button type="button">
  <svg aria-hidden="true" focusable="false">…</svg>
  Cerrar diálogo
</button>