A acessibilidade, é um tema de suma importância dentro do desenvolvimento Web. Quando nos preocupamos com este assunto, contribuímos para que todos possam consumir o conteúdo que estamos disponibilizando. Além de ser benéfico para o próprio site, já que aumentará consideravelmente o Search Engine Optimization (SEO).

Dentro deste artigo, vamos ver como podemos melhorar a acessibilidade dentro do ambiente da Web. Primeiramente, para pessoas com deficiência, seja física, visual ou neuroatípicos. E também para aqueles que não possuem uma boa conexão de internet.

People illustrations by Storyset

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.

Estrutura de um site, feita apenas com o elemento div.


Agora reestruturando, utilizando elementos semânticos, temos um resultado muito mais inclusivo!

estrutura de um site, feita com elementos semânticos como header, article, section e footer.

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).

Ferramenta inspetora do google, mostrando um contraste positivo em uma div.


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
Quando a imagem é relevante para a compreensão é importantíssimo ter descrições alternativas. E pior do que não colocar nada, é colocar algo sem sentido. Se imagine

tentando entender o que significa, quando seu leitor de tela fala: "Imagem 1", "Imagem 2", "Notícia 1", "Notícia 2", isso não significa absolutamente nada para a pessoa.

Vamos aprender então o jeito certo, utilizando o atributo alt e até mesmo o title:

<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.

Uma mulher sem conexão de internet.

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.