s Guías Prácticas de Código Accesible
Escudo de la República de Colombia

Menú Desplegable

Los menús desplegables deben ser creados de tal forma que puedan ser operados por comandos de teclado, además para personas con pocas destrezas en el uso de las tecnologías es muy importante que al salirse de los submenús este no desaparezca inmediatamente.

Hacer uso de JavaScript para que cuando el puntero del mouse deje los submenús, se inicie un temporizador de cierre del submenú, esto permite que una persona que accidentalmente se salga de los submenús puedan volver, esto para una persona que sufra de Parkinson puede ser de gran ayuda así como una persona que accidentalmente se salga de su objetivo.

Se puede mejorar el funcionamiento de un lector de pantalla si se utiliza en estos menús usando WAI-ARIA, dado que los lectores de pantalla no pueden saber si un elemento tiene o no un submenú y si está abierto o cerrado; por lo cual WAI-ARIA por medio de los atributos:

  • aria-haspopup="true"Se usa para que los lectores de pantalla detecten y anuncien si el enlace tiene un submenú.
  • aria-expanded se inicia false pero cambia a true cuando se abre el submenú, lo cual obliga al lector de pantalla a anunciar que el elemento del menú ahora esta expandido
Fragmento de Código: HTML
<ul>
        <li><a href="nav1">Menu Usando ARIA</a></li>
        <li><a href="nav2">Menu Horizontal</a></li>
        <li class="has-submenu">
            <a href="nav3" aria-expanded="false">Menu Vertical</a>
               <ul>
                    <li><a href="nav3.1">Menu Vertical 1</a></li>
                    <li><a href="nav3.2">Menu Vertical 2</a></li>
               </ul>
        </li>
        <li><a href="nav4">Menu Desplegable</a></li>
        <li><a href="nav5">Regresar</a></li>
    …
    </ul>


Fragmento de Código: JavaScript
Array.prototype.forEach.call(menuItems, function(el, i){
    el.addEventListener("mouseover", function(event){
        this.className = "has-submenu open";
        clearTimeout(timer);
    });
    el.addEventListener("mouseout", function(event){
        timer = setTimeout(function(event){
            document.querySelector(".has-submenu.open").className = "has-submenu";
        }, 1000);
    });
});


Ejemplo: