5 dicas práticas para deixar seu site mais acessível

O trabalho de acessibilidade deve ser levado em consideração tanto na criação do layout, do texto, como no momento de elaborar o código.

15 min. de leitura

Trabalhar com acessibilidade em sites não é apenas uma questão de empatia, mas também público. Existem cerca de 45,6 milhões de deficientes no Brasil, e se pararmos para analisar, esse não é um número irrisório.

O trabalho de acessibilidade deve ser levado em consideração tanto na criação do layout, do texto, como no momento de elaborar o código. Por isso, reunimos 5 dicas práticas para tornar seu site mais acessível. Confira!

1 - Coloque o atributo alt nas imagens

O alt nas imagens é uma propriedade definida na segunda versão do HTML em 1995, e servia originalmente como um texto alternativo para uma imagem que não conseguia ser renderizada no momento da sua requisição. É um atributo que, na época, era necessário devido a conexão lenta generalizada e erros constantes de servidor.

Apesar da web ter evoluído muito de 1995 pra cá e a utilização de imagens na web ter se tornado normal, o uso desse atributo não caiu em desuso pois ele se tornou uma ferramenta valiosa na identificação das imagens pelos principais buscadores como Yahoo (1997) e Google (1998), especialmente depois do lançamento do Google Images (em 2001), que usava o atributo alt como principal critério de busca (entenda a importância do atributo alt no SEO).

Hoje em dia, com o desenvolvimento da Web, a questão da acessibilidade foi cada vez mais enfatizada. Desde 2000, com a popularização dos screen readers (especialmente o Microsoft Narrator, presente no Windows 2000), o atributo alt tem sido importantíssimo para auxiliar pessoas com deficiência visual.

O funcionamento dos screen readers é muito simples: os leitores de tela passam pela imagem e leem o que está escrito no atributo alt.

Devido a isso, surgiu uma necessidade de fazer não apenas um "texto alternativo" nos atributos alt, mas também "descrições" da imagem e todo um trabalho criterioso de copywriting para boa experiência de leitura de imagens para usuários com deficiência visual.

Dicas rápidas para boas descrições alt nas imagens

  • Evite colocar informações nos atributos alt nas imagens meramente decorativas (coloque um atributo alt vazio). Isso atrapalha a experiência dos usuários com deficiência visual.
  • Se a imagem for uma foto, descreva o ambiente, os sujeitos e as ações sem juízo de valores ou adjetivos vagos e subjetivos como "bonito" ou "feio". Seja direto, impessoal e descritivo.

2 - Amenize as cores e contrastes no layout

Amenizar as cores e contrastes nos layouts pode ajudar muito no cotidiano dos autistas de alto funcionamento - que são aqueles que podem adquirir habilidades sociais, o que lhes permite seguir uma carreira profissional, por exemplo.

Podemos dizer (muito superficialmente) que os autistas têm os sentidos super-aguçados. Alguns deles, por exemplo, sentem-se sufocados ao serem abraçados; outros, ainda, incomodam-se em maior nível com perfumes e barulhos.

O vídeo abaixo, realizado pela The National Autistic Society, é um exemplo interessante para nos ajudar a compreender o ponto de vista de um autista sobre a experiência de passear em um shopping.

Agora, quanto ao site: pensando em layout, as cores utilizadas não devem ser muito brilhantes. Cores muito gritantes agridem e incomodam o autista de uma maneira muito aguda. Para isso, uma dica que damos é o uso da Adobe Color CC para buscarmos as cores mais apropriadas para o uso em layouts de sites.

Essa ferramenta nos mostra as cores em esquemas cromáticos análogos, monocromáticos, tríade e complementares. É possível pesquisar por algum termo como "calm" ("calmo", traduzido para português) - que, geralmente, apresentam os tons mais agradáveis para quem apresenta essa síndrome comportamental.

Sobre os contrastes, dê preferência a contrastes mais brandos (porém, tome cuidado, pois você pode comprometer a legibilidade e dificultar a leitura de pessoas com baixa visão).

