Técnica ARIA WCAG 2.2

ARIA14Dar nombre con aria-label a un control que no tiene texto visible

Nombre oficial en el W3C: Usar aria-label para proporcionar una etiqueta invisible cuando no se puede usar una etiqueta visible

En pocas palabras

Algunos botones solo muestran un símbolo, como una «×» para cerrar o una lupa para buscar. El atributo aria-label les da un nombre en texto que los lectores de pantalla leen en voz alta. Así la persona sabe para qué sirve el control aunque no pueda verlo.

Por qué es importante

Quien ve la pantalla entiende por el contexto que la «×» cierra una ventana. Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) no interpreta dibujos. Solo lee nombres en texto.

Si el botón no tiene nombre, la persona oye «botón» y nada más. No sabe si cierra, borra o envía. Con aria-label="Cerrar" oye «Cerrar, botón».

Cómo se hace

Use aria-label solo cuando no haya un texto visible que pueda servir de nombre. Si lo hay, es mejor <label> o aria-labelledby.
Póngalo en elementos que admiten nombre: botones, enlaces, campos, regiones o elementos con un role interactivo. En un <div> o <span> sin función, los lectores de pantalla lo ignoran.
Escriba un texto breve que diga qué hace el control: «Cerrar», «Buscar», «Abrir menú». No describa el dibujo («Aspa», «Lupa»).
No añada el tipo de control al texto. El lector ya dice «botón» o «enlace».
También sirve en controles hechos a medida que no pueden usar <label>, como un editor creado con <div contenteditable>.
Este texto no se ve en pantalla. Al traducir o revisar la web, no lo olvide.

Cómo comprobarlo

Busque en el código los elementos con aria-label.
Lea su valor y confirme que explica para qué sirve el control.
Compruebe que el elemento admite nombre (botón, enlace, campo…) y no es un <div> genérico.
Recorra la página con el tabulador y un lector de pantalla (NVDA o VoiceOver). Cada control debe anunciarse con su nombre, por ejemplo «Cerrar, botón».
En las herramientas del navegador (F12), pestaña Accesibilidad, revise el nombre («Name») del elemento.

Ejemplo

Ventana de aviso con un botón de cierre que solo muestra «×».

<div role="dialog" aria-labelledby="tit-aviso">
  <h2 id="tit-aviso">Cita confirmada</h2>
  <p>Su cita es el lunes 3 a las 10:00.</p>
  <button type="button" aria-label="Cerrar">×</button>
</div>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica ARIA14 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

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-label describe 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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica ARIA14 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.