Criando listas clicáveis e acessíveis com Jquery

Publicado em 03/07/09 na categoria Acessibilidade, Jquery, Tutorial.

O site já esta pronto, aquela lista de conteúdos relacionados (geralmente localizada na coluna direita) está funcionando perfeitamente. Porém o Designer faz uma proposta de melhoria de usabilidade, solicitando que não apenas o link do título seja clicável, mas o item da lista por inteiro (tag <li>). Como resolvemos esse problema?

Demo do resultado.

Para melhor entendimento, vejamos primeiramente o código XHTML abaixo:

<ul class="lista_script">
 <li><h3><a href="index.html">Título da notícia relacionada</a></h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mauris et leo congue in fermentum neque volutpat. Aenean dignissim leo eu erat suscipit id condimentum mi adipiscing</p>
 </li>
 <li><h3><a href="index.html">Título da notícia relacionada</a></h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mauris et leo congue in fermentum neque volutpat. Aenean dignissim leo eu erat suscipit id condimentum mi adipiscing</p>
 </li>
 <li><h3><a href="index.html">Título da notícia relacionada</a></h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mauris et leo congue in fermentum neque volutpat. Aenean dignissim leo eu erat suscipit id condimentum mi adipiscing</p>
 </li>
</ul>

Antes da prática de se trabalhar com DOM (javascript), esse problema era resolvido da seguinte forma, colocava-se a tag <a> como pai da <li>, o que não é semanticamente correto. Pois a tag <a> é do tipo inline e <li> do tipo block. Segundo as recomendações do W3C os elementos do tipo inline devem está contidos dentro de elementos block, logo não é válido declarar block dentro de inline.

A solução encontrada foi resgatar, via jquery, o atributo “href” da primeira tag <a> e adicionar o evento click na <li>. Para complementar o script criei um efeito hover na <li> que pode ser personalizado na classe “.hover” no CSS.

O resultado:

CSS

* { margin: 0; padding: 0}   ul { list-style: none} //reset
body { font-family: "Trebuchet MS", Arial; font-size: 12px}
.lista_script li {
  border-bottom: 1px solid #e1e1e1;
  padding: 10px
}
.lista_script li h3 {
  margin-bottom: .7em;
  font-size:14px
}
.lista_script .hover { background-color: #ececec}
.lista_script li {cursor: pointer}

Javascript (jquery)

Não esquecer de colocar dentro da tag <head>.

$(document).ready(function() {
//função efeito hover
  $(".lista_script li").hover(function () {
      $(this).addClass("hover");
    },
    function () {
      $(this).removeClass("hover");
  });
//função click
  $(".lista_script li").click(function() {
     var destino = $(this).find("a:first").attr("href");
     //resgatando link da primeira tag "a" dentro da "li"
     window.location = destino;
  });
});

Vantagens

Executa as funções do jquery via DOM, desta forma não é necessário adicionar novos atributos nos elementos do XHTML.
XHTML acessível, pois mesmo que o browser não tenha suporte a javascript o usuário poderá utilizar o link do título normalmente.
Funciona nos principais browsers: Internet Explorer 6+, FireFox, Chrome, Safari e Opera.

Faça o download do tutorial e ajuste às suas necessidades.