Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG
Você conhece todas as diretrizes WCAG? Saberia dizer quais delas são relevantes em um escopo de UX? Se não, este material pode te ajudar.
Tenho certeza de que você já ouviu falar dessa tal Acessibilidade. Se você trabalha com projetos digitais, muito provavelmente já foi solicitado a projetar sites ou apps acessíveis, mas daí vem a dúvida: “O que preciso fazer? Como devo fazer?”. E em seguida vem aquele processo padrão de pesquisa… após alguns links você se depara com uma tal de WCAG.
“Dablioque?”
Você encontra o WCAG — ou Web Content Accessibility Guidelines — e pensa “WOW!!! Tem tudo aqui! Tudo detalhadinho, comentado… WOOWWW! Tem exemplos também… sensacional!”. 10 minutos depois e “Nossa… o que isso quer dizer meu deus?”, “Quanto texto! Precisa mesmo?”, “Nossa… isso é coisa de acessibilidade?”, “Mas isso é coisa da TI!”, “[espaço reservado para a sua frase de espanto]”.
Independentemente do processo que o tenha levado a conhecer a WCAG, é fato que a quantidade de textos, ou pior, a quantidade de textos em formato acadêmico (duh!) é realmente espantosa. Por outro lado, não há como negar que o assunto Acessibilidade é muito bem documentado com diversos exemplos, casos de sucesso, erros e boas explicações. E a quantidade de pessoas falando cada vez mais sobre o assunto só aumenta.
Assumindo que você já tenha tido acesso aos textos da WCAG, volto a perguntar: dos 61 critérios de sucesso existentes, você saberia dizer facilmente quais deles se encaixam em um escopo de UX? (update em 06/2020: quando o artigo foi escrito eram 61, atualmente são 78)
Poderíamos formatar a pergunta mudando o tipo de profissional: “Você que é responsável por produzir conteúdo pro seu site, sabe me dizer quais diretrizes se enquadram em seu escopo de trabalho?”, “E você designer? Sabe dizer quais critérios precisa atender em um escopo de design?”.
Ok, você até conseguiu identificar alguns dos critérios que seriam de sua responsabilidade, mas e o seu real significado? Conseguiu entender? Está claro o suficiente? Essas questões nos levam a outra pergunta.
Por que criar um Toolkit?
Eu estudo Acessibilidade há cerca de 5 anos, e por todos os projetos que passei e pessoas com quem falei, a grande questão sempre foi entender a fundo os critérios de sucesso, e como poderíamos atendê-los corretamente sem que houvessem interpretações incorretas.
Qualquer pessoa que inicia os estudos das diretrizes de Acessibilidade concorda que o conteúdo é denso, possui tom acadêmico, e mesmo tendo uma estrutura bem definida se torna maçante e complexo pra qualquer um que queira se aprofundar mais em seu conhecimento.
Isso contribui especialmente para duas coisas:
- o não entendimento das diretrizes;
- (e consequentemente) a não adoção completa das diretrizes.
A ideia de se criar um toolkit começou a nascer a partir do momento que eu utilizei um modelo primário deste material em alguns workshops que realizei para disseminação do conhecimento da Acessibilidade.
Em um exercício simples de card sorting, percebi (de uma forma que não havia percebido ainda em nenhum outro momento) a dificuldade clara de UXers, Designers, Desenvolvedores, PO’s e Editores de conteúdo em entender alguns dos critérios. E ficou mais claro ainda que o grande problema era justamente a forma como alguns dos critérios são escritos (acadêmicos do meu coração, amo todos vocês, mas vamos facilitar esse linguajar rebuscado aí, pô!).
Levando em consideração que existem toolkits em modelos de cartas para as mais diversas atividades, mas até hoje nenhum modelo voltado para acessibilidade havia sido criado ainda, não foi difícil ligar os pontos e imaginar um toolkit de acessibilidade como ferramenta facilitadora do entendimento da WCAG.
Em tempo: Aqui vale a observação a respeito de um artigo recente da Talita Pagani no site Movimento Web Para Todos onde ela cita alguns desafios propostos para a área de Interação Humano-Computador (IHC) e a pouca exploração pela comunidade acadêmica de IHC e UX sobre o tema Acessibilidade e Inclusão Digital. Em um dos desafios há o seguinte questionamento:
Existe, de fato, uma dificuldade no entendimento das recomendações de Acessibilidade, mesmo com a adaptação ao contexto brasileiro?
Confesso que não me aprofundei em pesquisas sobre o tema ainda, mas como citei anteriormente e em experiências próprias, eu diria que a resposta a essa pergunta é um categórico SIM.
Bacana, mas na prática o que eu posso fazer com este toolkit?
Este material pode ser usado de diferentes formas. A aplicação inicial foi pensada para a utilização em exercícios de card sorting, onde as pessoas envolvidas em projetos digitais poderiam facilmente identificar gaps e atividades que precisariam contemplar durante o desenvolvimento dos projetos.
Mas na prática um toolkit neste formato (cards) pode ser utilizado como fonte rápida de consulta de diretrizes, disseminação de conhecimento, facilitador de discussões, identificador de funcionalidades ou até mesmo como um checklist. Manusear algo físico ao invés de apenas consultar digitalmente estimula a criatividade em qualquer processo de desenvolvimento de produto ou serviço.
O melhor feedback que pude receber até agora foi ter feito as pessoas que manusearam o toolkit perceberem que os critérios de sucesso e diretrizes não estavam relacionados diretamente a algo específico para deficientes, mas sim heurísticas básicas de desenvolvimento de qualquer projeto digital.
Nunca é demais lembrar que ACESSIBILIDADE É PARA TODOS! ;)
Processo de criação e desenvolvimento
Com o MVP sendo utilizado nos workshops e a sua aplicação sendo bem aceita, o próximo passo foi definir o modelo final e mais completo do toolkit. Essa etapa foi relativamente simples, uma vez que os elementos essenciais para apresentação das informações já existiam (princípios, recomendações, critérios de sucesso, níveis de conformidade, etc).
A etapa seguinte foi a mais complicada. Uma vez definido o formato, era necessário facilitar o entendimento da informação, afinal algumas diretrizes possuem diversas linhas explicativas e em muitos casos, uma linguagem não tão simples de compreender.
Neste momento o objetivo foi tornar as explicações das diretrizes o mais simples possível enquanto a essência do conteúdo original era mantida. A ideia aqui é que qualquer pessoa "bata o olho" no cartão e já consiga identificar o que precisa ser feito.
Os exemplos demonstrados na imagem acima foram replicados para todos os 61 critérios de sucesso (e você pode conferir todos eles neste Guia Rápido). Alguns textos passaram por mais de 6 versões até serem considerados simples o suficiente para que qualquer pessoa pudesse entender. Em outros, não foi preciso fazer uma grande simplificação e o texto ficou bem parecido com o original mesmo. Mas isso não significa que os textos existente nos cartões não possam ser modificados (aguenta aí, que já te explico como você pode contribuir com esse material).
Por fim, faltava produzir um boneco do toolkit para testar a aplicabilidade do modelo final na prática. E as fotos abaixo mostram como foi esse processo…
Todo o material apresentado até agora foi produzido de forma manual. Impresso em impressora jato de tinta, utilizando estilete e régua para recortar, cola em bastão, muita paciência, reimpressões, ajustes, dedos grudando, mesa cortada e algumas horas de dedicação (chuto por volta de 90 horas desde a conceituação até a finalização do boneco versão final).
Algumas considerações sobre design inclusivo
Desde os primeiros esboços, minha intenção era ter um material de fato fácil de usar e também simples de compreender pelo máximo possível de usuários independentemente de suas habilidades. Como em qualquer projeto é utopia achar que todas as situações serão atendidas, mas com o uso de boas práticas é possível lidar com boa parte delas.
Onde foi possível aplicar princípios de design inclusivo eu apliquei, mas ainda há espaço para melhorar e como eu disse você poderá participar deste processo. ☺
A começar pela tipografia utilizada. A fonte escolhida dentre alguns testes que efetuei foi a Tiresias Infofont, que originalmente é destinada para a impressão de grandes formatos e placas informativas, mas em testes se mostrou com boa legibilidade em pequenos formatos também. Trata-se de uma fonte produzida por John Gill e foi criada especialmente a pedido do RNIB (Royal National Institute of Blind People). Ela possui traços bem definidos entre os caracteres, um bom espaçamento entre eles (kerning), diferenças claras entre as letras e acentos (como optei pela distribuição original em português, esse item é fundamental).
Além disso, optei por dividir os cartões e seus princípios em cores diferentes. E levando em consideração um dos próprios critérios de sucesso, o 1.4.1 que trata de utilização de cores, “não devemos ter a cor como única maneira de distinção de elementos”. Sendo assim, apliquei padrões específicos além das cores como demonstrado na imagem abaixo.
Uma outra questão foi o fato de se utilizar um link direcionando para a diretriz completa, caso o usuário continuasse não entendendo a diretriz após ler a descrição nos cartões. Recebendo o feedback do pessoal que viu os cards antes de eu lançar, vários indicaram a aplicação de um QRCode em cada uma das cartas. Deu um trabalhão, mas está aí… :)
Concluindo
Essa ferramenta está longe de substituir a leitura e o entendimento de todas as diretrizes WCAG de forma aprofundada, mas levando em consideração que a maioria das pessoas dificilmente irão ler todo o seu conteúdo denso e um dos principais desafios que a comunidade IHC e UX enfrenta é facilitar o entendimento dessas informações, talvez este toolkit seja uma forma muito mais simples para se promover esse conhecimento.
Este é um trabalho feito com carinho por alguém que sofreu tanto quanto vocês para entender as diretrizes e começar a fazer real uso delas. ;)
Mas não quero guardar o osso só pra mim e por isso mesmo a distribuição e manipulação é livre.
Contribua com o projeto e com a comunidade open source!
Você me convenceu! Quero um, como faz?
A caixinha pronta e impressa deve demorar uns dias pra sair, pois ainda estou conversando com possíveis parceiros para impressão e distribuição. ;)
No entanto, este material está disponível para download gratuitamente!
Sim, o material digital é livre para uso. Minha intenção com isso é contribuir com qualquer um que queira utilizar os cartões para disseminar o entendimento das diretrizes WCAG ou reforçar os seus estudos de uma forma mais acessível (de verdade) e simplificada.
Você está livre para imprimir, utilizar, traduzir, editar, customizar, redistribuir e fazer o que quiser com o material, desde que cite a fonte e o redistribua utilizando a mesma licença de uso (Creative Commons — Atribuição-CompartilhaIgual 4.0 Internacional).
Os arquivos estão em formato PDF editável e podem ser modificados através do Adobe Illustrator. Você pode fazer o download apenas do PDF com os cartões e/ou também da caixinha com a faca de corte já definida.
Se você nunca contribuiu com projetos Open Source via GitHub e não tem a mínima ideia de como fazer isso, leia esses artigos (Contribuindo com projetos Open Source [Parte 1] e [Parte 2]) do Ivan Santos.
Originalmente o material está disponibilizado em português brasileiro, pois é a língua nativa deste autor que vos fala facilitando bastante o trabalho de resumo das diretrizes. No entanto, a tradução do material para qualquer idioma é livre. Por favor, contribua (no GitHub há algumas instruções)!
Espero que você possa fazer ótimo uso deste toolkit e que ele facilite o seu entendimento sobre acessibilidade. Se possível, comente aqui no artigo sobre a sua experiência ao utilizar o material.
Acesse também o hotsite do projeto e assista ao vídeo explicativo:
Me chamo Marcelo Sales, sou designer, apaixonado por Acessibilidade, Psicologia, UX e Guioza (não necessariamente nessa ordem). Criador do projeto http://acessibilida.de
