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:

L'elemento li .more

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 speak: none

$(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 top focus .more li tabindex qui