option-name-present
Las opciones tienen un nombre accesible
Comprueba que los elementos con role="option" expongan un nombre accesible no vacío.
Ámbito de aplicación. Se aplica a elementos cuyo atributo role se resuelve en option (el primer token que nombra un rol conocido, sin distinguir mayúsculas de minúsculas, por lo que role="foo option" y role="OPTION" cuentan) que están incluidos en el árbol de accesibilidad. Un elemento con el rol implícito correspondiente pero sin atributo role queda fuera del alcance. También entra en el alcance un elemento personalizado cuyos ElementInternals le dan ese rol (this.attachInternals().role), sin un atributo role que nombre otro: es su rol por defecto, y ninguna otra regla lo comprueba.
Resultado esperado. El elemento tiene un nombre accesible no vacío procedente de aria-label, de un aria-labelledby que resuelve a texto no vacío, de title, o bien, dado que role="option" obtiene su nombre del contenido (name-from-content), del texto de su propio subárbol, donde el nombre propio de un descendiente (un <img alt>, aria-label o title) cuenta como la contribución de ese descendiente en lugar de solo sus nodos de texto.
Ejemplos
<div role="option" tabindex="0">Apple</div>
El contenido de texto visible es una fuente de nombre válida para role="option".
<div role="option" tabindex="0"></div>
Sin nombre y sin contenido.
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 la opció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 la opción, tomado de su contenido, y el lector de pantalla lo anuncia.
No se cumple. La opció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 la opció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 la opción, tomado de su contenido anidado, y el lector de pantalla lo anuncia.
No se cumple. La opció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 la opció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 la opción, establecido mediante sus internals o de otro modo, y el lector de pantalla lo anuncia.
No se cumple. La opció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.