OBS: Artigo criado por Jennifer Till (UX Designer/UX Strategy), publicado originalmente no LinkedIn.

Uma solução quando é boa, é boa para todos.

Nós como designers da experiência do usuário precisamos praticar empatia diariamente no objetivo de compreender como o usuário se sente ao utilizar as soluções de nossas empresas. Quando o assunto de Acessibilidade Digital chegou para o time de design da Senior o desafio foi bem grande, como me colocar no lugar de uma pessoa com deficiência se essa não é a realidade que vivo? Ou melhor… Como fazer outras pessoas sentirem a importância de acessibilidade digital?

Segundo o IBGE, no Brasil, 45 milhões de pessoas, ou seja, 23,9% dos brasileiros possuem algum tipo de deficiência. 35,8 milhões de pessoas (18,8%) deficiência visual. 13,3 milhões de pessoas (7,0%) deficiência motora. 9,7 milhões de pessoas (5,1%) deficiência auditiva.

E apenas 2% dos sites são acessíveis.

Como assim apenas 2%? E os nossos produtos são acessíveis? Será que o meu trabalho e o dos meus colegas que trabalham comigo diariamente está incluindo ou excluindo pessoas? E foi a partir dessa reflexão que começamos a nos inteirar mais sobre acessibilidade digital.

Como começamos?

De primeiro momento participamos da trilha de Acessibilidade que acontece no The Developer’s Conference. No evento foram abordados os assuntos como “O que é WCAG? Boas práticas de acessibilidade. Design acessível vs. Design universal. O que são tecnologias assistivas? Teste de acessibilidade.”. Além de vários exemplos aplicados em produtos digitais.

Sempre saímos muito inspirados de eventos, não é mesmo? Com várias informações e referências eu só conseguia pensar: se eles conseguem, nós também conseguimos. Então começamos trazer para dentro de casa todo o aprendizado.

Em seguida organizamos um evento através do Senior Design Experience para toda empresa. Tivemos a presença de Paulo Aguilera, que compartilhou conosco conceitos e exemplos de boas práticas de acessibilidade em ambientes digitais embasado no mindset do design universal. O auditório cheio estava a coisa mais linda e de aquecer o coração!

Na semana que o evento iria ocorrer realizamos algumas ações para impactar os colaboradores de quão importante é o assunto.

A primeira ação foi um teste de acessibilidade. A dinâmica foi a seguinte: com os olhos vendados, utilizando o leitor de telas e navegando através de teclado, o usuário precisava registrar seu ponto e informar qual horário fez a marcação. Uma tarefa simples do nosso dia a dia, mas para todos?

A segunda ação também foi pensada em atividades que realizamos diariamente. Bloqueamos o acesso de elevadores, cadeira de rodas em uma das tão disputadas vagas de carro e para pegar seu cafézinho era necessário utilizar o alfabeto em braille para decifrar a máquina.

As ações nos ajudaram muito a refletir que além de empatia, precisamos de equidade todos os dias.

Hora de tirar a teoria do papel e começar a prática

Como ainda não havíamos trabalhado com leitor de telas começamos com uma entrega simples: login e navegação de menu na nossa plataforma. Assim poderíamos testar, agora sim com usuários com deficiência visual, para entender se a navegação que havíamos projetado fazia sentindo e aquele seria nosso norte para seguir em frente.

O time de desenvolvimento nos auxiliou adicionando informações para as tecnologias assistivas, assim a pessoa com deficiência visual irá ouvir e se orientar corretamente com os sistemas que o auxiliam para o uso do produto. O que exatamente foi feito para melhorar a navegação?

• Atribuído foco aos campos de preenchimento e links.
• Adicionado navegação utilizando as teclas de atalho: Tab para ir para o próximo item, Enter para entrar em alguma opção, Shift + Tab para voltar para o item anterior.
• Adicionado navegação utilizando as teclas de setas, permitindo navegar para cima, para baixo ou para os lados.
• Criado teclas de atalho para facilitar o acesso a determinadas opções de menu, útil para qualquer usuário da plataforma.

