Como incluir acessibilidade em projetos de interface?

Um breve guia para criar projetos mais acessíveis

Como pessoas que trabalham com experiência, é importante levarmos em consideração os diferentes usuários que utilizam nossas aplicações — como foi visto no texto anterior da série: O que é acessibilidade, por que eu deveria incluir isso em projetos de interface? — não leu? Corre lá, te espero aqui!

“Accessibility & Inclusion”, Alex Muench, via Dribble

Para um projeto ser acessível precisamos pensar além do contraste de cor de um botão (por mais que este também seja um ponto importante). Quem são as personas do projeto, as jornadas de usuário consideram uma PcD (pessoa com deficiência)? Foram feitos testes com esse público?

Não há receita de bolo para tornar um projeto acessível — como não há receita de bolo para nenhum projeto de design. Acessibilidade é uma característica a ser considerada em projeto e um objetivo a ser almejado. Considerando isto, trouxe alguns questionamentos, pontos de atenção e ferramentas que podem auxiliar nessa caminhada.

Questionamentos

1. As personas, pesquisas e jornadas incluem pessoas com deficiência e neurodiversas?
2. Como o texto está organizado? É de fácil compreensão?
3. É possível entender o conteúdo sem auxílio de elementos visuais? Esses elementos estão disponíveis de outra forma?
4. É possível consumir ou interagir com o conteúdo por áudio?
5. Há uma hierarquia estruturada na página? A ordem do conteúdo faz sentido?
6. De que forma podemos facilitar o acesso ao conteúdo?
7. Quem são as pessoas que testam o projeto?
8. As cores e demais elementos visuais são diferenciáveis entre si?
9. O usuário consegue customizar como o conteúdo é apresentado de acordo com sua necessidade?

Configurações de texto no Kobo, via TechGuide

Pontos de atenção

1. Cores: garantir contraste entre fundo e elemento, não depender somente das cores para transmitir uma informação;
2. Tipografia: legibilidade e leiturabilidade — tamanho de fonte, espaçamento, cor, família de fonte escolhida devem facilitar a leitura;
3. Interações: não depender somente de habilidades motoras;
4. Elementos clicáveis: diferenciar botões, links e conteúdo textual, deixar clara qual a função do elemento;
5. Elementos visuais: usar formas, linhas e ícones, para diferenciação dos elementos;
6. Conteúdo textual: facilitar o entendimento e compreensão, com textos claros e objetivos;
7. Imagens: não depender da imagem para transmitir uma informação, usar como auxílio;
8. Informação alternativa: quando um elemento visual for necessário para a compreensão do conteúdo, usar de descrições alternativas.

De início, parece complicado pensar em todos esses pontos. Minha sugestão? Estude cada assunto aos poucos e traga mudanças graduais ao trabalhar em novos projetos. As ferramentas a seguir podem ajudar:

Ferramentas

1. Verificação de contraste: Coolors, Snook, Contrast Checker;
2. Simuladores visuais: Color vision simulation (Firefox); Colorblindly e Emulate vision deficiencies (Chrome);
3. Análise de páginas: Lighthouse (Chrome), axe DevTools (Chrome e Firefox), Acessibility Insights (Web, Windows e Android), Tenon e Wave;
4. Leitores de tela: VoiceOver (iOS), Talkback (Android), Orca (Linux), ChromeVox (Chromebook); DOSVOX, NVDA, Jaws e Virtual Vision (Windows);
5. Plugins no Figma: Stark, Focus Orderer, Color Contrast Checker, Adee, Able.

Todas essas ferramentas são ótimas e auxiliam muito no dia a dia — mas nenhuma substitui pessoas. Faça pesquisa e teste com pessoas diversas sempre que possível!

“New colors coming to Asana!”, via Asana community forum

Tudo que torna um projeto mais acessível é uma boa mudança.

Recentemente, o Asana fez uma alteração nas cores usadas no site. A alteração, segundo a comunicação da empresa, é um pequeno passo (de mais que virão) para tornar o produto acessível a todos os usuários. O que você poderia fazer de diferente no projeto que trabalha hoje?

Acessibilidade precisa estar inclusa na cultura de projeto, em todas as etapas e com todos os envolvidos. Como pessoas que trabalham com projeto de produto, cabe a nós tomarmos a iniciativa de tornar nossas aplicações mais acessíveis.

Saiba mais:

• Podcast: O que realmente está afetando seus usuários com deficiência visual e como consertar isso?
• Palestras: Link Festival 2021
• Artigo: Explorando a matemática por trás dos critérios de contraste da WCAG
• Guia: Manual de Comunicação Inclusiva
• Curso: Leiautar — Módulo Gratuito Design Inclusivo
• Artigo: Orange you accessible? (em inglês)
• Artigo: Personas with Disabilities (em inglês)
• Artigo: Designing Systematic Colors (em inglês)
• Artigo: Design Accessible Color Systems (em inglês)
• Newsletter: A11y weekly (em inglês)
• Vídeo: How A Screen Reader User Surfs The Web (em inglês)
• Livro: Giving a Damn about Accessibility (em inglês)

O próximo (e último) texto dessa série será sobre desenvolvimento de projetos acessíveis — pois não adianta um projeto bem planejado sem a implementação correta. Até lá! :)