Addaw, ir a inicio Donar

Técnica ARIA WCAG 2.2

ARIA6Dar nombre a un elemento con aria-label cuando no hay texto visible

Nombre oficial en el W3C: Usar aria-label para proporcionar etiquetas a los objetos

En pocas palabras

El atributo aria-label da un nombre invisible a un elemento: un botón que solo tiene un icono, un menú o una zona de la página. El lector de pantalla lee ese nombre para que la persona sepa qué es. Se usa cuando en la página no hay ningún texto visible que sirva de nombre.

Por qué es importante

Muchas webs usan iconos sin texto: la lupa del buscador, la cesta o las tres rayas del menú. Quien ve la pantalla los reconoce por el dibujo. Un lector de pantalla (programa que lee en voz alta la pantalla), en cambio, solo dice «botón».

También ayuda cuando hay dos menús en la misma página. Con nombres como «Menú principal» y «Menú del pie», la persona sabe en cuál está.

Cómo se hace

  1. Añada aria-label con un texto corto que diga qué hace o qué es el elemento, por ejemplo aria-label="Buscar".
  2. Úselo en elementos que admiten nombre: botones, enlaces, campos, regiones como <nav> o elementos con un role. En un <div> o <span> sin rol no funciona.
  3. Si ya hay un texto visible que sirve de nombre, use mejor <label> o aria-labelledby.
  4. Recuerde que aria-label sustituye al nombre propio del elemento, como el alt de una imagen o el <label> de un campo.
  5. Si el elemento tiene también aria-labelledby, este gana y aria-label se ignora.
  6. Escriba el texto en el idioma de la página y sin la palabra «botón»: el lector ya anuncia el tipo.

Ejemplo práctico

Cabecera de una tienda online con tres botones: buscar, cesta y menú. Cada botón muestra solo un icono SVG. En la página no hay ningún texto que pueda servir de nombre a esos botones.

Así no: Botones de icono sin nombre

Los iconos están ocultos para los lectores de pantalla y los botones no tienen texto. Por eso el lector dice «botón» tres veces, sin explicar qué hace cada uno. Para notarlo, recorra la barra con la tecla Tab y NVDA o VoiceOver activados.

Captura de pantalla del ejemplo incorrecto: Botones de icono sin nombre
Así se ve el ejemplo incorrecto.

La demostración contiene, a propósito, el error de accesibilidad que se explica.

Ver el código del ejemplo incorrecto
<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>

Así sí: Botones con nombre gracias a aria-label

Cada botón lleva un aria-label que dice su función: «Buscar», «Cesta» y «Menú». El icono sigue oculto con aria-hidden. Así el nombre sale solo de aria-label y no se repite.

Pruébelo aquí:

Ver el código del ejemplo correcto
<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>

Cómo comprobarlo

Lector de pantalla (NVDA o VoiceOver)

  1. Recorra la barra con la tecla Tab y escuche cómo se anuncia cada botón.
  2. Compruebe que el texto de aria-label dice con exactitud qué hace el botón.

Debería anunciar: «Buscar, botón»; «Cesta, botón»; «Menú, botón»

Herramientas del navegador

  1. Abra las herramientas de desarrollo (F12), vaya al panel «Accesibilidad» y seleccione cada botón.
  2. Compruebe que el nombre («Name») sale de aria-label y no está vacío.
  3. Compruebe que el botón no tiene también aria-labelledby. Si lo tuviera, ganaría a aria-label y este se ignoraría.

Teclado

  1. Recorra los botones con la tecla Tab. Cada uno debe mostrar un indicador de foco visible, es decir, el recuadro que marca dónde está.

Validación automática

  1. axe DevTools detecta los botones sin nombre del ejemplo incorrecto (regla button-name). WAVE los marca como «Empty button».
  2. Estas herramientas no saben si el texto de aria-label es adecuado. Un aria-label="icono" o «botón 1» pasa la prueba automática.

Errores frecuentes en auditorías

  • Poner aria-label en un div o un span sin función. Ahí no está permitido y los lectores de pantalla lo ignoran.
  • Poner en un botón o enlace un aria-label distinto de su texto visible. El nombre debe contener el texto visible (criterio 2.5.3).
  • Dejar nombres en inglés o copiados del nombre del icono («search», «icon-cart») en una página en español.
  • Tener varias regiones nav sin aria-label, o todas con el mismo. Así no se pueden distinguir en la lista de regiones.
Ver el texto completo del W3C (traducción al español)

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.

  1. 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

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 ARIA6 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.