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

imagem-topo-3-dicas-acessibilidade

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.

Fonte: SEO de Saia

Postagens Relacionadas