label-in-name

Etiqueta en el nombre: el nombre accesible contiene el texto visible

Comprueba que, cuando un control tiene una etiqueta de texto visible, el nombre accesible contiene ese texto de la etiqueta visible (WCAG 2.5.3).

Ámbito de aplicación. Se aplica a los controles que tienen aria-label o aria-labelledby, se renderizan visualmente, y tienen texto de etiqueta visible que este motor puede extraer de forma determinista, ya sea de un <label> asociado, del propio texto renderizado del control, o de los elementos a los que apunta aria-labelledby. Los candidatos son <button>, <a href>, <summary>, los controles de formulario no ocultos, y los roles button, link, checkbox, radio, switch, searchbox, tab, menuitem, menuitemcheckbox, menuitemradio, option, treeitem y gridcell, excluyendo cualquiera que esté oculto o deshabilitado. aria-hidden no se excluye: no cambia nada de lo que se renderiza en pantalla, que es de lo que trata este SC.

Resultado esperado. El nombre accesible contiene las palabras de la etiqueta visible, adyacentes y en orden. La comparación se hace por palabras, no por caracteres: el texto entre paréntesis se descarta, las mayúsculas y minúsculas se igualan, el texto se normaliza en NFKD, y cada carácter que no sea letra o dígito se convierte en separador, de modo que las diferencias de puntuación y espaciado nunca deciden el resultado. Cuatro casos que el marcado no puede resolver por sí solo devuelven `cantTell` en lugar de `fail`: una palabra separada por guion de forma distinta en los dos lugares; una palabra visible que el autor pudo haber abreviado, marcada por su punto final; texto visible renderizado mediante una fuente de iconos conocida (el texto del DOM son palabras reales, pero no se renderiza nada legible); y una etiqueta visible entera de exactamente un carácter que ni siquiera aparece dentro del nombre accesible, que según ACT 2ee8b8 puede ser "contenido no textual" (por ejemplo, "X" que significa "cerrar") en lugar de texto literal.

Ejemplos

<button aria-label="Save changes">Save</button>

<button aria-label="Submit form">Save</button>

Ver código fuente