[Resolvido] Menu dropdown que funciona com o teclado

[brcontainer 16]

Fonte: http://brunotorres.net/seu-menu-dropdown-f...a-com-o-teclado

Exemplo: http://brunotorres.net/unsorted/accdd.html

 

SilverFox: Eu simplismente achei esse menu incrivel ;) temos de ser acessiveis a varios tipos de pessoas.

 

Seu menu dropdown funciona com o teclado?

 

Uma das coisas mais importantes ao se tornar um site acessível é assegurar-se de que é possível navegar integralmente pelo site e acessar qualquer informação usando o teclado.

 

E isso não beneficia apenas os cegos, usuários de leitores de tela, como muitos pensam. Muitos grupos de usuários têm dificuldades sérias ou total impossibilidade de usar o mouse. Além dos cegos, pessoas com problemas de coordenação motora, mal de parkinson, paralisia cerebral, e até mesmo usuários de alguns dispositivos móveis. Isso para citar apenas alguns.

 

Juntando-se esses grupos, temos uma quantidade muito grande de usuários e clientes em potencial — idosos, por exemplo, entram em alguns desses grupos, e estão em número cada vez maior — que podem estar deixando de comprar seu produto ou consumir a informação que você publica porque seu site requer o uso do mouse para funcionar de maneira satisfatória.

 

Um recurso que frequentemente causa problemas àqueles que não podem — ou até mesmo não querem, por que não? — usar o mouse são os famosos menus dropdown.

 

A maioria das técnicas para criação de menus dropdowns hoje em dia usa apenas CSS para os browsers de verdade e um pouquinho de JavaScript para o IE6. Técnicas como a suckerfish, por exemplo, muito popular, por ser simples e por ter sido publicada no A List Apart, funcionam dessa maneira.

 

Basicamente, criamos listas não-ordenadas aninhadas. Ou seja, um submenu é marcado como uma lista dentro de um item de lista. Esses submenus são escondidos via CSS e só são exibidos quando se passa o mouse por cima do item de menu que o contém.

 

<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>

Este código acima representa a marcação típica de um menu dropdown moderno. O CSS, sem grandes formatações seria mais ou menos assim:

 

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; }

Este código criaria um menu dropdow funcional (feio demais, mas funcional) nos browsers mais modernos, como Firefox, Opera, Safari e IE7. Como já disse, para o IE6 seria necessário um pouco de JavaScript, mas não vou colocar isso aqui. Vejam o suckerfish para entender como funciona.

 

O que nos importa aqui é o fato de que este menu dropdown é funcional apenas se o usuário estiver usando um mouse. Além do submenu nunca ser exibido para aqueles que estão navegando com o teclado, os itens desse submenu são removidos do índice de tabulação (tabindex) da página e nunca se chega a eles usando a tecla tab (ou qualquer outro recurso).

 

Mas, como resolver isso, você me pergunta. Bem, usando apenas HTML e CSS, creio que não haja nenhuma solução. Pelo menos não que eu conheça (se conhecer alguma, me conte, por favor).

 

Porém, usando-se JavaScript, é possível fazer com que os submenus sejam exibidos usando-se apenas o teclado.

 

Você pode querer argumentar que, ora, estamos falando de acessibilidade, como você vem agora querer me enfiar um JavaScript goela abaixo? O fato é que, na maioria das situações onde esse menu ficaria inacessível via teclado, o usuário tem o JavaScript habilitado no browser.

 

Pense comigo, só vamos ter problemas caso o browser do cara tenha suporte a CSS. Ou seja, estamos falando de browsers gráficos. São muito poucos os casos onde há suporte a CSS e não há suporte a JavaScript. Isso, praticamente, só ocorre quando o usuário deliberadamente desabilita o JavaScript ou usa o modo de segurança alta do IE, por exemplo.

 

Browsers de texto (lynx ou webvox, por exemplo) vão sempre exibir os submenus, por motivos óbvios. Dispositivos móveis, salvo raras excessões, não vão interpretar a propriedade display do CSS, portanto, também vão exibir os submenus.

 

Sendo assim, podemos usar o JavaScript como recurso para habilitar o uso dos menus dropdown para a quase totalidade de nossos usuários. Lembrem-se, 100% é apenas uma meta, raramente (praticamente nunca, na verdade) factível.

 

Como seria esse script? Bem, se não houvesse o IE (e estou falando do IE7 também, neste caso), seria muito, muito simples. Algo assim:

 

<script type="text/javascript">
var lis = document.getElementsByTagName('li');
for (var i = 0, li; li = lis[i]; i++){
li.onfocus = function(){
var ul = this.getElementsByTagName('ul')[0];
if (ul)
ul.style.display = 'block';
}
li.onblur = function(){
var ul = this.getElementsByTagName('ul')[0];
if (ul)
ul.style.display = ";
}
}
</script>

Ou seja, quando uma LI que contiver uma UL receber o foco, o submenu é exibido. Ao perder o foco, o menu é escondido novamente. Simples, não? Porém, o IE existe e é o líder do mercado, e é usado por grande parte dos usuários de leitores de tela também. Portanto, esse script só resolve uma parte do problema.

 

No IE não há o evento onfocus para itens de lista. Portanto, para que nosso menu funcione no IE — e, claro, continue funcionando nos outros browsers –, precisamos fazer com que o submenu apareça quando o link do item do menu de primeiro nível receber o foco e que desapareça quando o último link do submenu perder o foco. Vejam:

 

<script type="text/javascript">
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 = ";
}
}
}
}
}
</script>

Sim, o código está longe de ser elegante, mas você pode melhorá-lo na hora da implementação. O fato é que funciona.

 

Silverfox: Eu já achei que o código esta otimo tal como esta, facil de entender e limpo ;)