Um guia prático da acessibilidade web: Parte 2: Implementando e desenvolvendo uma página acessível.

No artigo passado vimos a importância da acessibilidade web e como podemos enxergar ela em nossa própria produção.

Na segunda parte, vamos abordar os vários elementos estruturais do nosso HTML/CSS/JS de forma a tornar nosso site, acessível a todos. Todos os conteúdos abordados aqui podem ser implementados em qualquer framework front-end assim como em código puro. E ai? Estão prontos?

O HTML semântico

A semântica HTML é nada mais do que utilizar as tags certas, nas horas certas. Parece simples não é? Mas saiba que muitos de nós não a utilizamos da forma correta.

A maioria dos sites é repleto de um emaranhado de tags

e não utiliza a estrutura de tags pré-definidas pelo HTML. Qual o problema disso? Quando um leitor de tela passar pela página, ele se perderá facilmente no posicionamento do site, e pode, por consequência disso, acessar o footer antes da nav, ou o título do texto após o seu conteúdo, dentre vários outros problemas acarretados dessa má estruturação.

O HTML5 veio com novas tags que resolvem completamente essa estrutura. Facilmente podemos adequar a construção do nosso front de forma que ele siga essas diretrizes. Além de ganharmos um melhor posicionamento nativo da página, ainda estaremos ajudando os usuários de leitores de tela a se localizarem.

Labels em Formulários

Os formulários sempre são um problema para o publico das pessoas com deficiência. A maioria desses problemas se dá em virtude da má associação das labels a seus respectivos inputs.

O HTML tem uma solução natural para isso, o atributo for para as tags label. Esse atributo referencia o input na qual ele descreve. Porém, ele é infelizmente pouco utilizado na maioria dos formulários que encontramos na web.

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

Descrições alternativas de imagem

Quem já é familiarizado com o uso de frameworks como react e já tentou inserir uma imagem em seu código, já se deparou com a obrigatoriedade do atributo alt, certo? O atributo alt se refere a alternative description e é mais uma forma de o leitor de tela para pessoas com deficiência visual receber como dado a descrição da imagem no qual ele lê em tela.

É muito importante sempre inserirmos uma descrição sucinta sobre a imagem apresentada, pois, a presença da descrição pode em alguns casos gerar conflitos de entendimento em virtude de sua má descrição.

Titulos descritivos

Além da descrição em imagens, o nosso front-end permite que todo e qualquer elemento seja melhor descrito. Isso é feito através do atributo title e é ativado quando o componente recebe foco. Usa-lo é uma boa alternativa para descrever melhor certas áreas complexas do seu projeto.

Integrações com linguagens de sinal

Usuários surdos que somente possuem a capacidade de se comunicar por meio de linguagem de sinais pode precisar usa-la para navegar no seu site. Felizmente, existem inúmeras alternativas dependendo do pais que você more e do publico na qual quer atingir. Grande parte dos plugins são apenas importações de código Javascript na tag head. Outros podem exigir instalação de pacotes.

A imagem abaixo é um exemplo do HandTalk, biblioteca de tradução para língua brasileira de sinais.

Adaptação de cores

Algo que tem entrado muito na moda das novas interfaces é a presença dos dark themes. Eles reduzem a intensidade da luz nos nossos olhos, mantendo-os mais confortáveis.

Além do tema escuro, existem muitos outros artifícios que podemos criar para incluir pessoas com deficiência visual ou com daltonismo em nosso site. Um deles, muito comum em sistemas operacionais é o tema de alto contraste.

O alto contraste serve para reduzir a quantidade de cores em uma aplicação de forma que, assim como o tema escuro, suas características se tornem visualmente mais perceptivas e menos danosas ao olho humano. Porém neste caso a escolha das cores é seletiva.

As cores mostradas acima são utilizadas no sistema Windows para os temas de auto contraste. Vários estudos mostram que essa paleta é extremamente efetiva para usuários de baixa visão possam enxergar de forma melhor os elementos do site.

A partir da construção de um tema com baixa quantidade de cores, é possível criarmos diversas ramificações dele para incluir também usuários com daltonismo.

E então, por onde começo?

Depois de virmos tudo isso e entender a importância da acessibilidade, por onde podemos começar?

A resposta é, simplesmente começar. Não precisamos incluir todas as funcionalidades abordadas aqui, mas se incluirmos ao menos uma delas, podemos mudar a vida de um usuário do nosso sistema e com isso, influenciar novas pessoas a inclui-las também.

Obrigado pela leitura.
Me siga no dev.to e no linkedin