tooltip-name-present
La información sobre herramientas debe tener un nombre accesible
Comprueba que los elementos con role="tooltip" exponen un nombre accesible no vacío.
Ámbito de aplicación. Se aplica a los elementos cuyo atributo role se resuelve en tooltip: su primer token que nombra un rol conocido, sin distinguir mayúsculas de minúsculas, es tooltip, por lo que role="foo tooltip" y role="TOOLTIP" cuentan, mientras que role="link tooltip" (un enlace) no. El elemento debe estar incluido en el árbol de accesibilidad. Un elemento con el rol implícito equivalente 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="tooltip" obtiene su nombre del contenido, 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 y no solo sus nodos de texto. La falta de nombre se informa como cantTell, no como fail. WAI-ARIA exige que un tooltip tenga uno, pero un tooltip no es un componente de interfaz de usuario en el sentido de WCAG, "un único control para una función distinta", y su nombre procede de su contenido, así que un tooltip sin nombre tampoco muestra texto: no falta en el árbol de accesibilidad ninguna información que se muestre como texto. Lo que muestre de otro modo (una imagen sin alternativa textual) lo deciden las reglas de imágenes según el SC 1.1.1. Así que la falta de nombre demuestra la infracción de WAI-ARIA, no un fallo del SC 4.1.2; si la página depende de lo que muestra el tooltip lo decide una persona.
Ejemplos
<div role="tooltip">Click to save your changes</div>
El contenido de texto visible nombra el tooltip.
<div role="tooltip"></div>
No hay contenido de texto ni nombre accesible, que WAI-ARIA exige. Un tooltip no es un control, y uno vacío no muestra nada que falte.
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 descripción emergente 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 descripción emergente, tomado de su contenido, y el lector de pantalla lo anuncia.
No se cumple. La descripción emergente no tiene nombre en el árbol de accesibilidad, porque su contenido no le da ninguno. Eso incumple WAI-ARIA; incumple WCAG solo si la descripción emergente muestra información, como una imagen, sin alternativa textual (WCAG 1.1.1).
name_contentTooDeep
- Localizar la descripción emergente 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 descripción emergente, tomado de su contenido anidado, y el lector de pantalla lo anuncia.
No se cumple. La descripción emergente no tiene nombre en el árbol de accesibilidad, porque su contenido no le da ninguno. Eso incumple WAI-ARIA; incumple WCAG solo si la descripción emergente muestra información, como una imagen, sin alternativa textual (WCAG 1.1.1).
name_internals
- Inspeccionar la descripción emergente 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 descripción emergente, establecido mediante sus internals o de otro modo, y el lector de pantalla lo anuncia.
No se cumple. La descripción emergente no tiene nombre en el árbol de accesibilidad y el lector de pantalla solo anuncia su rol. Eso incumple WAI-ARIA; incumple WCAG solo si la descripción emergente muestra información, como una imagen, sin alternativa textual (WCAG 1.1.1).
name_missing
- Inspeccione la información sobre herramientas que indica el informe y hágala aparecer pasando el puntero o poniendo el foco en el elemento que la muestra.
- Observe lo que muestra: texto, una imagen o contenido con estilo.
- Si muestra una imagen o un icono, compruebe si tiene una alternativa textual.
Se cumple. La información sobre herramientas no muestra nada, o solo decoración, así que no falta nada en lo que la gente confíe. Aun así, dele texto o elimínela: WAI-ARIA exige un nombre.
No se cumple. La información sobre herramientas muestra información, como una imagen, sin alternativa textual (WCAG 1.1.1).