O que é Acessibilidade Web e como tornar seu site mais acessível

Você já parou pra pensar em como pessoas com dificuldades motoras, visuais, auditivas e cognitivas acessam a web? Muito fala-se em usabilidade e experiência do usuário, porém, são poucos os sites que realmente permitem uma navegação completamente entendível por todos.

Para ajudar nesse cenário, existe o W3C (Consórcio World Wide Web). Trata-se de uma organização internacional que agrega empresas e outras organizações com o objetivo de desenvolver padrões para a World Wide Web, promovendo a eliminação de barreiras na web e estimulando que as páginas sejam construídas de forma que possam ser acessadas por todas as pessoas.

Entendendo um pouco mais sobre acessibilidade na web

A Cartilha de Acessibilidade na Web disponibilizada pela W3C Brasil define a acessibilidade web como “Permitir que qualquer indivíduo, utilizando qualquer tecnologia de navegação, visite qualquer sítio e obtenha completo entendimento das informações contidas nele, além de ter total habilidade de interação”.

Ela também estabelece quatro princípios que, juntos, constituem o fundamento da acessibilidade na web. São eles:

Percepção: toda informação e componentes da interface devem ser apresentados de uma forma que os usuários possam perceber.
Operável: os componentes da interface devem ser operáveis. Ou seja, os usuários devem ser capazes de operar a interface e essa não pode requisitar interações que o usuário não pode executar.
Compreensão: as informações e a interface do usuário devem ser compreensíveis.
Robustez: o conteúdo deve ser robusto o suficiente para que seja interpretado de forma concisa por uma grande variedade de agentes de usuários, incluindo tecnologias assistivas (ex: leitor de tela).

Para que o seu site seja acessível, você deve se atentar a esses quatro itens, garantindo que todos sejam englobados e incorporando os padrões web disponibilizados pela W3C.

Por que construir um site acessível?

Antes de mais nada, é preciso lembrar que desenvolvemos uma aplicação para outras pessoas. Uma das 10 verdades em que o Google acredita deixa isso bem claro:

Foco no usuário. Todo o resto é consequência.

Ou seja, tudo que fazemos deve ser pensado e construído para fornecer uma experiência melhor para o usuário.

Costuma-se pensar que desenvolver um site 100% acessível é difícil e que não vale a pena. Entretanto, apesar de alguns cuidados a mais serem necessários durante sua codificação, algumas normas são extremamente simples e fáceis de implementar.

Ter um site acessível pode garantir uma vantagem competitiva maior dentro dos negócios e maior visibilidade nos mecanismos de busca, uma vez que seu site possui conteúdo com acesso mais fácil.

Segundo dados do IBGE, 23,9% da população brasileira, ou seja, mais de 45 milhões de pessoas, declaram ter alguma limitação relacionada à deficiência. Imagine só ter um site que seja acessível para todas essas pessoas?

Pense que ele poderá ser acessado por 100% dos usuários, e não apenas por uma parcela! Isso pode resultar em clientes fiéis e que sempre vão retornar à sua página, uma vez que ela atende a todas as necessidades deles.

Além disso, ter um site que esteja de acordo com os padrões web quanto ao conteúdo, estrutura e comportamento, resulta em uma redução dos custos com manutenções e melhoria no desempenho.

Não pense em acessibilidade como um custo a mais, seja de tempo ou dinheiro. Acessibilidade é um investimento e deve ser parte do processo.

5 dicas para tornar seu site mais acessível

1. Labels

Sempre que puder, use o elemento label para associar o texto com elementos do formulário – isso torna muito mais fácil que o usuário saiba do que o campo se trata.

E não esqueça que o atributo for deve corresponder ao atributo id do input para que o código não se torne confuso. Veja o exemplo abaixo:

<label for="nome">Nome:</label> 
<input type="text" name="nome" id="nome">

Caso você não possa inserir uma label junto ao campo, o que geralmente acontece por uma questão estética, adicione o atributo aria-label ao input com a descrição necessária. Ele é bem suportado por leitores de tela e outras tecnologias assistivas. Exemplo:

<input type="text" name="nome" id="nome" aria-label="nome">

2. Placeholder

A dica é: EVITE.

Tente ao máximo não usar o atributo placeholder como única opção para descrever um campo de formulário.

Primeiro porque assim que o usuário digita qualquer coisa no campo, a informação do placeholder some. Se essa informação for importante para o usuário, ela deve estar disponível a todo momento, inclusive enquanto ele digita.

