Menu dropdown acessível

Um post rápido, só prá não esquecer de postar

Vi lá no site do Bruno Torres através da indicação do Ricardo para aplicação em um projeto que estou finalizando.

Trata-se de um menu dropdown com a possibilidade de navegação através do teclado. Para tal ação ser possível, usamos um javascript de fácil compreensão.

A marcação HTML é a seguinte:


<ul id="menu">
<li><a href=”/”>Início</a></li>
<li><a href=”/servicos”>Serviços</a>
<ul>
<li><a href=”/servicos/design”>Design</a></li>
<li><a href=”/servicos/prog”>Programação</a></li>
</ul>
</li>
</ul>


O css..


ul{ list-style:none; }
#menu li {
float:left;
position:relative;
}
#menu li ul {
display:none;
position:absolute;
top:0.9em;
left:0;
margin:0;
padding:0;
}
#menu li:hover ul { display:block; }


E o script:


var lis = document.getElementsByTagName('li');
for (var i = 0, li; li = lis[i]; i++){var link = li.getElementsByTagName('a')[0];
if (link){
link.onfocus = function(){
var ul = this.parentNode.getElementsByTagName('ul')[0];
if (ul)
ul.style.display = 'block';
}
var ul = link.parentNode.getElementsByTagName('ul')[0];
if (ul){
var ullinks = ul.getElementsByTagName('a');
var ullinksqty = ullinks.length;
var lastItem = ullinks[ullinksqty - 1];
if (lastItem){
lastItem.onblur = function(){
this.parentNode.parentNode.style.display = 'none';
}
lastItem.parentNode.onblur = function(){
this.parentNode.style.display = ”;
}
}
}
}
}


Para ler o artigo original basta clicar aqui