Dicas práticas para aplicar acessibilidade no seu produto digital

Conheça os princípios da WCAG (Web Content Acessibility Guideline) e aprenda dicas práticas de como aplicar acessibilidade no seu produto digital
Compartilhar no linkedin
Compartilhar no facebook
Compartilhar no twitter
Compartilhar no whatsapp
Compartilhar no telegram
Compartilhar no email
Dicas práticas para aplicar acessibilidade no seu produto digital

 

Acessibilidade é a prática de tornar algo acessível para todas as pessoas sejam elas deficientes visuais, auditivos, motores. Facilitar o acesso para todas as pessoas.

Quando falamos em acessibilidade focada em produtos digitais, temos como objetivo principal facilitar o acesso e usabilidade de sites, aplicativos de celular e sistemas para pessoas com algum tipo de deficiência. Facilitar o acesso para todas as pessoas sejam elas deficientes ou não.

Os 3 princípios da acessibilidade

A acessibilidade é baseada em 3 princípios:
1º) Desenho Universal: Projetar um produto/serviço pensando no todo, sem precisar criar adaptações para um público específico. O ideal é que não precise criar um produto para uma categoria específica, o produto principal tem que atender a todas as pessoas.

2º) Acessibilidade: Fornecer ACESSO, independente do indivíduo ter algum tipo de deficiência ou dificuldade. É abrir um pouquinho mais a porta para que outras pessoas consigam entrar.
3º) Usabilidade: É sobre o USO do produto, se o usuário consegue encontrar aquilo que ele precisa com facilidade.

WCAG (Web Content Accessibility Guidelines)

A WCAG é um conjunto de recomendações de acessibilidade para conteúdo da Web, com diretrizes que explicam como tornar o conteúdo Web acessível a todas as pessoas.

As diretrizes são divididas em 3 níveis de critérios:

A – Critério Baixo: Atende aos requisitos mínimos de acessibilidade

AA – Critério Médio: Inclui o nível A, com critérios um pouco mais complexos

AAA – Critério de Alta Complexidade: Inclui todos os níveis anteriores

 

As diretrizes são formatadas dentro de 4 princípios:

Perceptível

  • Projetar um produto/serviço pensando no todo, sem precisar criar adaptações para um público específico.

Operável

  • As funcionalidades devem estar disponíveis no teclado.
  • Os usuários precisam ter tempo suficiente para ler e usar o conteúdo.
  • O conteúdo não deve causar convulsões e reações físicas ( ex: tela piscando)
  • Os usuários podem navegar facilmente, encontrar conteúdo e determinar onde estão.
  • Os usuários podem usar diferentes modalidades de entrada além do teclado (ex.: comando de voz).

Compreensível

  • O texto é legível e compreensível, não deve ser muito pequeno.
  • O conteúdo aparece e opera de forma padronizada na interface.
  • Os usuários são ajudados a evitar e corrigir erros. (ex: campos de formulários)

Robusto

  • O site pode ser interpretado de forma clara por diversas tecnologias de forma adequada.

Como aplicar acessibilidade no seu produto digital

Agora que entendemos o que é acessibilidade e aprendemos sobre a WCAG, é hora de passarmos algumas dicas bem práticas para aplicar no dia a dia do seu produto.

Tamanho da fonte

16 é o tamanho mínimo ideal para texto corrido, seja em desktop ou aplicativos de celular.

Exemplos de tamanho da fonte: deve ser sempre acima de 16

Contraste

Texto e fundo precisam ter contraste suficiente. Uma ferramenta muito útil para verificar contraste entre elementos é o Colorable. Nesse site é possível acessar o código da cor e qual o melhor contraste de acordo com a WCAG.

Exemplos de imagens sem contraste e com contraste

Links 

Os links precisam ser auto descritivos, para que deficientes visuais possam entender o conteúdo ao navegar pela tecla TAB. Quando o site não possui links que sejam auto descritivos os deficientes visuais não conseguem acessar.

Exemplos de links sem descrição clara e com descrição clara no texto

Validação de formulários 

1) Nunca dependa só de cores para representar um status ou estado. Pessoas que possuem daltonismo não são capazes de distinguir os campos com cores.

Exemplos de formulários sem foco e com foco em pessoas daltônicas (com uso de destaque do campo atual)

2) Utilize ícones para indicar certo ou errado. O melhor é usar as cores, os elementos gráficos e um texto descritivo para auxiliar o usuário.
Exemplos de formulários sem foco e com foco em pessoas daltônicas (com uso de ícones)

3) Forneça instruções de como resolver o problema.
Exemplos de formulários sem foco e com foco em pessoas daltônicas (com uso de ícones e instruções)

4) Feedback em tempo real

Exemplos de formulários sem foco e com foco em pessoas daltônicas (feedback em tempo real)

 

Gráficos acessíveis

Além das cores, use também texturas visuais. Ou se possível, utilize uma tabela.
Exemplos de gráficos com foco em pessoas daltônicas com uso de texturas

Área de clique

Deixar a área do clique maior contemplando o elemento do checkbox e o texto.
Exemplo de área de clique mais acessível contemplando o elemento do checkbox e texto

Gostou deste artigo? Se quiser entender como a acessibilidade pode melhorar o seu produto digital, acesse nosso post sobre o assunto.

 

Este artigo foi produzido pelo colaborador João Lázaro para o Tuia Talks, uma prática semanal de troca de conhecimentos que faz parte do Programa de Desenvolvimento Individual (PDI) da equipe da Tuia.