Parte 2 | Um guia de acessibilidade e inclusão para produtos digitais | Pesquisa, Documentação e Testes

Este texto faz parte de um guia com dicas de acessibilidade e inclusão para produtos digitais. Acesse os outros textos que compõem o guia:

• *Parte 1: Conceitos, Benefícios e Recursos*
• Parte 2: Pesquisa, Documentação e Testes
• *Parte 3: Escrevendo os textos da interface*
• *Parte 4: Desenho da interface*
• *Parte 5: Usabilidade, Navegação e Estrutura*

É preciso projetar pensando em acessibilidade durante todo o processo de desenvolvimento de um produto digital, não só na hora de desenhar uma tela ou escrever o código. A acessibilidade também precisa estar presente nas etapas de planejamento, pesquisa e testes. Então, bora para algumas dicas para estas etapas do processo?

Quando projetamos primeiro para a deficiência, muitas vezes você se depara com soluções melhores do que aquelas quando projetamos para a norma. — Elise Roy, advogada e ativista

Na etapa de pesquisa

Saia da sua bolha: Comece a seguir perfis e acessar conteúdo sobre acessibilidade. Na primeira parte deste guia, eu indico alguns perfis que você pode seguir. Também aplique acessibilidade na sua vida em geral, como quando for postar algo em suas redes sociais.

Saiba mais sobre seus usuários: Use métricas ou converse com o time de atendimento para entender se o produto é usado por pessoas com deficiência e se alguém já tentou acessar mas não conseguiu. Observe também reclamações em redes sociais.

Na hora do benchmarking: Analise empresas acessíveis, como o Hand Talk, por exemplo, e tente observar se seus concorrentes são acessíveis. Você pode encontrar referências de sites também na página do Prêmio Nacional de Acessibilidade na Web.

Pesquisas quantitativas e qualitativas: considere PCDs (pessoas com deficiência) nas pesquisas e entrevistas. E não se esqueça de preparar o ambiente e a dinâmica para receber as pessoas. Instituições de apoio à pessoa com deficiência podem ajudar você.

Personas: faça personas com deficiência. Uma dica interessante é ter um book de personas para conhecermos e lembrarmos sempre de algumas interações comuns de PCDs com a tecnologia, ferramentas, meio e questões relacionadas àquela deficiência em si. A Rosenfeld Media tem uma lista de personas com deficiência que pode te auxiliar.

Pense no seu time: Considere que os documentos de pesquisa e outras documentações do projeto também podem ser acessados por PCDs.

Documentação

Após desenhar a interface, documente as definições que você fez em relação à acessibilidade. Isso ajuda todo o time. Ajuda você a se lembrar mais tarde, ajuda designers que podem vir a trabalhar no projeto, QAs na hora de testar, POs na hora de priorizar e principalmente na sua comunicação com as pessoas desenvolvedoras. Aí vão algumas dicas:

O principal é conversar com o time para entender o que funciona para ele.

Nenhuma documentação substitui a conversa com as pessoas. Você pode ter uma documentação super organizada, mas ainda precisará conversar com o time para se manterem alinhados.

Se faltar tempo, comece pelo que pode gerar mais dúvidas e mal-entendidos.

A ferramenta que você vai usar não importa. O importante é que funcione para todo o time. Você pode usar Jira, Confluence, Word, Excel, Miro, Figma, Zeroheight.

Se você estiver usando o Figma, aqui vão alguns recursos que podem te ajudar:

• Plugin Include
• Plugin A11y — Focus Order
• Biblioteca de anotações de acessibilidade do antigo Twitter
• O Figma também incluiu o novo recurso Annotate no Dev Mode.

Faça benchmarking de documentações do mercado. Grandes empresas geralmente têm design systems com ótima documentação de acessibilidade para você se inspirar. Você pode encontrar vários exemplos nessas páginas: Design Systems for Figma, Design Systems Brasileiros, Design systems Repo e Design Systems.

Documente tudo o que você puder, como:

• Guia de estilo com quais e como usar as cores, tipografias e espaçamentos;
• Comportamentos dos componentes e interações;
• Textos alternativos das imagens e ícones. Você pode deixar anotado junto ao desenho das telas a descrição das imagens e quais são apenas decorativas;
• Título das páginas;
• Estrutura de cabeçalhos.