Navegação pronta, hora de testar! Entramos em contato com a ACEVALI (Associação de Cegos do Vale do Itajaí) a qual foi parceira em nos receber e nos ajudar no recrutamento de usuários para o teste de acessibilidade. Adair e Aurélio, usuários de leitores de telas, participaram do teste.

Como simplificar ainda mais a teoria?

Após aplicar o teste, percebemos o quão importante são diretrizes para conduzir ao caminho certo. Além do mais, sites acessíveis têm melhores resultados de pesquisa, atingem um público maior, são otimizados para SEO, têm tempos de download mais rápidos, incentivam boas práticas de codificação e sempre têm melhor usabilidade.

Com o objetivo de orientar os desenvolvedores e também criadores de conteúdos a projetar experiências de qualidade, criamos nossa cartilha de acessibilidade digital.

Nossa cartilha é baseada na WCAG 2.1, com recomendações básicas para se construir conteúdo na web de forma acessível.

A WCAG (Web Content Acessibility Guidelines) são diretrizes criadas pela W3C (World Wide Web Consortium — principal organização de padronização da World Wide Web).

A WCAG 2.1 é fundamentada por 4 princípios:

• Compreensível: a informação e a interface devem ser compreendidas pelos usuários.
• Operável: os componentes da interface e a navegação devem permitir que seus usuários as operem.
• Perceptível: as informações e os componentes da interface devem ser apresentados em formas que possam ser percebidas pelo usuário.
• Robusto: o conteúdo precisa ser interpretado de maneira concisa por diversos agentes do usuário, incluindo tecnologias assistivas.

Abaixo dos princípios estão distribuídas 13 recomendações:

• Alternativas em texto,
• Multimídia baseada em tempo,
• Adaptável,
• Discernível,
• Acessível por teclado,
• Tempo suficiente,
• Ataques epiléticos,
• Navegável,
• Modalidade de entrada,
• Legível,
• Previsível,
• Assistência a entrada,
• Compatível.

E ainda abaixo das recomendações, a WCAG 2.1 possui 78 critérios de sucesso.

Para deixar as diretrizes do WCAG mais próximo da nossa realidade, reorganizamos as informações, o que deixou nossa cartilha com 14 recomendações e também distribuídas nos 4 princípios, conforme abaixo:

• Compreensível: affordance, animações e efeitos, áudio e vídeo, cor, fonte.
• Operável: controles, formulários, legibilidade, teclado, tempo.
• Perceptível: Feedback, imagens e ícones.
• Robusto: estrutura, layout.

Para deixar ainda mais compreensível os 78 critérios de sucesso, resolvemos utilizar Acessibilidade Toolkit criado pelo Marcelo Sales, WCAG simplificada e em formato de cartões manipuláveis para distribuir nas equipes de desenvolvimento.

E o produto?

A acessibilidade não o forçará a ter um produto feio, chato ou estranho. Ela irá incluir pessoas cegas, daltônicas ou com baixa visão, surdas ou com dificuldades de audição, com deficiências de mobilidade que podem ser temporárias ou permanentes, ou com deficiências cognitivas.

Criamos um roadmap de entregas para evoluir nossos produtos e também nosso Design System, os novos componentes, por exemplo, têm por obrigação seguir a WCAG 2.1.

Recentemente a paleta de cores foi reestruturada se tornando acessível, esse trabalho incrível você pode conferir neste artigo escrito pelo Juarez Mendes Junior.

Momento de cultura

O trabalho de acessibilidade digital não é dever de apenas uma pessoa dentro da organização, mas sim de todos. Por isso é muito importante a conscientização para estarem juntos na causa.

E é claro que eu não poderia deixar de falar sobre a palestra do Alexandre Santos Costa, mais conhecido como Magoo que ocorreu no SeniorTec Experience. Magoo compartilhou conosco o dia a dia de um desenvolvedor com deficiência visual. Mais do que uma palestra, foi uma lição de vida. Você pode assistir essa palestra maravilhosa clicando aqui.❤

Se seu design não é para todos, isso significa que pessoas não conseguem utilizar seu produto.

E no seu trabalho, o que você tem feito para incluir pessoas? Conta para gente e vamos conversar! 🙂