Menu dropdown accessibili con jQuery

Realizzare un menu dropdown con jQuery è cosa alquanto semplice. Realizzarne uno accessibile richiede la conoscenza di alcune caratteristiche di accessibilità  del Web. Per prima cosa, partiamo da questa marcatura:

<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li class="more"><a href="#">About</a>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Resumé</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>

L'elemento li con classe .more contiene il nostro sottomenu. Gli stili CSS saranno i seguenti:

body {
	    margin: 0;
	    padding: 0;
	    font: 62.5%/1 Arial, sans-serif;
	    background: #fff;
	    color: #333;
	}
	#navigation {
	    width: 100%;
	    float: left;
	    margin: 0;
	    background: #666;
	    color: #fff;
	    font-size: 1.4em;
	}
	#navigation ul {
	    margin: 0;
	    padding: 0;
	    list-style: none;
	    width: 100%;
	}
	#navigation ul li {
	    float: left;
	    height: 5em;
	    margin: 0;
	}
	#navigation ul li a {
	    color: #fff;
	    text-decoration: none;
	    float: left;
	    display: block;
	    height: 100%;
	    line-height: 5;
	    padding: 0 1em;
	}
	#navigation ul li a:hover {
	    background: #333;
	    text-decoration: underline;
	}
	#navigation ul li.more ul {
	    width: 15em;
	    background: #333;
	    position: absolute;
	    top: -1000em;
	}
	#navigation ul li.more ul li {
	    float: none;
	    height: 100%;
	}
	#navigation ul li.more ul li a {
	    float: none;
	    width: 100%;
	    display: block;
	    line-height: normal;
	    padding: 0.5em 0;
	    text-indent: 0.5em;
	}
	#navigation ul li.more ul li a:hover {
	    background: #666;
	}
	span.plus {
	    padding-left: 4px;
	}

Il sottomenu è stato nascosto tramite il posizionamento assoluto negativo. Questo si rende necessario in quanto i lettori di schermo interpretano la dichiarazione display: none come se fosse speak: none e quindi non leggono il contenuto dell'elemento. Il codice jQuery è invece il seguente:

$(document).ready(function() {
    $('<span class="plus"></span>').text('+').appendTo('#navigation ul li.more > a:first-child');
    var subMenuPos = $('#navigation ul li.more').position();
    var subMenuLeft = subMenuPos.left;
    var subMenuHeight = $('#navigation ul li.more').height();
    $('#navigation ul li.more').hover(function() {
        $('#navigation ul li.more ul').css({'top': subMenuHeight, 'left': subMenuLeft});
    },
    function() {
        $('#navigation ul li.more ul').css({'top': '-1000em', 'left': '-1000em'});
    }
    );
});

Abbiamo memorizzato in due variabili lo scostamento sinistro della voce che contiene il sottomenu e l'altezza del menu principale. Quando l'utente muove il mouse sulla voce, posizioniamo in modo assoluto il sottomenu usando come valori le due variabili precedentemente memorizzate, la prima per la proprietà  left e la seconda per la proprietà  top. Quando l'utente allontana il mouse, nascondiamo di nuovo il menu usando il posizionamento assoluto negativo. Per rendere questa soluzione perfettamente compatibile con i lettori di schermo che, ricordiamolo, hanno un supporto parziale a JavaScript, è sufficiente aggiungere un evento focus ai link del menu principale di navigazione innescando le stesse routine viste per l'elemento con classe .more. Sarebbe anche possibile innescare l'evento direttamente sull'elemento li, a patto di alterarne l'ordine di tabindex settandolo su -1. Potete vedere l'esempio completo qui.