A Stephanie Walter escreveu um artigo bem completo com dicas de documentação: Guia do designer para documentar acessibilidade e interações do usuário.

Imagem mostrando exemplos de instruções documentadas para o time de desenvolvimento. Adaptado de Joanna Voloski.

Testando o produto

Testar é uma etapa muito importante pois assim você vai ter uma ideia na prática de como está a sua aplicação e saberá onde fazer melhorias.

O ideal é combinar a verificação manual e a verificação automática. Use ferramentas automáticas para te ajudar, mas elas não vão encontrar todos os problemas, então complemente com a verificação manual.

Ferramentas que podem ajudar você na verificação automática

A dica é usar mais de uma ferramenta. Na página da WAI você encontra uma enorme lista de ferramentas automáticas para testar sua página e pode usar os filtros para encontrar as que melhor te atendam. Também converse com o time de desenvolvimento e o time de testers para encontrar as melhores formas e ferramentas para testar a aplicação.

Aqui vão algumas dicas de ferramentas para você:

• Verificador do W3C;
• WAVE;
• Access Monitor.

Dicas para fazer a verificação manual

Explore as configurações de acessibilidade do seu celular e computador e teste sua aplicação. Use o leitor de tela do celular (TalkBack no Android, e VoiceOver no iOS) ou navegue usando apenas o teclado no computador e identifique:

• Se as áreas interativas estão com foco visível;
• Qual a ordem de leitura do conteúdo pelo leitor de tela;
• Qual o texto alternativo das imagens;
• Como está a hierarquia de cabeçalhos;
• Qual o título da página;
• Se você consegue preencher formulários e realizar ações;
• Teste também a função de alto contraste;
• Como fica a página quando você aumenta o tamanho da fonte;
• Se os vídeos e áudios têm alternativas em texto;
• Se é possível controlar mídias como áudios, vídeos e animações;
• Se você consegue entender do que se tratam os links se os ler separadamente;
• Se os links levam para os locais corretos.

Testes de usabilidade

O protótipo precisa ser acessível para testar com os usuários. O Figma tem um breve tutorial com orientações para fazer um protótipo acessível.

Entenda qual ferramenta e local é melhor para a pessoa. Considere testes remotos para que a pessoa possa testar no seu próprio ambiente com a tecnologia assistiva e as ferramentas que conhece. Considere ferramentas de gravação e compartilhamento de tela ou alguém do time pode ir até a pessoa e gravar o teste.

Procure por instituições de apoio à pessoa com deficiência em sua cidade. Elas podem te ajudar na realização dos testes.

Quando quiser saber de algo, fale com a pessoa com deficiência, pergunte a ela e não à pessoa que a acompanha. As pessoas respondem por si próprias.

**Se autodescreva **para que as pessoas com deficiência visual tenham informações sobre você e o ambiente. Isso as ajuda a perceber, por exemplo, qual a diversidade de pessoas no local. E as pessoas com baixa visão podem reconhecer as outras pessoas presentes mais facilmente em uma outra ocasião.

A Escala de Usabilidade Acessível (Accessible Usability Scale — AUS) é uma ferramenta gratuita criada pela empresa Fable para medir a usabilidade de um produto digital para usuários de tecnologia assistiva. São dez questões a serem perguntadas após a experiência de uma pessoa com um produto digital, utilizando uma tecnologia assistiva.

Faça perguntas também considerando aspectos cognitivos, como:

• Houveram áreas ou etapas que tiraram seu foco ou atenção? Algo te distraiu?
• Alguma coisa foi difícil de entender ou processar?
• Alguma coisa exigiu que você usasse a memória para completar?

Este texto foi útil para você? Vou adorar seu feedback!

Se você for designer ou pessoa de outra área, vamos trocar ideias sobre acessibilidade?

Abraço! E até a próxima!

Veja as outras partes do guia:

• *Parte 1: Conceitos, Benefícios e Recursos*
• Parte 2: Pesquisa, Documentação e Testes
• *Parte 3: Escrevendo os textos da interface*
• *Parte 4: Desenho da interface*
• *Parte 5: Usabilidade, Navegação e Estrutura*