IvoGomes.com

Voltar ao início

10 erros comuns da acessibilidade na web

Normalmente quem tenta desenvolver websites acessíveis costuma cometer os mesmos erros vezes sem conta. Apesar de tentarem dar o seu melhor para tornar os sites mais acessíveis, por vezes esforçam-se demasiado e em vez de melhorar a acessibilidade, acabam por piorá-la.

Estes 10 exemplos mostram aquilo que NÃO DEVE SER FEITO, mas que costumamos ver recorrentemente

1. Usar frases grandes no texto ALT das imagens

Alguns web designers costumam inserir demasiado texto alternativo (ALT) nas imagens na esperança de que isso irá ajudar os utilizadores com leitores de ecrã. No entanto, o texto ALT deve ser curto e sucinto, e não deve conter mais informação do que aquela que é transmitida pela imagem. As imagens decorativas devem ter um ALT nulo (alt="") de forma a serem ignoradas pelos leitores de ecrã.

2. Usar caracteres aleatórios para separar os links

Uma das regras de acessibilidade indica que os links adjacentes (consecutivos) devem ser separados por algum texto sem link uma vez que alguns browsers muito antigos tinham alguns problemas com os links dispostos desta forma. Esta regra já não é relevante apesar de continuar a ser recomendada pelos sistemas de verificação automática, por isso os caracteres que se costumam usar para separar os links (normalmente costuma-se usar uma barra vertical "|") são anunciadas aos leitores de ecrã como "barra vertical", o que atrapalha bastante a navegação destes utilizadores na página.

3. Inserir texto nos campos vazios dos formulários

Outra recomendação antiga e desactualizada indica que os campos dos formulários devem conter um texto de exemplo. Esta regra foi criada porque os antigos leitores de ecrã não conseguiam encontrar os campos que se encontravam vazios. Actualmente, todos os leitores de ecrã conseguem identificar todos os campos dos formulários, pelo que esta regra pode ser ignorada.

4. Usar teclas de atalho

Podemos associar uma tecla de atalho para aceder a um determinado link através do teclado. No entanto, estas teclas de atalho sobrepõem-se às teclas dos leitores de ecrã, tornando-as inúteis. O outro problema das teclas de atalho é o de não haver nenhum standard, por isso os poucos sites que as implementam usam as teclas que bem lhes interessam, tornando difícil a criação de um modelo mental que funcione de mesma forma em todos os sites.
Em termos de acessibilidade, o uso destas teclas pode ser mau, mas em termos de usabilidade pode ser algo muito bom. A navegação pelo teclado é muito mais rápida do que a navegação com a movimentação do rato+clique. Por isso, neste aspecto é necessário criar um compromisso. Se queremos melhorar a acessibilidade, não usamos teclas de atalho, mas se queremos melhorar a usabilidade, podemos usar o teclado, desde que as teclas seleccionadas não se sobreponham às teclas de atalho do próprio browser e que haja uma página que explique todos os atalhos existentes.

5. Usar resumos nas tabelas (só são importantes se adicionarem valor à tabela)

Os leitores de ecrã lêm em voz alta o resumo das tabelas (summary="resumo") antes de iniciarem a leitura dos dados. Alguns websites que usam tabelas para o layout às vezes adicionam estes resumos do tipo summary="tabela de layout", o que não traz nenhum valor à tabela e só atrapalha a navegação de quem usa um leitor de ecrã.

6. Esquecer os conteúdos

A forma como os conteúdos estão estruturados na página é uma grande parte da acessibilidade da mesma. Um website pode ter um código perfeito e estar em conformidade com o nível mais elevado de acessibilidade, mas se os conteúdos estiverem mal estruturados, o site será de difícil navegação ou até impossível para alguns utilizadores com necessidades especiais.
É necessário assegurar que os conteúdos sejam disponibilizados em pequenos pedaços (parágrafos) e acompanhados de um título (cabeçalho). Devem também ser usadas listas (<ul> ou <ol>) sempre qur for apropriado e uma linguagem simples e directa.

7. Preocupar-se com grandes declarações sobre a acessibilidade

Muitos sites desenvolvidos a pensar na acessibilidade costumam ter páginas bastante extensas a explicar as funcionalidades de acessibilidade que foram implementadas. Com ou sem necessidades especiais, os utilizadores não costumam consultar as páginas de "ajuda" de nenhum site. Em vez disso, preferem experimentar e descobrir por eles próprios (a não ser que o site seja mesmo muito difícil de usar, e aí passamos a ter um problema de usabilidade). Apesar de não haver nada de errado em ter uma página a explicar que o nosso site é acessível, não é necessário perder muito tempo com isso.

8. Agonizar com os acrónimos e abreviações

Declarar se alguma palavra é um acrónimo ou uma abreviação é facil de fazer em HTML usando as tags <acronym> ou <abbr>. A maior parte dos leitores de ecrã não suportam estas funcionalidades, por isso não será um grande benefício para os utilizadores com necessidades especiais. Até alguns browsers como o Internet Explorer 6 não suportam este tipo de tags, nomeadamente a <abbr>, pelo que também não se deve perder muito tempo com isso.

9. Alterar a ordem das tabulações (a não ser que haja uma boa razão para isso)

O atributo tabindex pode ser usado para alterar a ordem da tabulação da página (navegação com o teclado usando a tecla TAB), mas raramente é necessário. Os browsers e leitores de ecrã costumam navegar nos sites pela ordem em que os elementos se encontram no HTML. Desde que a navegação seja feita do canto superior esquerdo para o canto inferior direito (o que normalmente acontece) então a ordenação das tabulações está perfeitamente adequada e não necessita de ser alterada.

10. Esquecer-se de ouvir o site num leitor de ecrã

Enquanto estiver a desenvolver um website acessível, não se esqueça de experimentar ouvi-lo num leitor de ecrã para se assegurar que as funcionalidade de acessibilidade funcionam correctamente e que o site é navegável. Além disso, também é recomendável navegar no site usando um browser de texto (ex: Lynx).

Outras considerações

Apesar de haverem regras de acessibilidade que podemos ignorar (ver pontos 2, 3 e 5), quando estamos a desenvolver um website cujo requisito é passar no teste de acessibilidade, por vezes temos mesmo que aplicar essas regras. Isto porque o cliente se poderá queixar de que o seu site não passa no validador X e que nós lhe tínhamos assegurado que o site iria ser acessível e passaria nos testes.

Isto passa-se por exemplo nos sites da Administração Pública que foram obrigados a cumprir as regras mínimas de acessibilidade e que após terem sido implementados há sempre alguém que vai correr a validação de acessibilidade e verificar se passa em todos os pontos, caso contrário o site é tirado do ar. Por isso, dependendo dos casos, as regras terão que ser cumpridas à risca, apesar de já estarem um pouco desactualizadas da realidade.


17 Comentários

Comente este artigo!

  1. Filipe

    Excelente post, parabéns!

  2. Hugo Fernandes

    Antes de mais parabéns pelo post. Bastante útil e verdadeiro.

    Queria apenas deixar um reparo. Não estará a fazer uma dupla negação na maneira como apresanta os vários pontos?
    Vejamos, você começa por dizer “Estes 10 exemplos mostram aquilo que NÃO DEVE SER FEITO (…)”. À partida fico com esta questão na cabeça e digo para mim: “Então vamos ver o que NÃO deve ser feito…”. “Não usar frases grandes no texto ALT das imagens”, responde-me você de seguida.
    O que eu depreendo é que devem ser usadas frases grandes porque você está-me a dizer que uma das coisas que não se deve fazer é não usar frases grandes.

    Na minha opinião o artigo faria mais sentido e estaria mais perceptível se você invertesse o sentido das frases. Espero ter ajudado, ou senão fica na mesma o registo.

    Mais uma vez, parabéns pelo post :)

  3. Hugo Fernandes

    Já agora deixo a minha sugestão, se me é permitido:

    Estes 10 exemplos mostram aquilo que NÃO DEVE SER FEITO, mas que costumamos ver recorrentemente
    Erro 1: Usar frases grandes no texto ALT das imagens

    Erro 2: Usar caracteres aleatórios para separar os links

    Erro 3: …

  4. War

    11. Não inventar traduções de termos informáticos.

    O que é um leitor de ecrã?!?!

    No máximo pode ser traduzido para navegador.

    Se tiverem duvidas consultem a página da Comissão Técnica Portuguesa de Normalização de Terminologia Informática

    http://www.inst-informatica.pt/ct113/global.htm

  5. Ivo Gomes

    @Hugo Fernandes: Obrigado pela sugestão, vou alterar os títulos para fazer mais sentido.

    @War: O termo “leitor de ecrã” existe e é um software que se instala no computador e que permite LER o texto que está no ecrã (daí o nome). O termo em Inglês é “Screen Reader” e no link que forneceu (Comissão Técnica Portuguesa para a Normalização da Terminologia Informática) não há nada relacionado com este termo.

    Pode obter aqui mais informações sobre o que é um leitor de ecrã: http://pt.wikipedia.org/wiki/Leitor_de_tela

  6. Rui Cruz

    Olá.

    Algumas coisas a considerar…

    Ponto 1: usar então o atributo LONGDESC para descrever uma imagem extensivamente.

    Ponto 4: discordo em parte. As teclas de atalho dos leitores de ecrã que eu tenho visto e testado (JAWS, Hal) começam com insert+qualquercoisa, alt+qualquercoisa. Segundo o que sei, teclas de atalho só se podem fazer no browser com control+letra, certo? Então as teclas não vão interferir.

    Ponto 7: deixo mais recomendações:
    – não usar o simbolo da acessibilidade se o seu site não for acessível (sites do governo, HELLOOOOOOOO… acordem para a vida!)
    – até em muitos casos não dizer nada. o demasiado protagonismo é a primei etapa do falhanço.

    Ponto 9: falta numerare este ponto… :P

    Ponto 10: Recomendo portanto o uso dos seguintes leitores de ecrã:
    JAWS
    Window-Eyes
    JAWS
    HAL

    Os teus leitores não querem perder tempo a instalar? Então usem esta simulação para ver como se comporta um leitor de ecrã: http://www.webaim.org/simulations/screenreader-sim.htm

    Isto também é válido para o War.

    Já agora, não estás ou não conheces ninguém interessado nisto: http://ruicruz.forunsbb.com/anuncio-de-bolsa-de-emprego-acessibilidades-web.html

    Se não fosse a recibos verdes (desisti deles este ano) já me tinha metido lá…

    Rui

  7. Ivo Gomes

    @Rui Cruz: Nesta listagem de atalhos do JAWS (http://www.webaim.org/resources/shortcuts/jaws.php) vejo algumas teclas de acesso directo: 5, H, L, I, T, F e B

    Se usares, por exemplo o Google Reader, verás que a tecla de atalho T funciona para adicionar tags a um item. Ao usar o JAWS estamos a criar um conflito ao usar esta tecla.

    Quanto aos browsers normais, esses sim, apenas aceitam atalhos com a conjunção de 2 ou mais teclas.

    Finalmente, quanto à bolsa de emprego na ACAPO, eles dizem que não podes estar empregado numa “empresa que desenvolva software com tecnologias de acesso para pessoas com deficiência visual”. Logo, não me posso candidatar :)

  8. Rui Cruz

    Tens razão, tens razão…

    /me stabs himself

    Rui

  9. Alves

    O ponto 10 é sem dúvida o ponto fulcral, e do qual deviam derivar todas as regras, pois cumprir as normas só por cumprir não tem qualquer interesse.

    Fala-se muito em sites que respeitam as normas de acessibilidade, níveis A e AA, etc. – isso na teoria é muito bonito mas na prática devia-se era preparar o site para alguns leitores de écran e colocar uma nota informativa do tipo “Testado em JAWS, HAL, …”

    É que muitas das normas são ambíguas, já para não dizer contraditórias (ora recomendam que o layout seja feito através de css ora dizem que o site tem que ser legível sem css…) e não são uma garantia que vai ficar alguma coisa de jeito quando processados por um leitor de écran.

    Pessoalmente, já desisti há muito de tentar que um site seja simultâneamente acessível e utilizável/ergonómico. Porque razão se há-de lixar 99% dos utilizadores com uma interface pobre, desprovida de dinamismo só para ficar acessível? Sou apologista de se criar uma página alternativa, extremamente simples, para quem não pode aproveitar o dinamismo, um pouco como as duas versões do gmail (standard e basic html).

  10. Bruno Dulcetti

    Belo post Ivo.

    Só o ponto 8 que eu fiquei com um pulga atrás da orelha. Tudo bem que encher de e tudo mais pode ser exagero, mas será que amanhã os leitores de ecrã não podem suportar essas fucionalidades?

    E, com isso, já deixarmos preparado? Pois é um atributo title que ajuda a identificação da sigla ou acrônimo.

    Mas sei lá, posso estar enganado também :)

    E sobre os alts, eu sempre tento escrever um alt, não extenso, mas num tamanho considerável e que explique corretamente a imagem. Esse é o esquema :)

    Abraços.

  11. PR

    Muito obrigado pelas dicas :)

  12. Flavio Mendes

    Parabéns pelo artigo, Ivo. Vou compartilhar com meus alunos.

  13. severina

    o q vc quis dizer foi seja
    breve nas palavras na internet?

  14. Magda Joana SIlva

    Olá Ivo, sou a amiga do Zé (cog) de Braga. Já à algum tempo que sigo o teu trabalho e que tenho vindo a entrar na área de acessibilidade Web. Segundo a minha experiência e e tudo o que tenho lido sobre o assunto, acho que o essencial é existir um equilíbrio entre as W3C guidelines, o bom senso e o público alvo para que o web site está a ser desenvolvido. Tanto que conformidade e acessibilidade não são sinónimos.
    Concordo com tudo (quase tudo, as teclas de atalho pode ser um ponto em discussão) o que disseste, tanto mais que algumas coisas são tão óbvias que nem deviam ser postas em causa.
    Acho também que, por vezes, existem mais pormenores a serem levados em conta, como por exemplo a dimensão ou o tipo de informação do atributo title,
    ou simplesmente o facto de muita informação alternativa possa dificultar determinados utilizadores (incrivelmente, isso pode acontecer).
    No fundo, é impossível implementar um web site que funcione correctamente com todos os browsers ou ferramentas alternativas para a navegação na web.

    De qualquer das formas, parabéns pelo teu trabalho e continua escrever os teus posts pois são muito úteis

  15. Ivo Gomes

    Olá Magda. No teu comentário tocas num ponto essencial e que não mencionei no artigo, que é o facto de por vezes haver excesso de preocupação com a acessibilidade e ao tentarmos ajudar usando demasiada informação alternativa, estamos é a complicar ainda mais o acesso à informação.

    Há um post muito interessante sobre isso aqui: Overdoing Accessibility

Blogs que "linkam" para aqui

  1. Felipe Spina in Blog » Blog Archive » 10 erros comuns da acessibilidade na web
    22 de Agosto de 2008, 04:17
  2. 10 erros comuns da acessibilidade na web « Acessibilidade Web
    11 de Outubro de 2010, 14:55

Comente!

* Campo obrigatório, de modo a aparecer o seu nome como autor do comentário

* Campo obrigatório, mas não será mostrado no site

* Campo obrigatório, convém escrever alguma coisa ;)

São permitidas algumas tags HTML, como
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>