Los menús de acordeón y la accesibilidad

 Los  menús y los elementos de diseño del acordeón pueden causar problemas de accesibilidad  sobre todo para los discapacitados visuales si no se codifican correctamente. El icono, formado por tres líneas horizontales apiladas una encima de la otra, aparece en la parte superior de muchas pantallas móviles, ya sea en la extrema izquierda o en la extrema derecha. Al tocar o hacer clic en el icono del menú, se abre otro menú lateral con una selección de opciones o páginas adicionales.

Un acordeón es un elemento de diseño que se expande para exponer alguna información oculta. Los acordeones empujan el contenido de la página hacia abajo en lugar de superponer el contenido en la parte superior de la página como con las superposiciones o los diálogos modales. Un ejemplo común de un elemento de acordeón es un menú que muestra elementos de submenú cuando un usuario activa un encabezado de menú. Mira los ejemplos interactivos originales del  acordeón en W3C.github.io para obtener una mejor idea de la funcionalidad.

La expansión y el colapso de los menús acordeones necesitan tener nombres accesibles significativos y un estado dinámico que cambie (por ejemplo, <botón aria-expanded = "true"> , botón <aria-expanded = "false"> ) para que sean reconocibles para los lectores de pantalla.también los desarrolladores deben ofrecer a los usuarios que solo usan el teclado la posibilidad de acceder a una pestaña del menú.