Pular links da navegação e ir direto para o conteúdo

Publicado em 9 de Jun de 2007 às 19:27

Acessibilidade e Estética

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.

Outline no link de Contato da 7Graus

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?

Você é Desenvolvedor ou Designer?
Leia o blog do VTEX Lab, núcleo de inovação para ecommerce da VTEX. Também escrevo por lá. :)

  • Caio

    Sobre esse outline estranho no firefox, um modo que eu uso para corrigir isso é usando overflow: hidden no link q está com o outline.

  • Grande dica Caio.
    Obrigado.

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

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

  • “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!

  • Pingback: » Acessibilidade fácil: Crie um link direto para o conteúdo » Rodrigo Muniz ()

  • 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

    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. ;)

Sobre

Nascido em 1984 é Desenvolvedor Web autodidata desde 2002. Hoje especialista em Design da Informação pela UFPE é Designer na equipe de UX no VTEX Lab (núcleo de inovação para ecommerce), da VTEX.

Saiba mais