Pensando em acessibilidade também no design

Quando falamos de acessibilidade na web, muitas vezes pensamos em descrições #PraCegoVer ou então em otimização de código HTML para dispositivos leitores de tela, mas também é importante falarmos sobre o design.

Se pessoas cegas não podem ver o seu desenho, por que se preocupar com acessibilidade no layout?

Você não sabe ler braile, na na na na.

Acontece que quando falamos de acessibilidade na web, não estamos pensando apenas nas pessoas que de fato não enxergam, mas sim em toda uma gama de necessidades que muitas vezes passam despercebidas ao desenharmos uma tela.

É claro que é fundamental utilizar de boas práticas no código e em descrições, para facilitarmos ao máximo a utilização de navegações assistidas, mas o pensamento em acessibilidade não pode parar por aí.

Nós precisamos fazer todas as coisas acessíveis a todas as pessoas.

Então aqui vão algumas pequenas dicas que podem melhorar a vida de muita gente por aí nas interwebs:

Pense em contrastes

Muita gente já passou por isso: cria uma apresentação linda , toda clean, minimalista, fontes cinza no fundo branco, e quando vai passar para o projetor... não aparece nada!

Não são apenas pessoas com algum tipo de dificuldade visual, como daltonismo, que precisam de um bom contraste para entender o seu conteúdo; isso é também importante para pessoas que possuem um monitor mal calibrado, estão utilizando algum tipo de projetor ou simplesmente para evitar a fadiga ocular.

Exemplo de contrastes bom e ruim, de um ótimo artigo sobre o assunto no 24 ways:

É por isso que o WCAG* afirma que cor de fundo e cor do texto devem ter uma relação de contraste de 4.5: 1. Isso pode parecer complicado, mas a Lea Verou criou essa ferramenta ótima (e eu devo ser a maior fonte de visitas dela) para ajudar na hora de verificar se o contraste do seu site passa ou não pelas regras do W3C.

ferramenta de teste de contrastes, da Lea Verou.

Basta você testar sua cor de fundo e de texto, que ele te diz se passa ou não no WCAG, e com qual nível.

Faça seu site responsivo

Quando falamos em acessibilidade, não estamos falando apenas em pessoas que possuem algum tipo de dificuldade, mas também é muito importante levar em consideração de qual dispositivo qualquer pessoa vai acessar o seu site. Por isso é fundamental que o seu site seja responsivo.

Imagem que mostra as adaptações do site “Think with Google” em diferentes tamanhos de tela

E fazer um site responsivo não é apenas diminuir o seu conteúdo para que caiba em uma resolução de 320px de largura; é preciso repensar a sua estrutura e as maneiras as quais o teu conteúdo será apresentado. Linguagem e contexto são indispensáveis.

Se você quiser entender um pouco mais sobre o assunto, eu recomendo o This is Responsive, site que possui uma coleção de recursos sobre os mais variados aspectos de web design responsivo.

Destaque o seu conteúdo de outras formas que não apenas cor

Essa dica vale principalmente para estruturas de menus, onde queremos marcar em qual seção da página estamos, por exemplo. Pensando nas pessoas que tem dificuldade em diferenciar cores, é importante não deixar dúvidas a qual item estamos nos referindo.

Ao adicionar uma simples linha abaixo do “item 2”, já fica bem mais claro sobre qual item estamos falando, sem precisar ficar preocupado se o contraste entre as cores está marcante o suficiente, para quem quer que seja.

Nunca utilize icon font

Com a ascensão do Bootstrap e outros frameworks parecidos que se utilizam dessa técnica, ícones feitos em formato de fonte começaram a ser bem difundidos por sua facilidade de implementação (é só adicionar um arquivo de fonte ao site!), além da maneira descomplicada de mudar uma cor ou tamanho sem perder qualidade.

Lindo, não é? Erm, não.

Pessoas que sofrem de dislexia muitas vezes se utilizam de uma fonte específica, que facilita a leitura e compreensão dos conteúdos de qualquer site em que elas entrarem. Essa fonte substitui todas as fontes que você colocou no site que desenhou — mas pera! Se você usou seus ícones em formato fonte, a tal fonte nova irá substituir também os seus ícones.

Exemplo de como uma pessoa disléxica que utiliza de fonte específica iria ver o site Github, a apresentação Death to Iconfonts

Aqui tem uma apresentação ótima sobre o tema, e ainda dá a dica final: se você quer um ícone lindão, escalável, colorido e que pode até se mexer, use um SVG. ;)

Cuidado com o carrossel

Se você puder evitar o uso de um carrossel, evite. É comprovado que pessoas com paralisia cerebral tem dificuldade de chegar até o final do conteúdo do seu carrossel, sem que ele mude de slide antes.

Aqui nesse twitt do Brad Frost (maravilhoso! recomendo segui-lo) mostra bem direitinho essa situação:

Esses são apenas alguns cuidados que tomam pouco tempo na hora de planejar e desenhar um novo site, mas que fazem uma baita diferença em ajudar a tornar a web um lugar mais inclusivo.

Afinal de contas, a web deve ser para todos, então o mínimo que podemos fazer é tentar pensar em todos quando criamos um site. ;)

*Se quiser saber um pouquinho mais sobre as regras de acessibilidade para a web (WCAG 2.0 do W3C) você encontra tudo nesse link aqui: https://www.w3.org/TR/WCAG/