Segundo porque, geralmente, o texto do placeholder possui um contraste muito baixo em relação a cor do campo, o que pode gerar problemas para pessoas com baixa visão.

Para saber se o nível de contraste das cores é acessível, você pode usar o Color Contrast Checker. Basta você inserir duas cores e ver se elas passam nos testes de acessibilidade, como você pode observar na imagem abaixo:

Esse tipo de teste serve não só para o placeholder, mas também pra qualquer outra combinação de cores que você usar no site.

3. Criando uma navegação lógica via teclado

Muitas pessoas precisam usar a navegação via teclado para ler e saber todas as informações contidas em um site. Geralmente usa-se a tecla tab para ir passando o foco de elemento em elemento.

No HTML, a ordem padrão do foco dos elementos segue a mesma ordem em que os mesmos são dispostos no código. Ou seja, se no código você tem uma label e logo depois um input, a ordem será label > input.

Porém, sabemos que nem sempre é possível dispor os elementos em uma sequência lógica no código. E, pra isso, temos o atributo tabindex. Através dele é possível definir uma ordem de navegação utilizando um valor que pode ir de 0 a 32767.

Vamos supor que você tenha uma tabela com Séries e Filmes e que você queira que seja possível navegar primeiro por todas as séries e depois por todos os filmes. Acesse o link abaixo para conferir como usaríamos o tabindex:

https://codepen.io/ritalino/pen/bxaMNb

Use a tecla tab para navegar pela tabela. Se quiser saber qual comportamento teria sem o tabindex, basta retirar o atributo do código.

4. Dê feedback através de texto – sempre.

Sempre que o usuário realizar uma ação, evite dar apenas uma resposta visual como uma imagem ou a mudança de cor em algum elemento, por exemplo.

É comum em formulários, mudar a cor da borda dos campos para vermelho quando o valor inserido não se encaixa no padrão estabelecido ou quando é nulo, como na imagem abaixo:

Ao apresentar um erro, certifique-se de dar todas as informações necessárias ao usuário para que ele possa corrigí-lo.

Se o erro for no envio das informações, apresente um texto explicando que houve um problema e qual medida o usuário pode tomar.

Se for no formato do valor inserido, informe o campo em que houve o erro e dê exemplos de valores válidos.

Caso seja por conta de um valor nulo, indique mais uma vez o campo e explique o problema.

5. Inclua um texto descritivo “alt” e “title” nas imagens

E, por último, mas não menos importante: use o atributo alt e title para atribuir uma descrição às imagens do site. Assim, pessoas que usam leitores de tela podem entender a mensagem que cada imagem está apresentando. Se a imagem contém um texto, ele também deve ser descrito.

Use o title para dar uma breve descrição da imagem – ele também pode ser visto quando o mouse é passado por cima da foto. E use o alt para dar uma descrição mais detalhada, ela é essencial para pessoas com baixa ou nenhuma visão.

Exemplo:

<img src="groot.jpg" title="Bebê fantasiado de Groot" alt="Bebê fantasiado de árvore referenciando o personagem fictício Groot da Marvel Comics" />

Resultado:

Caso a imagem seja apenas decorativa e não apresente informações importantes para o usuário, você pode deixar o atributo vazio, assim o usuário não é “distraído” e pode focar nas informações mais importantes da página.

Mas como saber se meu site está dentro das normas?

Existem softwares avaliadores de acessibilidade que analisam páginas web, procurando por erros que possam resultar em algum tipo de barreira para os usuários. A partir dessa análise ele é classificado conforme os três níveis de acessibilidade estabelecidos pelo WCAG: “A”, “AA” e “AAA”.

Nível A: o site classificado nesse nível ainda possui barreiras significativas de acessibilidade.
Nível AA: um site bastante acessível para a maioria dos usuários sob a maior parte das circunstâncias.
Nível AAA: O site do nível AAA possui uma grande otimização de acessibilidade e abrange critérios bem mais específicos e refinados que o AA.

O WAI (Web Accessibility Iniative) disponibiliza uma lista com diversas ferramentas para análise de acessibilidade. Basta colocar a URL do seu site e esperar os resultados!

E isso é tudo, pessoal!

Espero que o artigo tenha sido útil e que tenha passado a mensagem principal: Acessibilidade Web é essencial e nunca deve ser considerada um privilégio, mas sim um direito.

Você pode estudar mais sobre as normas nos links de referências e assim ajudar a construir uma web mais acessível para todos!

Referências

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: