3 dicas simples de acessibilidade (e uma dica extra de brinde)

6 Dec

Acessibilidade web é uma coisa que todo mundo sempre deixa pra lá. As desculpas são das mais esfarrapadas possíveis: o tempo, o orçamento, essas coisas que a gente fala quando não queremos ir na academia ou visitar aquele parente distante e que não queremos ver. Tudo isso por achar que acessibilidade é algo complicado.

O fato é que acessibilidade não é lá esse bicho de sete cabeças que todo mundo fala. Pode até uma coisa meio batida de se dizer, mas de vez em quando aparece alguém com essa ideia de novo. Então, esse post é para mostrar que acessibilidade pode ser simples, sim. Quer ver como podemos deixar qualquer site mais acessíveis com apenas 3 dicas simples, onde não precisaremos refazer todo o código do zero ou algo assim?

Vamos lá:

1)  Cor
Nunca forneça informações no site que possam ser passadas apenas por cores; isso pode fazer com que os usuários que têm dificuldades em identificar as cores não convertam ou tenham um experiência ruim. Exemplo: fazer com que as ofertas do site sejam sinalizadas somente (eu disse somente) com uma tarja vermelha, sem nenhum recurso textual.
É importante também prestar atenção no contraste entre o fundo e a fonte, os botões, imagens, menu.
Ferramentas legais? A Colorblind Web Page Filter, que mostra como pessoas com diferentes tipos de daltonismo veem um site, e a Coblis – Color Blindness Simulator, que mostra como as pessoas com daltonismo veem uma imagem especifica.

 

2) Língua
Sempre informe qual é a lingua que está sendo falada no site. Isso ajuda os ledores de tela (sim, ledores, você não está lendo errado) a acharem o “sotaque certo”. Isso também vale quando, ao longo do texto, a língua usada muda.
Como fazer isso? Usando a tag lang.
Para falar que a língua é português do Brasil: lang=pt-BR.
Para falar que a língua usada é inglês dos Estados Unidos: lang=en-US.
Onde colocar a tag lang? Normalmente, ela junto vai na tag <html>, assim: <html lang=”pt-BR”>.
Se a mudança de língua for somente em uma parte do texto, pode-se usar junto à tag span, assim: <span lang=en-US>
Existem outras formas de incluir a linguagem no código html, e elas podem ser vistas nesse documento da W3C.

 

3) Tabela
Calma, podemos sim usar tabelas! Só que é extremamente importante que usemos tabelas apenas para dados que precisam de tabelas. Nada de usar tabelas para ajustar textos em duas colunas, ou textos e imagem lado a lado.
Também nada de usar imagens no lugar de tabelas; é uma coisa de partir o coração ver uma tabela cheia de dados importante e relevantes se perder por motivos estéticos.

Pausa para a explicação óbvia: não estou falando que estética não é importante, claro que não é isso, mas a beleza de uma coisa qualquer nunca deve ser colocada à frente da sua razão de ser. Por isso, se a razão de existir uma tabela é fornecer os dados que estão contidos nela e a tabela está em um arquivo .jpg, por exemplo, a tabela não estará fornecendo os dados em sua plenitude; nem os ledores de tela, nem os buscadores – que acabam se comportando como os leitores de tela – vão ter acesso a essas informações. E não é isso que queremos, não é mesmo?

 

Brinde – Menção honrosa: Imagens
Já que estamos falando de arquivos .jpg, vamos falar das imagens: elas têm que ter uma descrição, para que todos saibam o que está acontecendo naquele arquivo ali. Isso ajuda as pessoas que usam leitores de tela, além de ajudar o site a ficar bem posicionado nos buscadores, esses lindos. Eles não têm bola de cristal para adivinhar o que está ali, então temos que dizer pra eles o que está acontecendo.

Mas, como fazer?

  • Nomeie bem o arquivo. Se a imagem é um sapato peep toe com glitter, o mínimo que eu posso esperar de você é que o nome dessa imagem seja sapato-peep-toe-glitter.jpg.
  • Coloque tag alt na sua imagem. Ainda com nosso exemplo menininha, seria “Sapato peep toe com glitter”.

Então, juntando tudo, a tag de imagem perfeita seria:

<img src=”sapato-peep-toe-glitter.jpg” alt=”Sapato peep toe com glitter”>

Com certeza, só de ler essa tag você deve ter imaginado algo parecido com isso:

Sapato peep toe com glitter

Bom, ao longo desse texto vocês devem ter percebido que SEO e acessibilidade tem muita coisa parecida. Isso acontece porque os buscadores sempre buscam sites fáceis de usar, de entender e que todos possam ter a chance de converter. Por isso que as boas práticas de SEO se confundem muito com tudo que é legal em usabilidade e acessibilidade. E é isso que é a parte bonita disso tudo. </sentimental>

 

PS.: quer ver como é usar um leitor (ou ledor, tanto faz) de tela? Experimente o DOSVOX, que é gratuito. É uma experiência muito pertubadora (quando se acessa um site sem acessibilidade), mas importante para vermos como os usuários desses programas têm que se virar.

PS2: como fazer um post sobre acessibilidade sem esse vídeo clássico do pessoal da Digital Acesso?



27 Comentários to “3 dicas simples de acessibilidade (e uma dica extra de brinde)”

  1. Núbia Souza December 6, 2011 at 8:56 am #

    Parabéns, pelo Post, muito bom. Espero que um dia a web amadureça de uma forma que todos possam entender que: Não basta matar tabelas, tem que ser acessível. E que acessibilidade não é um luxo, pelo contrario, e as pessoas com necessidades especiais, também são público-alvo também compram, lêem noticias e por ai vai.

    • Ana Martins December 6, 2011 at 9:05 am #

      Obrigada, Núbia!
      Acessibilidade é uma coisa que não é tão falada, mas tem tanto a ver com tudo: com usabilidade, com SEO, com conversão (e com dinheiro)…

  2. Raphael Figa December 6, 2011 at 10:12 am #

    Ana está de Parabéns pelo post,

    O tipo de post que mais curto, sucinto, objetivo e muito informativo.
    Como disse o professor Luli Radfahrer, ECA-USP antes tabless, programação modular, frameworks era luxo de algumas algumas software houses hoje é pré requisito para se estar no mercado. E acredito que estamos amadurecendo e logo usabilidade e acessibilidade deixará de ser luxo e entrará na lista de pré requisitos.

    • Ana Martins December 6, 2011 at 10:48 am #

      Sim, Raphael, espero que a acessibilidade deixe de ser luxo. Afinal de contas, não estamos fazendo favor nenhum pra ninguém deixando um site mais acessível, e sim fazendo com que ganhemos mais dinheiro! 😀

  3. womanwired December 6, 2011 at 10:29 am #

    Eu adoro os textos de vcs, sempre termino com um sorriso! mesmo
    bjs

  4. Rogério Costa (@matofino) December 6, 2011 at 10:32 am #

    Além do sensibilidade exposta no texto, que vídeo!?!
    Valeu, @anamartins!

  5. Alexsandro December 6, 2011 at 10:41 am #

    Belas dicas Ana :) e so gostaria de complementar que desejo aos sites em flash que morram todos. Amem! :)

    • Ana Martins December 6, 2011 at 10:50 am #

      ahahahaha, Alexsandro, os sites em flash merecem morrer mesmo. Mas o flash tem lá suas vantagens se bem utilizado, não é mesmo? 😀

  6. George Harrison December 6, 2011 at 10:59 am #

    Belo post esse seu Ana…
    Essas dicas são essenciais para que quer trabalhar com Acessibilidade!
    É nois no SEO!

    @seo_harrypotter

    • Ana Martins December 6, 2011 at 11:09 am #

      Obrigada, George! É nóis no SEO!

  7. Renata Tibiriçá December 6, 2011 at 11:06 am #

    Muito bom mesmo, Ana!
    É importante também deixar claro alguns conceitos super comuns, mas que muita gente confunde: Acessibildade X Usabilidade. Se relacionam? Sim. São a mesma coisa? Não!

    O post da Núbia semana passada esclareceu o que é Usabilidade e hoje o seu o que é Acessibilidade! #ficadica

    Enfiãm… parabeãns! hehehe =)

    • Ana Martins December 6, 2011 at 11:10 am #

      Obrigada, Renata! 😀
      Sim, são duas coisas que têm tudo a ver, mas não são a mesma coisa, néam!

      • Vanessa Michelon December 6, 2011 at 1:55 pm #

        Oi, parabéns Ana pelo post, é de muita utilidade para mim, tenho grande interesse nesses assuntos, estou aprendendo a desenvolver sites, quero sempre poder estar inteirada de tudo o q nao pode faltar para dar acessibilidade e também usabilidades nos sites.

        • Ana Martins December 6, 2011 at 5:33 pm #

          Vanessa, muito obrigada!
          Volte sempre aqui no SEO de Saia! 😀

  8. Pablo Ribeiro December 6, 2011 at 12:02 pm #

    Por favor depois se poder apague o meu comentário lá encima pois não foi direito rs,

    No lance do alt eu tenho uma dúvida sobre, eu posso colocar o alt, e o title como o mesmo conteúdo? Ou teria que ser o conteúdo diferente?

    Belo post e obrigado por divulgar o seu conhecimento.

    • Ana Martins December 6, 2011 at 5:55 pm #

      Sim, Pablo, você pode colocar os dois com o mesmo conteúdo, não tem problema. Eu geralmente só coloco o alt, mas se você reparar nessa foto do post, eu coloquei os dois! 😀

  9. Studio Mundo December 6, 2011 at 7:40 pm #

    Muito bacana as dicas,

    Nós que trabalhamos com microempresas sabemos como é difícil o cliente entender a importância, e quando falamos em Otimizar estamos falando em tornar melhor e acessibilidade é um ponto fundamental.

  10. Pablo Ribeiro December 9, 2011 at 11:14 am #

    Obrigado :)

  11. smoke May 29, 2012 at 12:12 pm #

    Otimas dicas
    Eu só corrigiria uma coisa, a tag perfeita seria

    fechando a tag

    • smoke May 29, 2012 at 12:13 pm #

      img src=”sapato-peep-toe-glitter.jpg” alt=”Sapato peep toe com glitter” />

      não é possivel usar html então cortou tudo
      faltou fechar a tag img />

      =D

  12. Angelo May 30, 2012 at 5:37 pm #

    Sua 1ª dia é referente a cor. O site da globo.com é separado por cor, na sua opinião, isso é um problema?

Trackbacks and Pingbacks

  1. Acessibilidade na redação e pelo direito de entender ? - January 6, 2012

    […] Veja também: 3 dicas sobre acessibilidade […]

  2. 4 dicas de acessibilidade web | | - February 13, 2012

    […] post você tem 3 dicas simples de acessibilidade, então resolvi escrever aqui mais 4 dicas simples para ajudar você a pensar em todos os usuários […]

Deixe um comentário