aria-hidden-focus
Los elementos ocultos con ARIA no deben ser enfocables
Comprueba que los elementos con aria-hidden="true" no sean enfocables y no contengan descendientes enfocables.
Ámbito de aplicación. Se aplica a elementos que tienen aria-hidden="true", con el valor leído sin distinguir mayúsculas de minúsculas e ignorando los espacios en blanco circundantes (aria-hidden="TRUE" también oculta contenido en los navegadores).
Resultado esperado. Ningún elemento con aria-hidden="true" puede ser enfocable por sí mismo, y no puede existir ningún elemento enfocable dentro de un subárbol aria-hidden="true".
Qué informa un hallazgo.
metrics.focusableTotal: cuántos elementos enfocables contiene el elemento oculto, contándose a sí mismo si es enfocable.metrics.focusableDescendants: cuántos de ellos están dentro de él.metrics.rootIsFocusable: si el propio elemento oculto puede recibir el foco.offenders: hasta 5 de los elementos enfocables. Cada elemento indica sutag, sutabindex, suhref(un enlace), sutype(un input) y susvisibilityHints.metrics.offendersCapturedes cuántos se listan.metrics.visibilityHints: las formas en que los elementos enfocables se hacen invisibles sin dejar de recibir el foco:opacityZero,offscreen,clipped,zeroSizeOverflowHidden. Un elemento así es una parada de foco que un usuario de teclado vidente no puede ver.metrics.modalOpen: si había un diálogo modal abierto en otra parte de la página, lo que convierte el hallazgo en uno que revisar.runtimeProbe:nullsalvo que enfocar el único elemento enfocable haya sacado el foco directamente del elemento oculto. En ese caso contieneredirected: true, la etiqueta y el id del elemento al que pasó el foco (redirectedToTag,redirectedToId) yfocusTrace, los elementos por los que pasó el foco. Un centinela de foco oculto que pasa el foco de esta manera se notifica para revisión.
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
<div aria-hidden="true"><p>Decorative text</p></div>
Nada dentro del subárbol oculto es enfocable, por lo que ocultarlo de la tecnología de asistencia no deja ninguna parada de foco muerta.
<div aria-hidden="true"><a href="/x">Link</a></div>
El enlace permanece en el orden de tabulación aunque aria-hidden lo elimine del árbol de accesibilidad.
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.
ariaHiddenFocusable_modalOpen_needsReview
- Localizar el elemento que indica el informe, detrás del diálogo modal abierto en la página, y anotar qué puede recibir el foco en él.
- Con el diálogo abierto, pulsar Tab varias veces y luego Mayús+Tab, y observar adónde va el foco.
- Cada vez que el foco parezca salir del diálogo, comprobar document.activeElement en la consola de las herramientas para desarrolladores.
Se cumple. El foco se queda dentro del diálogo abierto y nunca llega al contenido oculto que hay detrás.
No se cumple. El foco llega a contenido detrás del diálogo dentro de aria-hidden="true", donde un lector de pantalla no anuncia nada, lo que incumple WCAG 4.1.2.
ariaHiddenFocusable_runtimeRedirect_needsReview
- Hacer clic justo antes del elemento que indica el informe y pulsar Tab hasta que el foco debiera llegar a él.
- Observar dónde queda el foco y comprobar document.activeElement en la consola de las herramientas para desarrolladores.
- Pulsar Mayús+Tab desde el control siguiente y ver si el foco se detiene en el elemento oculto o pasa de largo.
Se cumple. El foco nunca se queda en el elemento oculto: pasa directamente a un control visible, como hace el centinela de una trampa de foco.
No se cumple. El foco puede quedarse en el elemento dentro de aria-hidden="true", donde un lector de pantalla no anuncia nada, lo que incumple WCAG 4.1.2.