Los botones deben tener texto perceptible

Cuando un botón carece de un nombre accesible, las tecnologías de asistencia como los lectores de pantalla solo pueden anunciarlo de forma genérica — por ejemplo, como “botón” — sin ninguna indicación de su propósito. Esto es una barrera crítica para las personas que son ciegas o sordociegas, ya que dependen completamente de nombres determinados programáticamente para entender e interactuar con los controles de la interfaz. Un usuario con visión podría inferir el propósito de un botón a partir de un icono o contexto visual, pero sin un nombre basado en texto, esa información se pierde completamente para los usuarios de tecnologías de asistencia.

Esta regla se corresponde con el Criterio de Éxito 4.1.2 de WCAG 2.0, 2.1 y 2.2: Nombre, Función, Valor (Nivel A), que requiere que todos los componentes de la interfaz de usuario tengan un nombre que pueda determinarse programáticamente. También está cubierto por la Sección 508, EN 301 549 (9.4.1.2), y las directrices de Trusted Tester, que requieren que el propósito de cada enlace y botón sea determinable a partir de su nombre accesible, descripción o contexto.

Cómo solucionarlo

Asegúrate de que cada elemento <button> o elemento con role="button" tenga un nombre accesible a través de uno de estos métodos:

1. Contenido de texto visible dentro del elemento del botón.
2. Un atributo aria-label no vacío que describa el propósito del botón.
3. Un atributo aria-labelledby que haga referencia a un elemento que contenga texto visible y no vacío.
4. Un atributo title (úsalo como último recurso, ya que los tooltips de title se exponen de forma inconsistente entre dispositivos).

Si un botón es puramente decorativo y debería ocultarse de las tecnologías de asistencia, puedes asignar role="presentation" o role="none" y eliminarlo del orden de tabulación con tabindex="-1". Sin embargo, esto es raro para botones interactivos.

Errores comunes que evitar

• Dejar un elemento <button> completamente vacío.
• Usar solo un atributo value en un <button> — a diferencia de los elementos <input>, el atributo value en <button> no proporciona un nombre accesible.
• Establecer aria-label como una cadena vacía (aria-label="").
• Apuntar aria-labelledby a un elemento que no existe o no contiene texto.
• Usar solo un icono o imagen dentro de un botón sin proporcionar texto alternativo.

Ejemplos

Incorrecto: botón vacío

<button id="search"></button>

Un lector de pantalla anuncia esto como “botón” sin ninguna indicación de su propósito.

Incorrecto: botón con solo un atributo value

<button id="submit" value="Submit"></button>

El atributo value no establece el nombre accesible para elementos <button>.

Incorrecto: aria-label vacío

<button id="close" aria-label=""></button>

Un aria-label vacío resulta en ningún nombre accesible.

Incorrecto: aria-labelledby apuntando a un elemento faltante o vacío

<button id="save" aria-labelledby="save-label"></button>
<div id="save-label"></div>

El elemento referenciado existe pero no contiene texto, por lo que el botón no tiene nombre accesible.

Correcto: botón con texto visible

<button>Submit order</button>

Correcto: botón de icono con aria-label

<button aria-label="Close dialog">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-close"></use>
  </svg>
</button>

El aria-label proporciona el nombre accesible, mientras que aria-hidden="true" en el SVG previene anuncios duplicados.

Correcto: botón etiquetado por otro elemento

<h2 id="section-title">Shopping cart</h2>
<button aria-labelledby="section-title">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-arrow"></use>
  </svg>
</button>

El nombre accesible del botón se obtiene del texto del encabezado referenciado.

Correcto: botón con aria-label y texto visible

<button aria-label="Search products">Search</button>

Cuando están presentes tanto aria-label como texto interno, aria-label tiene precedencia como nombre accesible. Usa esto cuando necesites un nombre más descriptivo que el que proporciona solo el texto visible.

Correcto: botón con title (último recurso)

<button title="Print this page">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-print"></use>
  </svg>
</button>

El atributo title proporciona un nombre accesible, pero se prefiere el texto visible o aria-label porque los tooltips de title pueden no estar disponibles para usuarios de pantalla táctil o que solo usan teclado.

Learn more:

Deque Reference

Deque University - How To Fix

→