Em vez de definir layouts com polaridade de contraste extrema, como por exemplo uma página branca (valor hexadecimal #FFFFFF) com letras pretas (hexadecimal #000000), tente diminuir a polaridade para cinza escuro (#333333) sobre branco (#FFFFFF).

3 - Tome cuidado com figuras de linguagem

Os autistas têm uma certa dificuldade de entender figuras de linguagem. Expressões como “de parar o trânsito” não são de fácil interpretação por eles.

Por isso, devemos evitar figuras de linguagem, expressões idiomáticas ou qualquer tipo de metáfora ou analogia – termos que possam resultar em prejuízos para a interpretação do usuário, dificultando a comunicação.

Você pode saber mais sobre o assunto no canal do Youtube do Marcos Prety, autista de alto funcionamento que comenta sobre suas experiências em seus vídeos.

Quando atuamos como designers ou programadores, em geral os textos já chegam prontos e com esses termos, simplesmente para serem adicionados. Caso você receba um texto no qual perceba que existem metáforas de difícil compreensão, tente fazer com que o profissional de copywriting revise o material.

Acessibilidade deveria estar no foco de toda a empresa, mas caso não seja assim, você, que tem interesse pelo assunto e está mais consciente, pode ser o responsável por tornar seu projeto acessível.

4 - Varie as formas de contato

A primeira vista, pode parecer estranho pensar em acessibilidade para surdos num site, pois logo associamos sites a basicamente um ambiente de imagens e textos.

No entanto, se analisarmos bem, há vários pequenos ajustes que podemos fazer num site que tornam a vida de pessoas com deficiência auditiva mais fácil.

Entender os diversos tipos de deficiências auditivas podem ajudar a criar empatia e entregar o melhor resultado de usabilidade e experiência de usuário.

Entre os surdos, podemos separar entre oralizados e não-oralizados.

Se a forma de contato de seu site for apenas por telefone, as pessoas com surdez e não-oralizadas não conseguirão entrar em contato com você.

Para áreas de contato, é sempre bom deixar todas as opções disponíveis: telefone, e-mail visível e formulários.

5 - Não tenha receio de repetir informações importantes ao longo da página

Para deixar seu site acessível para pessoas com dislexia, é importante repetir informações importantes ao longo da página.

Dislexia é um transtorno genético e hereditário da linguagem, de origem neurobiológica, que se caracteriza pela dificuldade de decodificar o estímulo escrito ou o símbolo gráfico. Esta condição compromete a capacidade de aprender a ler e escrever com correção e fluência e de compreender um texto.

É possível uma pessoa com dislexia ler e compreender tão bem (e até melhor) uma informação que outras pessoas que não têm esse transtorno, no entanto, ele deverá repetir duas ou várias vezes o mesmo processo até sua completa absorção. É uma deficiência de fluência, não de capacidade cognitiva.

Outra limitação identificada entre os disléxicos é a dificuldade de armazenar dados, como números de telefone e nomes de pessoas. Às vezes, é necessário repetir várias vezes a mesma informação para eles conseguirem absorvê-la.

Nos sites, podemos amenizar essa dificuldade repetindo links e contatos no cabeçalho e no rodapé, bem como algumas informações importantes ao longo de uma mesma página.

Conclusão

Essas são apenas algumas das melhorias que podem orientar o desenvolvimento dos seus sites. Infelizmente, na correria do dia a dia, nas demandas apertadas de prazo e a falta de difusão desse assunto entre os profissionais e os clientes, questões de acessibilidade acabam sendo negligenciadas. No entanto, vale a pena fazer um esforço nesse sentido - não apenas por questão de empatia, mas inteligência de business.

Dicas de leituras mais aprofundadas:

Gostou deste conteúdo? Assine nossa Newsletter:

Gabriel Vince
Web Developer
Sou o Gabriel Zanardelli Vince Esgalha, Web Developer da Bee Creative. Aqui, nossa essência é a paixão por ser diferente. Seja no planejamento de cada etapa, na inovação de processos, na criação de oportunidades ou na construção de marcas, somos apaixonados por gerar resultados – o que já começa em nossa própria cultura. Afinal, antes de sermos uma agência de publicidade, somos uma empresa de comunicação apaixonada pelo trabalho em equipe, pela produção de ideias e pela inovação. Isso é ser diferente. Isso é ser Bee Creative.Profissional Web, SEO, Design de Sites, Desenvolvimento de CMS, Mídias Sociais, Desenvolvimento de Jogos Online e Desenvolvimento de Aplicativos para Celular (Android).
Facebook
LinkedIn