Etiqueta en el nombre

Qué exige este criterio

Si un botón muestra «Enviar solicitud» en pantalla, un usuario de control por voz debería poder decir «clic en Enviar solicitud» y que el clic se ejecute. Eso solo funciona cuando la etiqueta visible está contenida en el nombre accesible —idealmente como las primeras palabras—. Si el nombre accesible es «Mandar formulario» mientras el texto visible dice «Enviar solicitud», el comando de voz falla silenciosamente.

WCAG exige que la etiqueta de texto visible forme parte del nombre accesible. El nombre accesible puede incluir más información (contexto aclaratorio), pero el texto visible ha de estar presente y en el mismo orden de palabras.

Cómo cumplirlo

• Para botones y enlaces con texto, no es necesario hacer nada especial: el contenido textual se convierte automáticamente en el nombre accesible.
• Al añadir aria-label a un control que ya tiene texto visible, incluir el texto visible al inicio: <button aria-label="Enviar solicitud — abre la confirmación">Enviar solicitud</button>.
• Para botones con icono y texto, dejar que el texto sea el origen del nombre. No sobreescribirlo con un aria-label exclusivo del icono.
• Para los enlaces cuyo texto es «Más información», ampliar el nombre accesible con aria-label="Más información sobre WCAG 2.2 — artículo completo", de modo que el «Más información» visible siga siendo el prefijo.
• Cuando la etiqueta visible de un control es una imagen (icono con superposición de texto, logotipo), asegurarse de que el alt coincide exactamente con el texto visible.

Fallos habituales

• Un botón que muestra «Buscar» con aria-label="Encontrar". Los usuarios de voz dicen «clic en Buscar» y nada ocurre.
• Botones «Añadir al carrito» con aria-label="Añadir camiseta azul talla M a tu carrito de compra" —nombre extenso donde «Añadir al carrito» visible ya no es el prefijo—. El comando de voz «clic en Añadir al carrito» no funciona.
• Botones de icono y texto en los que el diseñador añadió aria-label="icono carrito" y anuló el texto visible «Finalizar compra».
• Sitios localizados donde el texto visible se tradujo pero el aria-label sigue en inglés.
• Botones de acción flotante que muestran «Chat» visiblemente pero llevan aria-label="Abrir widget de soporte".

Por qué es importante

Este criterio es el que condiciona la accesibilidad para los usuarios de control por voz —personas que utilizan Dragon NaturallySpeaking, Voice Control en iOS/macOS, Voice Access en Android o Reconocimiento de voz de Windows—. Para estas personas, la etiqueta visible es el comando. Una discrepancia no es un inconveniente menor; es la diferencia entre que el control sea operable o no. También ayuda a los usuarios de lector de pantalla a seguir la interacción cuando un asistente vidente dice «haz clic en el botón Guardar»: el anuncio del lector coincide con las palabras en pantalla. El criterio 2.5.3 es fácil de corregir y fácil de pasar por alto, porque las herramientas automatizadas raramente lo detectan: un desarrollador que lee el código ve un aria-label y asume que es correcto. Conviene siempre comprobar el nombre accesible frente al texto visible.