Acessibilidade consiste na possibilidade de acesso a um lugar ou conjunto de lugares. Significa não apenas permitir que pessoas com deficiência ou mobilidade reduzida participem de atividades que incluem o uso de produtos, serviços e informação, mas a inclusão e extensão do uso destes por todas as parcelas presentes em uma determinada população, visando sua adaptação e locomoção, eliminando as barreiras, consiste também em ter acesso a todo e qualquer material produzido, em áudio ou vídeo, para tanto adaptando todos os meios que a tecnologia permite.

Na internet, a acessibilidade é algo extremamente importante. Há uma enorme quantidade de usuários com algum tipo de deficiência e limitar o acesso à esses usuários, ao desenvolver um site com péssima acessibilidade, além de ser irresponsável é também crime em alguns países. Sim, por lei, você é obrigado a tornar seu site acessível, principalmente se o site for de órgãos do governo.

A acessibilidade digital era meio complexa até poucos anos atrás. Recentemente a W3C, organização que mantém o HTML e diversas variantes, implementou o ARIA (Acessible Rich Internet Applications). O ARIA foi originalmente proposto em 2015, já sendo amplamente usado em 2017, principalmente nas novas versões de frameworks como Bootstrap e Foundation. Infelizmente para sites que usam temas comprados, é bastante complicado adaptá-los para o ARIA, já que qualquer alteração pode ser sobreescrita quando se atualiza o tema. Uma boa alternativa é usar child themes, mas para quem não sabe como fazer, o tempo de desenvolvimento torna-se enorme.

Um exemplo do ARIA na criação de um breadcrumb é o seguinte.

No Bootstrap, o uso da role=”alert” para exibição de alertas.

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>

Além disso, o novo Bootstrap também já inclui o ARIA na exibição de links que funcionam como botões. Por exemplo:

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Percebam que os tipos input button, submit e reset não levam nenhuma informação do ARIA. Por que eles estão seguindo a função original deles, ou seja, botão. O mesmo serve para o tipo button. Já o “a”, cuja função original é servir de link está definido com a role=”button”, ou seja, o tipo “a” é um botão e não um link.

Nos próximos artigos eu vou fazer um tutorial passo-a-passo de como tornar seu site mais acessível. Fiquem ligados nos próximos “capítulos”…

Leave a Reply

Your email address will not be published. Required fields are marked *