Boas práticas de acessibilidade [Deficientes Visuais]

Antes de começar a ler este post, esteja certo que você entende sobre o que se trata por acessbilidade. Uma vez isso entendido, podemos falar sobre as áreas relativas à acessibilidade. Deficientes visuais, é o mais falado, portanto, nesta série de posts, irei tratar de boas práticas para eles. Recomendo também a leitura deste site para mais informações sobre problemas visuais e diferenças entre os seus vários tipos. As boas práticas apresentadas neste post, são medidas simples e de baixo custo de implantação, que já resolvem uma série de possíveis problemas no acesso ao seu site.

É importante saber

Por deficiência visual, não se trata somente de pessoas cegas, mas qualquer dificuldade visual que o usuário tenha ( leia-se miopia, vista cansada, dautonismo ), sendo assim as boas práticas devem contemplar todos. Os navegadores e sistemas operacionais hoje, contemplam várias tecnologias assistivas que já facilitam, e muito, o nosso trabalho.

Site acessível precisa ser feio?

Não. É comum se ver por aí, sites que tratam de acessibilidade, mas que não possuem nenhum apelo visual, e são categorizados como “feios”. Normalmente, sites que tratam de acessibilidade são assim mesmo. Possuem um conteúdo extramamente blocado, são sites “quadradões”, com cores sólidas, e poucas imagens. Mas isso não quer dizer que todos os sites que sejam acessíveis, precisem ser feios. Na verdade, graças ao poder da fusão do HTML e CSS, a beleza verdadeira encontra-se na codificação do site, onde se é possível fazer um HTML com todas as características para torná-lo acessível, e usar as CSS ( Cascading Style Sheets, Folhas de estilo ) para dar o apelo visual, cores, efeitos e tudo mais que faça o senso comum julgar o site como bonito.

Facilitando a navegação

Para poder navegar pelo site, os deficientes visuais totais, navegam por tabulação ( TAB ), sendo assim, é legal e facilita muito a vida deles você colocar, de forma invisível ( display: none ) um menu de navegação, com âncoras ( href=”#id-do-objeto” ). Coisas simples como pular para o menu e pular para o conteúdo fazem uma significativa diferença, especialmente quando seu menu é extenso. Em sites de ecommerce esse problema é bem comum, já que seus menus são bastante extensos, fazendo com que o usuário dê por exemplo, 56 tabulações para chegar ao conteúdo, e isso claro com o cuidado de ouvir item-a-item para que não passe do ponto.

Outro problema comum de se acontecer, são links sem referência, os famosos “clique aqui”. Para quem está lendo o texto e tem alguma mensagem deste tipo, é razoavelmente lógico a mensagem “para ir para x, clique aqui“, mas quando se navega por tabulação ( navegação esta, que pula de link em link ), só este texto não diz nada, é apenas um elemento perdido. Portanto, uma medida simples é acrescentar um title à tag”<a>” e durante sua escrita, torná-lo o mais descritivo possível. O exemplo dado anteriormente, uma solução melhor seria usar um “vá para x“. Note também, que a linguagem de web está cada vez mais comum à todos, e essa indicação de clicar no link não é mais necessária como no começo da web, onde ainda não se havia tal cultura de hiperlinks.

Plugins e efeitos, como não restringir o conteúdo

Plugins, por padrão, são problemáticos não só para a navegação de deficientes, como ser necessária a utilização deles. O ideal é não restringir o conteúdo por falta de tal recurso ( recursos como Java VM, Javascript e Flash ). São medidas simples, como colocar em HTML o conteúdo, mesmo que por trás do conteúdo, ou usar um XML para pegar este conteúdo, e disponibilizá-lo de outra forma. No caso específico de javascript, é comum esquecermos de pensarmos em quem não use, mas uma tag simples de HTML resolve todo o problema. Ao invés de usar a mensagem de erro na tag noscript ( documentação ), usem o HTML que seria animado ou o que quer que seja, dentro dessa tag, sejam imagens ou conteúdo textual, para que seu usuário, mesmo sem javascript, consiga ter acesso.