Designs inclusivos para acessibilidade web — Capítulo 2
Photo by Audi Nissen on Unsplash
Clique aqui para ver o primeiro capítulo.
Agora que sabemos mais sobre o problema de não desenvolver com acessibilidade, chegou a hora de discutir como desenhar telas com acessibilidade.
Há algo que você precisa saber sobre trabalhar com web. Existem regras e padrões que devem ser aplicados e todas essas regras estão basicamente na página da W3C.
Quem é a W3C e qual a sua importância?
Em suas próprias palavras:
“O Consórcio World Wide Web (W3C) é um consórcio internacional no qual organizações filiadas, uma equipe em tempo integral e o público trabalham juntos para desenvolver padrões para a Web. Liderado pelo inventor da web Tim Berners-Lee e o CEO Jeffrey Jaffe, o W3C tem como missão Conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo…”
Mas que belas palavras: “Conduzir a world wide web para que atinja todo seu portencial”. Basicamente as empresas e escolas ao redor do mundo usam os padrões da W3C para desenvolver (ou ensinar a desenvolver) sistemas web. A W3C será o material base para tudo o que vamos discutir aqui e em futuros capítulos.
Para o nosso objetivo especificamente nós vamos seguir a página WAI (Iniciativa de Acessibilidade Web — tradução livre), que pertence à W3C. Essa iniciativa estabelece padrões e materiais de suporte para os desenvolvedores que querem entender e implementar acessibilidade a seus sistemas.
A importância do UX na acessibilidade web
Qual a importância de UX (User Experience) para acessibilidade web? Bem, vamos dizer que apenas técnicas de inclusão (a nível de código) não é o suficiente para tornar uma aplicação web acessível. Na página WAI da W3C, há uma frase que pode explicar isso:
Combinar os padrões de acessibilidade e os processos de usabilidade com pessoas reais, garante que o web design seja tecnicamente funcional e usável para pessoas com deficiências. Nos referimos a isso como acessibilidade usável ou experiência do usuário com acessibilidade. — Tradução livre.
Sim eu sei o que você está pensando, essas três palavras estão lhe dando dores de cabeça: “Com, Pessoas, Reais”. Mas como você efetua os protótipos dos seus designs para seus clientes hoje? Você não verifica com um número de usuários quais são suas dores e problemas a serem resolvidos? Por que esse processo seria diferente com pessoas com deficiência, não é mesmo?
Se uma pessoa surda não encontrar uma forma de explicar para você que ela precisa mais do que um telefone de contato na página, talvez você nunca coloque um e-mail de contato e essa pessoa nunca tenha sua necessidade atendida. Então, eu vou dar algumas dicas que tenho certeza que irão ajudar, mas jamais serão tão efetivas quanto uma pessoa real lhe dando feedbacks.
Dicas práticas para fazer uma página web com design acessível
Não é possível escrever dicas para todos os tipos de deficiências, então eu vou colocar em tópicos as deficiências mais comuns com suas respectivas dicas. A ideia é lermos as histórias e sermos capazes de compreender as dores de nossas personas.
Antes de começarmos os tópicos, é interessante explicar que acessibilidade não é sempre sobre pessoas com deficiência. Pessoas idosas que nunca tiveram alguma deficiência poderão ter perda de visão ao longo dos anos, por exemplo. Pessoas que infelizmente se envolveram em um acidente, talvez tornem-se alvo da acessibilidade web ainda que sua situação não seja permanente. Então vamos ver algumas dicas para desenhar páginas acessíveis para as deficiências mais comuns.
As dificuldades de Lucas — Cegueira
Baixa visão e cegueira são duas das mais comuns deficiências entre os brasileiros. A base de dados que iremos usar é o último censo feito pelo IBGE, em 2010. Essa pesquisa foi feita com pessoas que tinham alguma dificuldade de ver, ouvir, subir escadas ou que possuíam alguma deficiência mental/intelectual.
De acordo com o censo, nós temos no Brasil 18.8% da população com alguma dificuldade de enxergar. Então, quais são as dicas para essas pessoas? Vamos ver o que nosso participante Lucas, nos testes com usuários, precisa.
O Lucas é cego e ele estava navegando na nossa página com um leitor de tela. Ele não conseguiu entender bem qual era a mensagem que queríamos transmitir. Basicamente o problema era que nós esquecemos de colocar legendas nas imagens que faziam parte essencial do conteúdo. Então, se a página possui imagens ou figuras que têm uma função de transmitir algo, é necessário descrevê-la em uma legenda.
Ele mencionou um texto da página WAI apenas para nos lembrar de quão importantes os textos são para pessoas com deficiências:
“[…] Outras pessoas precisam perceber o conteúdo por meio de vários sentidos, como alguém com dislexia que pode precisar ouvir e ver o texto para entendê-lo melhor.
Porém, Lucas continuou testando. Nós explicamos para ele que a página era sobre a nossa loja de camisetas. Ele disse para nosso time que as coisas pareciam estar fora do lugar. Para ele, era ilógico ter um checkbox em um formulário onde ele pressionava Space e nada acontecia. A verdade é que a nova opção no formulário apareceu acima desse checkbox, mas como o leitor de tela segue uma sequência de cima para baixo ele não foi informado de nada. Logo, no contexto de Lucas, não fez sentido. O objetivo era filtrar os itens na tela. Constrangedor…
Finalmente, Lucas está na seção onde ele está tentando encontrar a camiseta ideal. Ele sabe que a camiseta tem provavelmente alguma referência à saga Star Wars, mas não tem ideia da cor ou estilo dela, pois a única descrição presente é algo como: “Camiseta star wars”. Ele se sentiu desconfortável comprando algo que ele não sabia exatamente os detalhes. Boas descrições são muito importantes.
Bem, sua missão é testar a loja. Então, ele pressionou o botão “comprar” e seguiu para o formulário de entrega. Lá havia um campo de entrada onde o rótulo não estava presente. Ele não entendeu o que aquilo fazia, porque alguns leitores de tela desconsideram o placeholder. O time explicou que ele precisava digitar o CEP ali. E agora? Não havia botão de enviar. Pressionar o Enter seria o suficiente mas o sistema não informou isso. A tela abaixo apareceu no leitor de tela em seguida:
Lucas pressionou o Tab e o leitor de tela disse: “Frete 1”. Ele pressionou de novo e agora ele disse: “R$ 32.30”. Mais uma vez ele pressionou o Tab e informação foi “Botão escolher”. Pela última vez ele pressionou o Tab e o leitor disse: “Frete 2”. Bem, o botão escolher era sobre a primeira ou segunda opção? Se o texto fosse: “Escolher frete 1” seria mais fácil.
Depois que o Lucas testou nosso sistema, nós prometemos a ele que iríamos mudar essas coisas para melhorar a experiência dele.
As dificuldades de Jeferson — Baixa visão e daltonismo
É a vez de Jeferson testar nossa loja virtual. Ele tem baixa visão e daltonismo. Diferentemente do Lucas, ele pode usar o computador sem um leitor de tela, mas o zoom é ferramenta essencial para ele.
Jeferson começou seus testes na nossa página e teve problemas para conseguir ver a fonte, que para ele estava pequena demais. Ele tentou acionar o zoom, mas a página quebrou completamente. Nós, provavelmente, a desenhamos para ser usada em pixels para tudo, e não procuramos unidades de medida como “em”. Ainda com a fonte maior, Jeferson sentiu que o contraste estava realmente problemático. Ele nos disse para seguirmos o padrão da WCAG (Guia de Acessibilidade para Conteúdo da Web — tradução livre), que pertence também a WAI. Para nos ajudar um pouco mais, ele mandou esses links de ferramentas gratuitas para verificar contraste:
- https://webaim.org/resources/contrastchecker/
- https://contrastchecker.com/
- https://contrastchecker.online/
Mesmo tendo dificuldades para ler os textos, ele prosseguiu testando o sistema para nós e começou a analisar o formulário de novos clientes. Ele completou o formulário, mas quando clicou em “Registrar”, nada aconteceu. Nós dissemos: “Mas os campos inválidos estão envolvidos com uma borda vermelha! Isso é bem óbvio”. E ele nos lembrou que é daltônico. Sim, foi completamente constrangedor. Nós precisamos nos lembrar de pôr mais informações do que apenas cores.
Coordenação motora — O caso de Pedro
Coordenação motora e surdez, são o segundo lugar na nossa lista, representando 12.1% da população brasileira. As dicas que você precisa observar aqui são sobre a leitura e os controles via teclado.
Pedro acessa o computador apenas pelo teclado ou dispositivos especiais que ajudam a melhorar a experiência. Mas no momento ele possui apenas o teclado. Infelizmente, ele tem dificuldades de usar o mouse.
Ele estava usando nosso sistema e reportou algumas dificuldades para nós. Veja a lista que Pedro nos escreveu:
1 — Quando pressionei “esc” os modais não fecharam. Eu tentei com o Tab alcançar o “x” no canto superior direito. Mas não era um botão, apenas um ícone. Ícones não são focáveis nativamente. Depois eu me esforcei em usar o mouse, mas meu problema torna isso difícil, o “x” não parecia ter bordas, então tive que clicar exatamente em cima dele.
2 — Descobri algumas áreas que estavam acessíveis apenas usando o mouse. Quando essas áreas eram muito pequenas, era complicado de posicionar o mouse sobre elas.
3 — Eu estava verificando a tabela, mas em uma coluna o conteúdo estava incompleto. Para ver a informação toda era preciso clicar e arrastar. Bem, não consegui fazer isso.
Você, meu leitor, está anotando tudo isso?
Surdez — Dificuldades da Clara
Representando as mulheres, a Clara testou nossos sistemas também. Ela não é fluente na língua portuguesa, porque sua primeira língua é Libras. Infelizmente para se sentir incluída na sociedade, ela começou a aprender português.
Textos, figuras, gráficos e ícones são muito importantes para ela. Veja o que ela escreveu para nós e tome suas conclusões:
“Oi, eu agradeço por colocar um ícone de lupa ao lado do campo de pesquisa. Algumas palavras em português ainda são confusas para mim.”
Mas ela encontrou algumas dificuldades com os textos longos, e nos mandou esse intérprete de libras do governo. É um intérprete que pode ler a tela para ela. Não é perfeito, mas em momentos em que o português fica muito confuso isso pode ajudar um pouco. Essa opção é gratuita, mas existem outras opções disponíveis.
Ela disse que palavras simples são melhores que textos complexos. Geralmente quando um site tem textos longos e palavras complexas demais, ela ainda não compreende. É melhor quando o texto vai direto ao ponto e não usa linguagens informais demais, como: “Custa o olho da cara”. Em Libras isso pode não fazer sentido, pois eles têm suas próprias expressões. Evite usar esse tipo de frase e tente passar uma mensagem mais limpa. A mesma recomendação serve para dislexia e autismo.
Algumas notas sobre autismo
São muitas as deficiências e distúrbios mentais. Não é possível simplesmente envolver tudo num texto simples como esse. Mas sobre a síndrome comportamental do autismo, eu tenho algumas dicas. Você pode ler mais sobre isso nessa cartilha sobre tecnologias assistivas nas escolas.
Há um famoso vídeo sobre uma simples caminhada em um shopping de uma criança autista e sua mãe. Eu acho que é uma ótima introdução.
Podemos ajudar pessoas com autismo com atitudes simples. Uma coisa importante são as cores, não escolha cores fortes demais, pode ser extremamente desconfortável para elas. Mantenha a página simples sem muita informação e cores que possam ajudá-los a manter o foco no que é importante. Imagens e figuras podem ajudar. Claro que você deve se atentar para não exagerar na quantidade de figuras.
Padrões são importantes. Se você possui mais de uma página no sistema, observe se essas páginas mantêm um contexto de padrão. Use os mesmos componentes para fazer coisas similares ao decorrer das páginas.
Não retire as características principais dos elementos. Os links sempre têm um sublinhado e são em forma de texto. Por outro lado, os botões possuem sempre um formato similar, com bordas e um texto ao centro. Você pode fazer suas intervenções para o sistema ficar mais belo, mas nunca tirar as características que definem esses elementos.
Eu deixo aqui uma referência de guia de estilo para ajudar a compreender o que eu quero dizer com “padrões”.
Conclusão
Claro que isso é um resumo prático sobre acessibilidade e não é possível cobrir tudo. Mas sei que essas dicas irão ajudar você a desenhar um sistema muito mais acessível ou tocá-lo sobre esses problemas que não pensamos rotineiramente.
O próximo passo é ir um pouco mais a fundo. Agora, iremos fazer o download e instalar um leitor de tela para nos ajudar a testar, olhar técnicas para melhorar a acessibilidade e ver regras e materiais que devemos seguir.
Vejo você em breve! =D #todosDevemConseguirUsarNossosProdutos.
