Los elementos [aria-hidden =" true"] contienen descendientes enfocables
Users of screen readers and other assistive technologies need information about the behavior and purpose of controls on your web page. Built-in HTML controls like buttons and radio groups come with that information built in. For custom controls you create, however, you must provide the information with ARIA roles and attributes. (Learn more in the Introduction to ARIA.)
El uso del aria-hidden="true" en un elemento oculta el elemento y todos sus elementos secundarios de los lectores de pantalla y otras tecnologías de asistencia. Si el elemento oculto contiene un elemento enfocable, las tecnologías de asistencia no leerán el elemento enfocable, pero los usuarios de teclado aún podrán navegar hacia él, lo que puede causar confusión.
Cómo identifica Lighthouse los elementos enfocables parcialmente ocultos #
Lighthouse señala los elementos enfocables que tienen padres con el atributo aria-hidden="true"
An element is focusable when keyboard users can navigate to it using the Tab key. Focusability differs somewhat across browsers, but in general, the following elements are focusable:
<a><area><audio controls><button><iframe><input><select><summary><textarea><video controls>- Any element with the
contentEditableattribute - Any element with a
tabindexset to a numeric value other than-1
For a complete breakdown of cross-browser focus behavior, see ally.js's Focusable Elements - Browser Compatibility Table.
Cómo corregir los elementos enfocables parcialmente ocultos #
Si está ocultando un elemento contenedor en su página usando aria-hidden, también debe evitar que los usuarios naveguen a cualquier elemento enfocable dentro de ese contenedor.
Una forma de hacerlo es usar JavaScript para aplicar un tabindex="-1" a todos los elementos enfocables en el contenedor. Sin embargo, como implica la lista anterior, una consulta que capture todos los elementos enfocables puede complicarse rápidamente.
Si está ocultando el elemento contenedor a usuarios videntes, considere usar una de las siguientes estrategias en su lugar:
- Agregue un atributo
hiddenal elemento contenedor. - Aplique la propiedad CSS
display: noneovisibility: hiddenal elemento contenedor.
Si no puede ocultar visualmente el elemento contenedor, por ejemplo, si está detrás de un diálogo modal con un fondo translúcido, considere usar el polyfill inert WICG. El polyfill emula el comportamiento de un atributo inert propuesto, evitando que los elementos se lean o seleccionen.
Recursos #
- El código fuente de los elementos
[aria-hidden="true"]contiene una auditoría de descendientes enfocables - Los elementos aria-hidden no contienen elementos enfocables (Universidad Deque)
- Polyfill
inertde WICG