Comece a estudar acessibilidade digital desde já

Como começar a estudar acessibilidade digital e assim alcançar um portfólio diferenciado

Bianca Rosa
Pretux
5 min readJun 1, 2021

--

Ilustração vetorial de três pessoas com limitações físicas utilizando o notebook
Imagem: Freepik

Recentemente, participei de um bootcamp com o Paulo Aguilera sobre acessibilidade digital, por meio de uma bolsa fornecida pela comunidade Pretux em parceria com a How (obrigada Pretux ❤)️. Foi um curso incrível e apesar de rápido, excedeu as minhas expectativas.

Então, para compartilhar o conhecimento e influenciada pelo meu momento de recente migração para UX, decidi escrever sobre a importância da acessibilidade digital, mesmo para quem ainda está em fase de migração, dando seus primeiros passos.

A tão comentada acessibilidade

A acessibilidade digital é um conjunto de ações que visam permitir o acesso e interação a todas as pessoas. A acessibilidade é para todos e não somente para uma pessoa que possui limitações, sejam elas do tipo:

  • Permanente — uma limitação definitiva, como alguém que não possui os membros superiores;
  • Temporária — uma incapacidade com duração limitada como, por exemplo, um braço lesionado;
  • Situacional — quando a limitação ocorre devido a uma situação, tal como ter apenas uma mão livre para executar uma tarefa enquanto a outra está ocupada, segurando algo.
Ilustração vetorial de três pessoas com limitações físicas diferentes
Imagem: Microsoft Inclusive Toolkit

Segundo a Cartilha Censo 2010, mais de 45 milhões de brasileiros possuem algum tipo de deficiência, o que corresponde a quase 1 ⁄ 4 da população no Brasil, sendo que 25% possuem alguma deficiência visual.

Com esses dados, vemos o impacto enorme que a falta da acessibilidade digital pode causar. Por isso, devemos tornar produtos digitais acessíveis, não somente pela visão de negócio, mas pela inclusão e diversidade.

Acessibilidade é muito importante, mas por onde começar?

A WCAG é um guia de recomendações de acessibilidade para conteúdo digital

Este foi um questionamento que tive, mesmo antes do bootcamp, então decidi pesquisar no Youtube como eram utilizadas as ferramentas de acessibilidade no desktop e mobile. Além disso, coloquei no meu smartphone o leitor de tela nativo do Android, o TalkBack, para entender melhor.

No desktop pode ser utilizado o tab e outras teclas de atalho para a leitura dos links, campos, e conteúdo de forma hierárquica. No mobile a leitura é feita mediante o toque.

Vídeo de pessoa com limitação visual utilizando o leitor de tela

Com o entendimento maior de como funcionam algumas ferramentas de acessibilidade, compreendi o impacto dos níveis de acessibilidade da WCAG — Web Content Accessibility Guidelines.

A WCAG é um guia de recomendações de acessibilidade para conteúdo digital. Nele, há critérios que devem ser atendidos para o produto digital estar acessível:

  • A — critérios básicos, é o mínimo que um site/app deve atender, mas ainda está longe do satisfatório. É composto por 20 critérios.
  • AA — critérios intermediários, é o que precisamos chegar. Constituído por 30 critérios.
  • AAA — critérios mais avançados, o ideal para uma experiência completa. É formado por 28 critérios.

Um jeito prático e mais fácil de acessar a WCAG, principalmente para quem está começando a se familiarizar com o tema, é através dos cards Guia WCAG. É um guia de consulta rápido e descomplicado.

Conjunto de cards ilustrados da WCAG — Web Content Accessibility Guidelines
Conjunto de cards WCAG — Web Content Accessibility Guidelines

Boas práticas

Algumas dicas para começar a aplicar em seus projetos desde já:

  • A arquitetura da informação é extremamente importante para tornar o site/app acessível. Um header desorganizado atrapalha a experiência de todos os usuários, principalmente os que utilizam leitores de tela.
  • Utilize ferramentas de leitura de contraste como o WhoCanUse para saber se as cores utilizadas são acessíveis de acordo com os critérios da WCAG.
  • Se atente ao espaçamento entre linhas. Fontes menores pedem um espaçamento maior do que fontes maiores, para melhor legibilidade.
  • Aumente a área de clique/toque dos ícones interativos, para no mínimo 48x48px. Ícones preenchidos são mais acessíveis do que os que tem apenas contorno.
  • Em formulários não use somente cores, para o sinalizar os status de erro ou sucesso. Quando um formulário estiver preenchido incorretamente, adicione o ícone de exclamação no campo além de alterar a cor para vermelho.
  • Em caso de emojis em textos, evite utilizar vários seguidos, pois o leitor de tela fará a leitura de cada um deles na sequência, de acordo com a quantidade de emojis usados. Como por exemplo, ao utilizar 💩💩 seguidamente, a leitura desses emojis vai corresponder a: “pilha sorridente de fezes, pilha sorridente de fezes” (sim, é exatamente desta forma que o leitor de tela vai ler).

Teste de usabilidade

Caso faça o teste com deficientes visuais, ele deve ser feito em pares

Ilustração vetorial de uma pessoa com limitações físicas utilizando um site
Imagem: Freepik

Uma boa forma de verificar se o produto estaria acessível é realizar testes de usabilidade com o usuário. Você pode realizar o recrutamento em Ongs e comunidades de acessibilidade.

Caso faça o teste com deficientes visuais, ele deve ser feito em pares, sendo uma pessoa vidente (com visão) e a outra não vidente (sem visão).

Se você tem dúvidas sobre como aplicar os testes, converse com pessoas que aplicam testes com foco em acessibilidade, designers especialistas no assunto e também com o próprio recrutado para saber qual seria a melhor forma para ele.

Profissionais referência em acessibilidade

O universo da acessibilidade digital é enorme, e este artigo foi apenas uma palhinha de alguém que está só começando. Para aumentar o seu repertório, realize cursos, estudos e siga profissionais que são referência no assunto:

Marcelo Sales — Especialista em Acessibilidade Digital e Design Inclusivo

Paulo Aguilera — Design Ops Lead & Acessibilidade Digital

Danielle Falcão — Fundadora do Redesign for All

Algumas páginas que também são referências no assunto:

Redesign for All

Movimento Web para todos

Todos por Acessibilidade

Entre no grupo de Telegram dedicado ao tema:

Clube da Acessibilidade

Conclusão

Como designers, é importante exercer a empatia e se colocar no lugar do usuário, principalmente no que rege a acessibilidade digital. Lembrando que a acessibilidade é para todos, sendo uma forma de inclusão e diversidade.

Entender este tema tão relevante mesmo quando somos apenas estudantes em busca de migração, pode diferenciar o nosso trabalho.

Referências

Sales, Marcelo — Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG

Sales, Marcelo — WCAG 2.1 de forma simples!

Grilo, André — Acessibilidade no Design de Interação: exemplos e recomendações

Watson, Léonie — The difference between keyboard and screen reader navigation

--

--

Bianca Rosa
Pretux

Sou apaixonada pela criatividade na resolução de problemas complexos através de soluções simples. Pencils before pixels ✏️