Já faz muito tempo que vi um texto muito legal no SEO de Saia, onde falavam de acessibilidade na internet. O assunto é de extrema importância, pois estamos falando de um público que já tem uma dificuldade natural para acessar qualquer site e se ninguém ajudar, eles não vão conseguir mesmo.
Não vou ter a hipocrisia de falar que praticamente todos os sites da internet não tem qualquer preocupação com acessibilidade porque mesmo aqui no Midiatismo confesso nunca ter tido feito testes e/ou trabalhado a acessibilidade a fundo. As ferramentas para os portadores de necessidades especiais estão melhorando, cada vez aprendendo a ‘ultrapassar as barreiras’, mas não custa a gente ajudar e tentar melhorar os sites, certo?
Utilize bem e de forma inteligente as cores do site:
Como bem lembrado pela Ana Martins em seu post, é importante que qualquer site tenha um visual simples de ser lido, seja por uma pessoa, robô ou portador de necessidades especiais. Portanto é extremamente importante que se preste bastante atenção nos contrastes. Nada de escrever com com branco no branco.
Lembre-se também de não valorizar tanto o elemento da cor para a identificação de alguma informação. Por exemplo, se você quiser destacar algo, procure deixar este destaque por conta de um texto, não apenas utilizando um fundo vermelho em algo.
Se você quer testar melhor o seu site e as cores utilizadas para quem tem algum tipo de daltonismo, recomendo dar uma olhada no “Color Vision“, que mostra como cada sintoma de daltonismo enxerga as cores. Isto é fundamental para você saber se o seu site pode ser visto bem por qualquer pessoas com este problema de visão.
Sabemos que apenas 0.005% da população tem algum problema na identificação de cores, mas não podemos tirar a oportunidade de acessar um site desse pessoal.
E claro, dê sempre preferência ao conteúdo em texto, não em imagem.
Identificação da língua utilizada:
Um outro recurso, que em um primeiro momento tem uma ligação muito mais forte com programação é a definição de qual língua aquele site está usando em seus textos. Na verdade este é um processo bem simples, que não exige muito de quem está por trás.
E também devemos lembrar que na grande maioria de serviços e programas utilizados para a programação este código já está inserido. Se você criar um site usando WordPress (ou outro CMS) ou mesmo começando do 0, usando programas como o Adobe Dreamweaver, esta parte já vem pronta.
O código em questão é o lang=”pt-BR”, que geralmente fica dentro da tag <html>, no começo do código.
Mas não podemos nos esquecer de um detalhe muito importante, que esta informação pode ser utilizada em trechos da programação, como por exemplo, em um parágrafo que esteja em alguma outra língua. Desta forma você pode apenas adicionar o seguinte código ao trecho:
<span lang=”en-US”> A message in another language </span>
Lembrando que este é para mensagens em inglês, você deve alterar conforme o país. Se fosse em alemão, seria:
<span lang=”de”>Jede Nachricht in einer anderen Sprache</span>
Você pode ver mais informações sobre a tag nesta página e também a lista completa de código de linguagem nesta outra página.
Usar tabelas como tabelas, não como estrutura de layout:
Uma moda muito antiga, que felizmente está acabando, é a de usar as tabelas como ferramenta para construir e estrutura layout. Para quem não entende de programação, as ‘tabelas’ são a tag html <table>, usada antigamente para construir layouts de sites, etc.
Há inclusive um movimento contra a utilização de tabelas, chamado de tableless (menos tabelas) que ajudou bastante a mostrar o uso errado desta tag html.
Mas o que isso tem a ver com acessibilidade? Simples. As tabelas foram feitas para tabelas conteúdo (oh, genial) e não para estrutura layout. Usar table para estrutura um site pode confundir os leitores de telas, levando-os a acreditar que estão em uma grande planilha de Excel.
Utilize as tags certas em links e imagens:
Outro recurso muito importante, tanto para acessibilidade como para o SEO, é identificar corretamente as imagens. O código normal de uma imagem é:
< img src=”http://www.linkdaimagem.com/1torreeifelparisfrancadu87a1212319912.jpg” />
Mas se formos ser mais inteligente, o código correto para esta situação seria:
< img src=”http://www.linkdaimagem.com/torre-eiffel-paris-na-franca.jpg” alt=”Foto da Torre Eiffel em Paris, na França” />
Não é apenas para ser mais bonito, é que tanto os buscadores como os leitores de telas utilizam o nome dos arquivos e principalmente a tag ALT para dizer exatamente sobre o que se trata aquela imagem, ajudando muito nas questões de acessibilidade.
Observações:
Sim, é bem mais chato e complicado construir um site pronto para qualquer pessoa visitar. Mas deve se tornar uma tarefa padrão, valorizando cada vez mais qualquer pessoas que tenha a possibilidade de acessar o seu site.
Claro que este post tem um foco na acessibilidade visual, mas estas regras são amplas e acabam ajudando portadores de qualquer necessidade especial para a navegação.
