Acessibilidade para pessoas com deficiência física, visual ou neuroatípicos
No mundo inteiro, segundo a Organização das Nações Unidas (ONU), mais de 1 bilhão de pessoas vivem com algum tipo de deficiência.
Só no Brasil, segundo estudo levantado pelo Instituto Brasileiro de Geografia e Estatística (IBGE) em 2015, 6,2% da população brasileira têm algum tipo de deficiência, sendo considerado na pesquisa quatro tipos: auditiva, visual, física e intelectual.
A acessibilidade Web, está em garantir que tanto essa parcela grande da população, quanto pessoas com incapacidades momentâneas (independente de suas limitações) possam entender, interagir, utilizar e navegar por seu sistema.
Vejamos então, alguns pontos que diminuem a acessibilidade no seu site:
Não utilizar corretamente elementos semânticos do HTML
Para ilustrar esse ponto, vou utilizar um exemplo já muito conhecido. Você consegue decifrar o que seria cada elemento da primeira imagem? Eu também não consigo – e muito menos os softwares leitores de tela.
Agora reestruturando, utilizando elementos semânticos, temos um resultado muito mais inclusivo!
Utilizar apenas placeholders
Se uma informação é importante, ela tem de estar na tela o tempo todo; e este não é o caso quando utilizamos apenas placeholders. Em um formulário importante, a pessoa precisa ter certeza de qual campo ela está preenchendo. Por isso, é importante utilizar labels com o atributo for indicando qual o input a ser preenchido. Exemplo de um input acessível:
<label for="username">Seu nome:</label>
<input type="text" id="username" name="username">Baixo contraste nas cores
Quando estamos desenvolvendo, utilizamos de nossa própria percepção das coisas. Mas não podemos assumir que todos terão a mesma percepção. Pense, por exemplo, naqueles que possuem daltonismo. Será que eles vão conseguir realmente entender as cores do jeito que esperávamos?
E aqueles que têm problemas de visão, será que as informações estão realmente legíveis para estas pessoas?
Para nos certificarmos disso podemos usar a própria ferramenta de inspecionar do Google (F12 ou Ctrl + Shift + C).
Não ter uma estrutura de navegação apenas com o teclado
Depender apenas da precisão do mouse para navegar pelo site é um grande problema, para pessoas com deficiência que tiveram sua capacidade motora afetada.
Para solucionar esse problema, nós devemos fazer uma estrutura no html ordenada e que faça sentido durante a navegação com o tab. Porém, muitas vezes isso não é possível; a solução nesse caso então é usar e abusar do tabindex.
<div tabindex="0">Div navegável mesmo não tendo elementos filhos.</div>Imagens sem descrição alternativa
<img src="/images/tech-graphic.png"
alt="Gráfico evolução da Tecnologia (Dados relevantes do gráfico que não estão escritos em algum texto)"
title="Gráfico evolução da Tecnologia">Bloquear o zoom
Bloquear o zoom, além de facilitar a vida do desenvolvedor em alguns casos, passa uma experiência um pouco mais nativa quando a pessoa está utilizando seu site no browser do celular. Você consegue fazer isso facilmente utilizando user-scalable=no na meta tag viewport, dessa forma:
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">Porém, na grande maioria dos casos, isso é horrível para a acessibilidade. Imagine uma pessoa idosa que já possui alguns problemas de visão tentando utilizar seu site, ela pode até mesmo não conseguir ler algo ou clicar em algo simplesmente porque você desabilitou o zoom do site.
Acessibilidade para pessoas com aparelhos antigos ou conexão lenta
Muitos pontos que vimos no tópico anterior também beneficiam esse outro grupo. Porém nós podemos fazer um pouco mais, para que todos consigam acessar o seu conteúdo. Em março de 2021, dos acessos à telefonia móvel que o Brasil registrou, 26,8 milhões foram no 2G, 32,5 milhões no 3G e 181,3 milhões no 4G. E todos sabemos, que mesmo no 4G a conexão nem sempre é das melhores, e muitas vezes há um limite de dados que a pessoa pode consumir. Então, o que podemos fazer para não consumir o plano de nosso usuário por inteiro?
Neste caso, acaba sendo uma questão de priorizar a performance e o suporte a navegadores antigos. Porém, podemos também utilizar de conceitos como Offline-first, que garantem que em perda de conexão, o usuário ainda consiga navegar pelas páginas cacheadas pelo service worker e até mesmo que alterações fiquem salvas localmente durante a perda de conexão e sincronizadas posteriormente.
Formas de testar a acessibilidade de um site
A maneira mais simples de testar seu site é utilizando a ferramenta de Lighthouse da Google, encontrada no próprio navegador (F12 ou Ctrl + Shift + C), que além de apontar quais pontos são problemáticos e estão prejudicando a compreensibilidade de seu site, ele também sugere algumas soluções e links para a documentação.
Outra maneira, muito mais aprofundada e interessante, é baixar um software que realiza a leitura de telas e simular uma experiência real. Por exemplo, temos o NVDA, um software de leitura de tela para Windows gratuito e Open Source. E para Linux temos o Orca, também gratuito e de código aberto.
Conclusão
Nos preocupando em fazer um site inclusivo e acessível a todos, conseguimos um desempenho melhor de nossa página e um código mais limpo, ou seja, acabamos beneficiando a todos incluindo nós mesmos.