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.

Ámbito de aplicación. Se aplica a los controles nombrados mediante aria-label o aria-labelledby, que 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 elementos cuyo atributo role se resuelve (su primer token conocido y no abstracto, sin distinguir mayúsculas de minúsculas) en el rol button, link, checkbox, radio, switch, searchbox, tab, menuitem, menuitemcheckbox, menuitemradio, option, treeitem o gridcell, y un <td> sin atributo role dentro de un grid o treegrid, que es un gridcell según HTML-AAM, excluyendo cualquiera que esté oculto o deshabilitado. Un <input> de tipo botón (submit, reset, button) con un value muestra ese valor como su etiqueta; sin él muestra el valor predeterminado del propio navegador, que no se puede conocer, y queda fuera del alcance. La etiqueta visible es el texto interior visible: el texto de los elementos en línea se une tal como está escrito (<b>Down</b>load se lee "Download"), una caja de bloque o un <br> inicia una palabra nueva, y el texto de una caja que nadie puede ver (recortada, de 1x1 px o totalmente transparente, como el texto solo para lectores de pantalla) se deja fuera, igual que las opciones de un <select> y el texto de un <textarea>, que son el valor de un campo, no texto de etiqueta. aria-hidden no se excluye: no cambia nada de lo que se renderiza en pantalla, que es de lo que trata este SC. Un aria-label que queda vacío tras recortar espacios, o un aria-labelledby cuyos ids no apuntan a nada o solo a elementos sin texto, no nombra nada: el nombre accesible sale entonces de la siguiente fuente (el contenido, un <label>, title...), como en un control sin ellos, así que el control queda fuera del alcance. Un elemento personalizado cuyos ElementInternals le dan uno de esos roles (this.attachInternals().role), sin un atributo role que nombre otro, cuenta como lo hace un elemento nativo con ese rol.

Resultado esperado. El nombre accesible contiene las palabras de la etiqueta visible, adyacentes y en orden. En un navegador, la etiqueta también se lee tal como se muestra: dos cajas dibujadas una junto a otra en una misma línea, sin espacio entre ellas, unen sus palabras (los elementos flex "sure" y "a11y" se leen "surea11y"), y un nombre que contiene cualquiera de las dos lecturas contiene la etiqueta. 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 NFKC, y cada carácter que no sea letra, dígito o marca combinante se convierte en separador, de modo que las diferencias de puntuación y espaciado nunca deciden el resultado. En cambio, los caracteres de formato invisibles (un guion blando, un espacio de ancho cero) y un apóstrofo dentro de una palabra se eliminan, de modo que "Down&shy;load" es "Download" y "Don’t" es "Dont". Los acentos no se igualan: "Déposer" sigue siendo una palabra, y un nombre que omite un acento ("Deposer") no la contiene. 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>

Cómo comprobarlo

Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.

Ver código fuente