aria-label: cuándo usarlo y cuándo evitarlo

Qué hace el atributo aria-label

Según MDN, aria-label define una cadena de texto que puede servir para nombrar un elemento, siempre que su rol no prohíba nombrarlo. El valor es un texto simple, que se convierte en el nombre accesible del objeto.

La mayoría de los contenidos ya reciben un nombre accesible sin ARIA. Por defecto, el nombre de un botón es el contenido situado entre las etiquetas <button> y </button>, el de una imagen es el valor de su atributo alt y el de un campo de formulario es el texto del elemento <label> asociado. aria-label solo debería usarse cuando ninguna de estas opciones está disponible o el nombre por defecto no es adecuado.

Tenga en cuenta que el contenido de aria-label no se muestra fuera de las tecnologías de apoyo. Por eso MDN aconseja hacer visible para todos la información importante.

• aria-label funciona con elementos HTML semánticos normales: no está limitado a elementos que tengan un rol ARIA.
• En JavaScript, la propiedad Element.ariaLabel refleja el valor del atributo (también la propiedad ElementInternals.ariaLabel).
• aria-label y aria-labelledby tienen el mismo objetivo: proporcionar un nombre accesible.

Cuándo usar aria-label: botones con icono y puntos de referencia

El caso clásico es el botón que solo contiene un icono. Sin texto no tiene nombre accesible, y un usuario de lector de pantalla no puede saber para qué sirve. En el ejemplo de MDN que sigue, el botón solo contiene un icono SVG y aria-label="Close" («Cerrar») indica su función; lo hemos adaptado al español. El SVG lleva aria-hidden="true" y focusable="false".

MDN precisa que, aunque aria-label puede usarse en cualquier elemento que pueda tener un nombre accesible, en la práctica solo es compatible con elementos interactivos, widgets, puntos de referencia (landmarks), imágenes e iframes. Está pensado para elementos como enlaces, vídeos, controles de formulario y elementos con rol de punto de referencia o de widget, cuando no existe ninguna etiqueta visible en el DOM.

En los puntos de referencia, aria-label permite nombrar un elemento con rol de landmark cuando no existe ninguna etiqueta visible en el DOM. Si existe un texto visible que lo etiquete, referéncielo con aria-labelledby, como se explica más abajo.

<!-- Botón con icono (adaptado del ejemplo de MDN) -->
<button aria-label="Cerrar">
  <svg aria-hidden="true" focusable="false" width="17" height="17"
       xmlns="http://www.w3.org/2000/svg">
    <path d="…" fill="black" />
  </svg>
</button>

Cuándo no usar aria-label

Primer caso: el elemento ya tiene un texto visible que lo etiqueta. MDN es explícito: si hay un texto visible que etiqueta el elemento, use aria-labelledby. aria-label está reservado a los casos en que el texto que podría nombrar el elemento no es visible.

Segundo caso: el HTML ya proporciona el nombre. Si ha dado un title a un <iframe>, un atributo alt a una <img> o un <label> a un <input>, aria-label no es necesario. Y si aun así está presente, prevalece sobre el title del iframe, el alt de la imagen o el texto del <label> como nombre accesible. Un aria-label superfluo prevalece, por tanto, sobre la etiqueta nativa.

Tercer caso: ciertos roles estructurales que no pueden recibir nombre. Ni aria-label ni aria-labelledby deben usarse con roles estructurales en línea como code, term o emphasis, ni con roles no expuestos a la API de accesibilidad, entre ellos none. MDN enumera los roles en los que aria-label no es compatible:

• caption, code, definition, deletion, emphasis
• generic, insertion, mark, paragraph
• presentation / none, strong, subscript, superscript
• suggestion, term, time

<!-- Evitar: la etiqueta ya existe y aria-label la sustituye -->
<label for="email-1">Correo electrónico</label>
<input id="email-1" type="email" aria-label="Campo">

<!-- Correcto: el <label> es suficiente -->
<label for="email-2">Correo electrónico</label>
<input id="email-2" type="email">

¿aria-label o aria-labelledby?

Ambos atributos proporcionan un nombre accesible. La diferencia está en el origen del texto: aria-labelledby hace referencia a un texto ya presente en el DOM, mientras que aria-label contiene el propio texto. MDN recomienda encarecidamente priorizar aria-labelledby cuando existe una etiqueta visible que se puede referenciar con una experiencia de usuario aceptable. Si no hay ningún nombre visible que referenciar, use aria-label.

No use nunca ambos en el mismo elemento: aria-labelledby prevalece sobre aria-label cuando los dos están presentes.

Por último, aria-label no sirve para dar instrucciones. Para añadir indicaciones o aclarar la interfaz, MDN aconseja un texto visible asociado mediante aria-describedby o aria-description. Las instrucciones deben ser accesibles para todos los usuarios, no solo para quienes usan lector de pantalla, y lo ideal es una interfaz más intuitiva.

La primera regla de ARIA: primero el HTML nativo

El documento «Using ARIA» del W3C formula así la primera regla de uso de ARIA: si puede usar un elemento o atributo HTML nativo que ya incorpora la semántica y el comportamiento que necesita, hágalo, en lugar de cambiar el propósito de un elemento añadiéndole un rol, estado o propiedad ARIA para hacerlo accesible.

Llevado a aria-label, este principio invita a buscar primero la solución nativa. MDN va en la misma línea: con un title en un <iframe>, un alt en una <img> o un <label> para un <input>, aria-label no es necesario. aria-label sirve cuando no hay nombre nativo disponible, o el nombre por defecto no es adecuado, y no se puede referenciar ningún texto visible, como en el botón con icono visto antes.

El W3C cita tres excepciones a esta primera regla: la funcionalidad existe en HTML pero no está implementada, las restricciones de diseño visual descartan el elemento nativo, o la funcionalidad aún no existe en HTML. Las demás reglas del documento piden no cambiar la semántica nativa salvo que sea realmente necesario, hacer que todos los controles ARIA interactivos se puedan usar con el teclado y no poner role="presentation" ni aria-hidden="true" en un elemento enfocable.

Nota: «Using ARIA» se publica ahora como Discontinued Draft (ya no está previsto que avance ni que se mantenga). El W3C remite a la ARIA Authoring Practices Guide (APG) para más orientación sobre el uso de ARIA en componentes y patrones de interfaz.

Revisar sus aria-label en la práctica

Para auditar un sitio, revise cada elemento que lleve aria-label y hágase estas preguntas, extraídas de las recomendaciones anteriores.

• ¿El elemento ya tiene un nombre nativo (alt, <label>, title del iframe)? Si es así, aria-label no es necesario y prevalecería sobre él.
• ¿Existe un texto visible que etiquete el elemento? Si es así, prefiera aria-labelledby.
• ¿El rol del elemento admite un nombre (no paragraph, generic, code, strong, etc.)?
• ¿Están presentes a la vez aria-label y aria-labelledby? Conserve solo uno.
• ¿El texto de aria-label contiene una instrucción? Muévala a un texto visible vinculado con aria-describedby.
• ¿Queda algún botón o enlace con icono sin nombre? Si ningún texto visible del DOM puede nombrarlo, añádale un aria-label; si existe, use aria-labelledby.

Preguntas frecuentes

Más sobre el tema en Conformly

• Corregir un botón sin nombre accesible en HTML
• Corregir un enlace sin nombre accesible en HTML
• Criterio RGAA 7.1 sobre scripts y tecnologías de apoyo
• Todas las guías de corrección RGAA por framework

Fuentes

Este artículo se basa en las fuentes oficiales citadas al final de la página.

• MDN — aria-label
• W3C — Using ARIA