aria-expanded-state-mismatch
aria-expanded debería coincidir con si el contenido controlado se muestra
Marca un elemento cuyo valor de aria-expanded no concuerda con si se muestran los elementos que nombra su aria-controls, para revisión manual.
Ámbito de aplicación. Elementos que la página muestra con aria-expanded="true" o aria-expanded="false" y un aria-controls que nombra al menos un elemento del mismo árbol. Se dejan fuera:
- un combobox, cuyo
aria-controlsnombra su ventana emergente, que a menudo se mantiene en la página mientras está contraído; - los elementos controlados que contienen al propio elemento (un elemento de árbol que nombra al padre de su propio grupo).
Resultado esperado. aria-expanded indica a la tecnología de asistencia si se muestra el contenido que controla el elemento. Cuando dice lo contrario de lo que muestra la página, a un usuario de lector de pantalla se le dice que un panel está cerrado cuando está abierto, o al revés.
aria-expanded="false", y todos los elementos que nombraaria-controlsse muestran:cantTell(EXPANDED_FALSE_CONTROLLED_SHOWN).aria-expanded="true", y todos los elementos que nombraaria-controlsestán ocultos:cantTell(EXPANDED_TRUE_CONTROLLED_HIDDEN).- En otro caso:
pass.
Un elemento cuenta como oculto cuando está fuera del árbol de accesibilidad: display: none, visibility: hidden, hidden, un <details> cerrado, content-visibility: hidden, inert o aria-hidden="true" en él o en un ancestro y, en un navegador, una caja propia contraída a altura o anchura cero con su desbordamiento recortado (un panel de acordeón animado con height: 0). Un panel contraído de otra forma (una transformación, la altura de un ancestro) cuenta como mostrado, y el contenido que expande un control puede seguir a la vista mientras está contraído (un párrafo cortado a dos líneas con line-clamp), por eso un hallazgo es una pregunta.
Qué informa un hallazgo.
ariaExpanded:trueofalse, según dice el atributo.controlledCount: cuántos de los elementos que nombraaria-controlsse compararon.
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 aria-expanded="false" aria-controls="shipping">Shipping</button><div id="shipping" hidden>Orders ship within two working days.</div>
El panel está oculto, como dice aria-expanded="false".
<button aria-expanded="false" aria-controls="shipping">Shipping</button><div id="shipping">Orders ship within two working days.</div>
aria-expanded="false" indica a un lector de pantalla que el panel está cerrado, pero se muestra. Una persona comprueba si el panel está abierto, o si el control solo expande contenido que sigue a la vista.
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.
EXPANDED_FALSE_CONTROLLED_SHOWN
- Localizar el conmutador que indica el informe; indica que está contraído.
- Observar el contenido que controla y comprobar si se muestra completo o solo una vista previa, como unas pocas líneas recortadas.
- Activar el conmutador con Intro o Espacio y comprobar el panel Accesibilidad: el estado expandido debería corresponder a lo que se muestra.
Se cumple. El contenido está contraído o solo en vista previa mientras el conmutador indica contraído, y el estado cambia cuando el contenido se abre.
No se cumple. El contenido se muestra completo mientras el conmutador dice a quienes usan lector de pantalla que está contraído, lo que incumple WCAG 4.1.2.
EXPANDED_TRUE_CONTROLLED_HIDDEN
- Localizar el conmutador que indica el informe; indica que está expandido.
- Buscar el contenido que controla y comprobar si se muestra en pantalla, esperando a que termine cualquier animación.
- Activar el conmutador con Intro o Espacio y comprobar en el panel Accesibilidad que el estado expandido corresponde a lo que se muestra.
Se cumple. El contenido se muestra mientras el conmutador indica expandido, una vez terminada cualquier transición.
No se cumple. El contenido sigue oculto mientras el conmutador dice a quienes usan lector de pantalla que está expandido, lo que incumple WCAG 4.1.2.