button-name-present
Los botones tienen un nombre accesible
Comprueba que los botones expongan un nombre accesible no vacío.
Ámbito de aplicación. Se aplica a <button>, <input type="button">, <input type="submit">, <input type="reset"> y elementos cuyo atributo role se resuelve en button (su primer token conocido y no abstracto, sin distinguir mayúsculas de minúsculas, por lo que role="foo button" cuenta y role="link button" no), cuando el elemento está incluido en el árbol de accesibilidad. role="presentation"/"none" saca a un elemento del alcance a menos que un atributo ARIA global o la focusabilidad restablezcan su rol, según la resolución de conflictos de roles presentacionales. Un elemento personalizado cuyos ElementInternals le dan el rol button (this.attachInternals().role), sin un atributo role que nombre otro, cuenta como lo hace un elemento nativo con ese rol.
Resultado esperado. El elemento tiene un nombre accesible no vacío. Primero se toma un nombre programático (aria-labelledby, aria-label, un <label> asociado, title). Si no lo hay, un botón <input> recurre a su atributo value, y type="submit"/type="reset" recurren al valor predeterminado del propio agente de usuario, "Submit"/"Reset", por eso esos dos nunca carecen de nombre. Si tampoco, un botón cuyo rol obtiene el nombre del contenido recurre al texto de su subárbol, contando el nombre propio de cada descendiente (un <img alt>, aria-label, el <title> hijo de un <svg>, o title) y no solo los nodos de texto.
Qué informa un hallazgo.
refs.accessibleName: lo que encontró la búsqueda de un nombre programático (aria-labelledby, aria-label, <label>, title). Sumechanismes la fuente en la que se detuvo,nonecuando no había ninguna, y susflagsindican por qué un atributo de nombrado presente no dio ningún nombre, por ejemploaria-label-emptyoaria-labelledby-empty-or-unresolvable.
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<button>Save</button>
El contenido de texto del botón es su nombre accesible.
<button></button>
El botón no tiene contenido de texto, aria-label ni aria-labelledby.
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.
name_closedContent
- Localizar el botón que indica el informe y anotar el texto o el icono que muestra en pantalla.
- Abrir el panel Accesibilidad de las herramientas para desarrolladores del navegador y leer el nombre accesible del elemento, que el navegador obtiene de un contenido que ningún script puede leer.
- Con un lector de pantalla, desplazarse hasta el elemento y escuchar el nombre que se anuncia.
Se cumple. El árbol de accesibilidad muestra un nombre para el botón, tomado de su contenido, y el lector de pantalla lo anuncia.
No se cumple. El botón no tiene nombre en el árbol de accesibilidad, porque su contenido no le da ninguno, lo que incumple WCAG 4.1.2.
name_contentTooDeep
- Localizar el botón que indica el informe y anotar el texto que muestra en pantalla.
- Abrir el panel Accesibilidad de las herramientas para desarrolladores del navegador y leer el nombre accesible del elemento, que el navegador obtiene de todo su contenido anidado.
- Con un lector de pantalla, desplazarse hasta el elemento y escuchar el nombre que se anuncia.
Se cumple. El árbol de accesibilidad muestra un nombre para el botón, tomado de su contenido anidado, y el lector de pantalla lo anuncia.
No se cumple. El botón no tiene nombre en el árbol de accesibilidad, porque su contenido no le da ninguno, lo que incumple WCAG 4.1.2.
name_internals
- Inspeccionar el botón que indica el informe, un elemento personalizado, y anotar su rol.
- Abrir el panel Accesibilidad de las herramientas para desarrolladores del navegador y leer el nombre accesible del elemento.
- Con un lector de pantalla, desplazarse hasta el elemento y escuchar el nombre que se anuncia.
Se cumple. El árbol de accesibilidad muestra un nombre para el botón, establecido mediante sus internals o de otro modo, y el lector de pantalla lo anuncia.
No se cumple. El botón no tiene nombre en el árbol de accesibilidad y el lector de pantalla solo anuncia su rol, lo que incumple WCAG 4.1.2.