Etiqueta en el nombre
Silktide compara el texto que las personas visitantes pueden ver en botones y enlaces con el nombre que las utilizan para ese mismo control. Cuando no coinciden, las personas que manejan sitios web mediante la voz no pueden activar el control diciendo lo que ven.
Por qué importa
Quienes usan reconocimiento de voz miran la pantalla y dicen lo que ven: «haz clic en Enviar». El software compara esas palabras con el de cada control: el nombre que usan las . Atributos como aria-label sustituyen ese nombre, de modo que un botón que muestra «Enviar» pero tiene aria-label="Aceptar" solo responde a «haz clic en Aceptar». La palabra visible falla sin avisar y la persona usuaria no tiene forma de descubrir el nombre oculto que debía decir.
La falta de coincidencia también confunde a quienes usan un y trabajan con colegas videntes, porque oyen un nombre diferente del que la persona a su lado ve.
Este es el criterio de conformidad 2.5.3 (Etiqueta en el nombre) de las , un : parte del nivel de conformidad más básico.
Cómo solucionarlo
- Elimina la anulación de cuando no aporta nada: un botón cuyo texto visible ya dice lo que hace no necesita
aria-label. - Cuando la anulación aporta contexto, empieza con el texto visible:
aria-label="Leer más sobre los precios"para un enlace «Leer más» mantiene funcionando el comando por voz. - Nunca uses
aria-labelpara decir algo diferente del texto visible.
<!-- Problema: muestra «Enviar» pero solo responde a «Aceptar» -->
<button aria-label="Aceptar">Enviar</button>
<!-- Solución: el texto visible incluido en el nombre accesible -->
<button aria-label="Enviar mensaje">Enviar</button>
<!-- La solución más simple: sin anulación alguna -->
<button>Enviar</button>
Cómo lo prueba Silktide
- Busca los botones y enlaces visibles en cada página, incluidos los elementos con un rol ARIA de
buttonolink. - Solo prueba los controles que anulan su nombre con
aria-labeloaria-labelledby; sin anulación, el texto visible es el nombre accesible y el criterio se cumple automáticamente. - Lee la etiqueta visible del control: su contenido de texto más el de cualquier imagen dentro. Se omiten las etiquetas de menos de 2 caracteres, así como los controles con un nombre accesible vacío (un problema distinto cubierto por otras comprobaciones).
- Normaliza ambas cadenas —poner en minúsculas, colapsar espacios y eliminar la puntuación decorativa— y exige que la etiqueta visible aparezca dentro del nombre accesible.
- Para enlaces con formato de tarjeta que contienen un encabezado más texto de apoyo, se acepta el encabezado como etiqueta, ya que es el texto que una persona diría de forma natural.
Solución de problemas
El nombre accesible es más largo que el texto visible
No pasa nada, siempre que el texto visible aparezca dentro de él. WCAG recomienda que el nombre accesible comience con el texto visible, pero cualquier colocación supera esta comprobación.
No se prueban los campos de formulario
Los campos de texto y otros campos de formulario toman su etiqueta visible de un elemento <label> en lugar de su propio texto, por lo que están cubiertos por comprobaciones de etiquetado independientes en lugar de esta.