SCR28Permitir plegar los menús que se repiten en cada página

Por qué es importante

Quien navega con teclado tiene que pulsar Tab en cada enlace del menú antes de llegar al contenido. En un menú de 40 enlaces, eso le ocurre en cada página que visita.

El lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) también lee el mismo menú una y otra vez. Un menú plegable permite saltarlo con una sola pulsación.

Cómo se hace

1. Ponga un botón (<button>) justo antes del bloque repetido, con un texto claro como «Índice de la guía».
2. Indique su estado con aria-expanded="true" o "false". Relacione el botón con el bloque mediante aria-controls.
3. Al plegar, oculte el bloque de verdad con el atributo hidden o con display: none. Así sus enlaces no reciben el foco ni se leen.
4. Al desplegar, el contenido debe aparecer justo después del botón, en un orden de lectura lógico.
5. Valore recordar la preferencia de la persona entre páginas, por ejemplo con localStorage.
6. Esta técnica se puede combinar con un enlace «Saltar al contenido principal».

Cómo comprobarlo

1. Busque el control que pliega y despliega el bloque repetido. Debe alcanzarse con Tab y activarse con Intro o Espacio.
2. Pliegue el bloque y pulse Tab. El foco no debe pasar por ninguno de sus enlaces.
3. Con un lector de pantalla, compruebe que el bloque plegado no se lee y que el botón se anuncia como «contraído».
4. Despliegue el bloque y compruebe que sus enlaces aparecen justo después del botón.

Ejemplo

Índice de una guía que se repite en cada página y se pliega con un botón.

<button type="button" aria-expanded="true" aria-controls="indice">
  Índice de la guía
</button>
<ul id="indice">
  <li><a href="/guia/requisitos">Requisitos</a></li>
  <li><a href="/guia/plazos">Plazos</a></li>
</ul>
<script>
var boton = document.querySelector('[aria-controls="indice"]');
boton.addEventListener('click', function () {
  var abierto = boton.getAttribute('aria-expanded') === 'true';
  boton.setAttribute('aria-expanded', String(!abierto));
  document.getElementById('indice').hidden = abierto;
});
</script>