Se a briga da Usabilidade vs Estética é a própria alma do Web Design, agora que mais pessoas vêm notando a importância da acessibilidade nos projetos web parece que temos uma nova batalha nessa guerra: a Acessibilidade vs Estética.
Conversando com uma colega de faculdade sobre o vídeo do Acesso Digital ela levantou a seguinte questão: o link de pular para o conteúdo no topo do site seria interessante esteticamente? Segunda ela a solução é estranha. Eu já acho que seria mais um link como outro na página e com um propósito muito nobre.
Outra situação que aconteceu foi no lançamento do novo site da 7Graus. O diretor pediu para que eu retirasse o ouline dos links da navegação principal, já que ao ganhar o foco no Firefox o outline se comporta de forma estranha vindo da esquerda para a direita da página por culpa do text-ident negativo, o que para ele não era visualmente interessante. Eu até concordo que não combina com a maioria dos sites, mas no final da conversa consegui convencê-lo da importância do outline para quem tem dificuldades de usar o mouse para navegar.
A questão é que alguns leitores de tela carregam o HTML da página de forma totalmente independente de browsers convencionais, ou seja, você pode controlar por CSS o que será carregado, mas o mais popular dele, o Jaws for Windows, integra-se ao sistema operacional de forma que lê tudo o que é usado no sistema. E lê as páginas num navegador como o nosso Firefox de cada dia. Ou seja, o que estamos vendo na tela é o que vai ser lido durante a navegação por teclado. E aí está o problema para quem acha estranho o link “pular a navegação” no começo da página ou outras soluções que melhoram a navegação para leitores como o Jaws e que não serviriam para a maioria.
Solução rápida
Para quem tiver problemas estéticos com o link de pular para o conteúdo, a dica é a seguinte.
Ponha o link em uma tag <p>, aplique na font do link a mesma cor do fundo, dando ao parágrafo posição absoluta. Só mude a sua cor em ‘hover’ e pronto. Isso irá resolver pelo menos nos casos onde a cor do fundo é chapada.
Agora, se você quer tirar o outline, pense duas vezes. O recurso é usado por quase todos os navegadores para mostrar o foco do link e todos que usam a internet já sabem que não é um defeito visual do site e sim um recurso do browser. Por isso não lhe culparão, relaxe e deixe seu site mais acessível.
Alguém já passou por alguma situação onde precisou abrir mão da acessibilidade pela teimosia de algum cliente?
Compare Preços de: games, PS2, PS3, Nintendo, Wii, iPod no Buscapé.
Caio em 9 de Jun de 2007 às 19:43 disse:
Sobre esse outline estranho no firefox, um modo que eu uso para corrigir isso é usando overflow: hidden no link q está com o outline.
Muniz em 9 de Jun de 2007 às 19:59 disse:
Grande dica Caio.
Obrigado.
Rafael Dourado em 10 de Jun de 2007 às 13:04 disse:
As vezes ainda tenho problemas com cliente que insistem em animações de abertura. E a insistência é tanta que o site inteiro está baseado nessa animação que ninguém vê, só ele. Parece que não importa o conteúdo, facilidade de navegação, posicionamento no Google, relacionamento com os clientes… Tento a animação, pronto, ele pode dormir feliz.
Coeli em 11 de Jun de 2007 às 19:11 disse:
Quando o cliente teima muito, eu desisto logo de fazer o site. Não tenho paciência para ficar explicando que da forma X o site fica melhor para o público, mas ele insiste em querer fazer da forma Y, que só agrada a ele.
Triste…
Ps.: Por algum motivo teu feed não ta sendo mais atualizado no meu Google Reader. Vou adicionar de novo pra ver se ajeita. Muitos posts foram deixados passar por causa disso. Vou ler todos agora.
Abraços.
Nana em 14 de Jun de 2007 às 14:59 disse:
“Alguém já passou por alguma situação onde precisou abrir mão da acessibilidade pela teimosia de algum cliente?”
Da acessibilidade naum… mas da facilidade de leitura sim. Afinal, eu sou redatora e a sina de todo redator eh ter alguem se metendo nos textos… algo como substituir “ar” por “espaço aéreo ao redor do local”.
Por que naum deixam a gente fazer nosso trabalho? Por que???
Bjs!
» Acessibilidade fácil: Crie um link direto para o conteúdo » Rodrigo Muniz em 17 de Aug de 2007 às 17:50 disse:
[...] Já falei aqui que alguns desenvolvedores não gostam do link para pular para o conteúdo topo do site por questões estéticas ou até clientes que não querem o link lá porque o acham inútil para si. Mas há diferentes técnicas para escondê-lo da interface gráfica sem interferir na navegação pelo teclado. A técnica que apresento a seguir é a que uso de uns tempos pra cá. [...]
Matheus de Oliveira em 22 de Nov de 2007 às 17:01 disse:
Bem, tirar o outline é fácil, basta usar a propriedade outline…=)
*{outline:0;}
Mas também não acho legal tirar um recurso que facilita tanto, mas também acho que se não tiver jeito e tiver que tirar, basta fazer uma diferenciação de todos os links quando ativos usando o :focus na tag a:
a:focus{
....
}
Agora, eu adimito que sei como fazer isso porque já quis fazer, felizmente mudei de idéia…
E Rodrigo, eu também dou uma outra dica pra “esconder” o link para pular pro conteúdo, pois eu já tive o problema de que o fundo é uma imagem, então ficaria estranho, daí fiz o seguinte: coloquei o link dentro de um DIV, e dei a ele um ID, “ir_cont”, daí usei o código /- assim:
#ir_cont{
overflow:hidden;
height:1em;
}
#ir_cont a{
display:block;
padding:0 2px 10px 2px; /* os 10px embaixo são importantes, para ter um espaço ao passar o mouse */
margin-top:-1.5em; /* mantém fora da área visível */
}
#ir_cont a:focus, #ir_cont a:hover, #ir_cont a:active{
margin-top:0;
padding:0 2px;
}
Se quiserem ver o efeito final, tem nesse site, que ainda não está 100% webstandards, pois fiz quando estava aprendendo…=D
vlw…t
Vinícius Ramon em 4 de Apr de 2011 às 19:13 disse:
Vejo que este post é bem antigo, no entanto a disseminação de conteúdos sobre acessibilidade é ainda maior hoje.
Tenho uma técnica bem simples para esse caso: Esconder o link.
Escondo pelo CSS:
{
position:absolute;
top:-9999px;
}
Flw. ;)