Focus no Hover

Este artigo foi traduzido do site de Anton Peck. Veja o texto original em inglês aqui.

Esta é a dica de acessibilidade de websites mais fácil que qualquer um poderá te dar:

Adicione uma pseudo-classe :focus para tudo o que tiver um estilo :hover, para que os usuários que preferem o teclado tenham a mesma qualidade de resultado visual que você oferece aos usuários que preferem o mouse.

Toda vez que falo disso, me surpreendo ao ver quantos designers não percebem que podem usar isso em seus códigos. Sem nenhum inconveniente de navegador, incrivelmente fácil de implementar, e permite aos usuários que preferem o teclado verem todos os seus belos efeitos de roll-over enquanto navegam pela página usando a tecla tab.

A inspiração para escrever sobre isso veio enquanto olhava o site Gowalla. Na maior parte do tempo, eu uso o mouse para navegar pelos links de uma página. Mas às vezes prefiro usar o teclado para navegar através dos meus links, dando um toque na tecla tab. Quando estava lendo a página deles, achei curioso não ver qualquer sinal de qual links estava corrente e silenciosamente esperando meu próximo comando. Em outras palavras, eu estava perdido. Tab, tab, tab... onde estou? Nem uma pista. Fui logo forçado a utilizar o meu mouse para ter certeza de que o link que estava ativo seria aquele que eu realmente queria.

Esse problema estende-se para muito além de Gowalla. Há incontáveis montões de sites que forçam as pessoas a usar o mouse só para poderem navegar pelos links. É uma vergonha isso acontecer, considerando o mínimo esforço necessário para resolver isso.

Mais: http://antonpeck.com/journal/article/focus_on_the_hover/