Edux — Estudo de Acessibilidade
Este artigo é complementar ao case “Edux, uma nova experiência no ensino remoto — Estudo de caso de UX”
Acessibilidade, para quem?
É comum o pensamento de que “medidas acessíveis” tem como princípio ajudar uma pequena parcela da população que apresenta alguma deficiência. Entretanto, será que esse pensamento está realmente correto?
Como o foco do nosso trabalho é a acessibilidade no meio digital, nós trazemos esse trecho da Cartilha de Acessibilidade na Web, produzida pelo World Wide Web Consortium (W3C) Brasil, que esclarece essa dúvida:
Acessibilidade na web é a possibilidade e a condição de alcance, percepção, entendimento e interação para a utilização, a participação e a contribuição, em igualdade de oportunidades, com segurança e autonomia, em sítios e serviços disponíveis na web, por qualquer indivíduo, independentemente de sua capacidade motora, visual, auditiva, intelectual, cultural ou social, a qualquer momento, em qualquer local e em qualquer ambiente físico ou computacional e a partir de qualquer dispositivo de acesso.
Ou seja, a acessibilidade é para qualquer pessoa e não apenas para as que apresentam algum tipo de deficiência… mas falando nelas, não são tão poucas como muitos pensam:
Portanto, o uso de princípios acessíveis em ferramentas digitais é extremamente importante para a construção de uma sociedade igualitária e inclusiva.
Em nossa solução, o Edux, esse ponto não foi visto como opcional mas sim como indispensável. O grupo conversou sobre acessibilidade desde o momento de ideação do trabalho até a sua conclusão e alguns aspectos só reforçaram essa postura:
Pesquisa por referências
Após conversarmos sobre a questão, começamos a refletir sobre aonde poderíamos buscar por instruções de como agir. Existiria alguma lei, manual ou documento oficial para isso? Quais referências poderíamos utilizar?
Durante a nossa busca, descobrimos a existência da “WCAG” — Diretrizes de Acessibilidade para o Conteúdo da Web (Web Content Acessibility Guidelines), que é um conjunto de diretrizes e recomendações criado pelo W3C, que fundamenta a construção de conteúdos digitais com qualidade e acessíveis a qualquer pessoa independentemente de sua deficiência e/ou habilidade.
Essas diretrizes foram criadas em 1999 mas passaram por atualizações ao longo dos anos. A versão mais recente é a 2.1 que apresenta 78 critérios de sucesso setorizados em quatro princípios fundamentais:
- Perceptível
- Operável
- Compreensível
- Robusto
Além dessa setorização, elas também apresentam 3 níveis de prioridade:
- Prioridade 1: Os desenvolvedores web precisam satisfazer estes requerimentos, caso contrário será impossível para um ou mais grupos acessar o conteúdo web. A conformidade com este nível é descrita como A.
- Prioridade 2: Os desenvolvedores web deveriam satisfazer estes requerimentos, caso contrário alguns grupos terão dificuldade em acessar o conteúdo web. A conformidade com este nível é descrita como AA ou A duplo.
- Prioridade 3: Os desenvolvedores web podem satisfazer estes requerimentos, de modo que fique mais fácil para alguns grupos acessar o conteúdo web. A conformidade com este nível é descrita como AAA ou A triplo.
Marcelo Sales, brasileiro e especialista em acessibilidade digital, criou o Guia WCAG que é um material incrível onde os princípios oficiais de acessibilidade foram resumidos em linguagem mais simples e em formato de cards para facilitar o seu entendimento. O conteúdo sobre acessibilidade produzido por Marcelo, tanto através deste Guia, quanto por vídeos de palestras, entrevistas ou material próprio em redes sociais foi de imensa contribuição para este trabalho.
Em uma das falas de Marcelo, foi citada a “Lei Brasileira de Inclusão (LBI)”, que também é conhecida como o Estatuto da Pessoa com Deficiência (Lei 13.146/2015). Ao analisá-la, observamos que um capítulo trata exclusivamente do direito à educação e trouxemos o trecho abaixo como exemplo:
Capítulo IV — Do direito à educação
Art. 27. A educação constitui direito da pessoa com deficiência, assegurados sistema educacional inclusivo em todos os níveis e aprendizado ao longo de toda a vida, de forma a alcançar o máximo desenvolvimento possível de seus talentos e habilidades físicas, sensoriais, intelectuais e sociais, segundo suas características, interesses e necessidades de aprendizagem.
Através desse artigo nós reforçamos a importância de abordar questões de acessibilidade no Edux e ainda lendo o documento, nos deparamos com uma informação que até então desconhecíamos:
CAPÍTULO II — DO ACESSO À INFORMAÇÃO E À COMUNICAÇÃO
Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.
Se então é obrigatória a acessibilidade nessa situação, temos no Brasil um grande número de sites acessíveis, correto? Infelizmente não:
E os websites oficiais do governo? Será que ao menos eles são acessíveis?
Foi quando descobrimos a existência do Modelo de Acessibilidade em Governo Eletrônico (eMAG), desenvolvido pelo governo federal e que tem o compromisso de ser o “norteador no desenvolvimento e na adaptação de conteúdos digitais do governo federal, garantindo o acesso a todos”.
As recomendações do eMAG permitem que a implementação da acessibilidade digital seja conduzida de forma padronizada, de fácil implementação, coerente com as necessidades brasileiras e em conformidade com os padrões internacionais. É importante ressaltar que o eMAG trata de uma versão especializada do documento internacional WCAG (Web Content Accessibility Guidelines: Recomendações de Acessibilidade para Conteúdo Web) voltado para o governo brasileiro, porém o eMAG não exclui qualquer boa prática de acessibilidade do WCAG.
Analisamos o eMAG e vimos que o conteúdo é bastante similar e realmente baseado nas recomendações da WCAG, portanto, decidimos utilizar esses critérios para nortear nosso trabalho.
Claramente não implementamos todos eles devido ao perfil da ferramenta, ao tempo que tivemos para o desenvolvimento do estudo e também pelo caráter do trabalho. Sendo um “estudo de caso”, temos limitações que não existiriam caso a ferramenta estivesse em funcionamento ou fosse estar em breve.
Também fazemos a observação de que todos os resumos dos critérios que mostraremos a seguir foram retirados do Guia WCAG.
A acessibilidade no Edux
Como forma de abordar e organizar melhor as medidas que tomamos, resolvemos distribuí-las em algumas categorias:
Linguagem
Como nossa ferramenta foi desenvolvida para adolescentes, professores de idades diversas e, possivelmente, de várias escolas, optamos por adotar um tom de voz casual para conseguirmos criar um boa conexão com os usuários.
Procuramos também escrever sentenças mais divertidas, irreverentes e entusiasmadas, porém, de maneira respeitosa e não exagerada.
De modo geral, como os usuários passariam boa parte do dia utilizando nossa solução, queríamos que eles se sentissem a vontade e confortáveis ao lidar com uma ferramenta amigável e de linguagem fácil.
Falando em linguagem, ao longo do desenvolvimento da ferramenta nós procuramos seguir as recomendações desses dois critérios da WCAG:
3.1.3 — Palavras Incomuns [AAA]
O uso de gírias, jargões, metáforas e figuras de linguagem pode ser um empecilho para a compreensão da informação, nesse sentido deve-se fornecer uma forma de tradução ou explicação da informação (exemplo: link para acessar um glossário).
Nós evitamos o uso das palavras incomuns para facilitar a compreensão das nossas informações e estabelecemos um nível de leitura simples para abranger os demais usuários, assim como recomenda o critério 3.1.5:
3.1.5 — Nível de Leitura [AAA]
Caso um determinado conteúdo seja tão complexo a ponto de uma pessoa com ensino fundamental completo* não ser capaz de entende-lo, será necessário a sua revisão ou a utilização de conteúdo complementar que facilite a sua compreensão.
Fonte tipográfica e textos
A fonte padrão escolhida foi a Noto Sans KR e ela pode ser encontrada gratuitamente no Google Fonts. Além de ter agradado a equipe em termos estéticos ela preenche pré-requisitos que promovem a acessibilidade:
Fonte sem serifa: para conteúdo digital, as fontes sem serifa são consideradas mais acessíveis, pois são visualmente mais limpas e promovem uma melhor distinção entre os caracteres.
Caracteres não ambíguos: algumas fontes podem apresentar caracteres diferentes de forma igual, como é o caso da letra “I” (i maiúsculo) e a consoante “l”, assim como a letra “O” e o número zero “0”. A mesma representação deles pode ser bastante confusa para a leitura de pessoas com dislexia, baixa visão ou para qualquer um que lerá um texto muito longo.
Em relação aos textos, seguimos esses princípios:
Contraste ideal: todas as cores de texto utilizadas apresentam um nível de contraste acessível em relação à cor de plano de fundo. No tópico de Cores esse ponto será retomado e descrito em mais detalhes.
Tamanho: como os usuários do Edux é bastante diverso, procuramos utilizar como tamanho mínimo para textos principais a dimensão de 14 px, pois assim possibilitamos uma maior legibilidade das sentenças. A dimensão de 12 px foi usada apenas em textos complementares e a de 10 px em raros momentos.
Para continuar seguindo nas diretrizes acessíveis, tomamos o cuidado de não utilizar:
- imagens de texto, pois estas não são lidas pelos leitores de tela e dificultam ampliação para quem tem baixa visão. (Como consta no critério de sucesso “1.4.9 — Imagens de Texto [AAA]”)
- textos inteiros em itálico
- textos inteiros em letras maiúsculas
- textos que se movem ou piscam
- fontes cursivas ou decoradas
- o sublinhado em textos que não são links
- efeitos de texto (sombras, bordas e degradês) a ponto de comprometer a legibilidade da fonte
- espaçamento entre letras e entre linhas muito grande ou muito pequeno
- não alteramos a estrutura da fonte, esticando-a horizontalmente ou verticalmente
Tradutora Virtual de Libras
Para tornar nosso conteúdo alcançável a pessoas com deficiência auditiva nós criamos a Sofia, nossa tradutora virtual de libras. No momento ela pode ser acessada apenas na tela de Início e de modo ilustrativo, mas desenvolvemos o design das telas de modo que a margem entre a borda do celular e os textos não é menor que 32 px, pois esta é a dimensão oficial do ícone para a tradutora. Esse distanciamento apenas foi menor em pouquíssimos casos que envolvem textos não principais e que se localizam acima do ícone, dessa forma nós não comprometemos a legibilidade do conteúdo.
A escolha do nome “Sofia” se deu por seu significado: “a que detém a sabedoria”. Como nossa ferramenta voltada para a educação, achamos esse nome bastante adequado e alinhado com a ideia que queríamos passar. Adquirimos a imagem gratuitamente através do site Freepik e a editamos para que ela estivesse com a roupa do Edux e com um tom de cabelo mais comum da realidade brasileira.
Muitas empresas oferecem esse serviço e damos como exemplo a Hand Talk. Em seu site também é possível acessar diversos conteúdos interessantes e úteis a respeito da acessibilidade no meio digital.
Cores e arte
Neste aspecto, seguimos essas diretrizes para a escolha das cores dos textos de títulos, parágrafos e botões; e para backgrounds (planos de fundo) de telas e de botões:
DIRETRIZES GERAIS
- Critério 1.4.1 — Utilização de cores [A]
Cores não devem ser utilizadas como única maneira de transmitir conteúdo ou distinguir elementos visuais.
Dica: uma mensagem de erro em um formulário deve trazer um ícone de alerta, uma mensagem informando como corrigir o erro e também uma cor destacando a informação (e não apenas a mudança de cor).
CONTRASTE
- Critério 1.4.3 — Contraste (mínimo) [AA]
Textos devem ter uma relação de contraste entre primeiro e segundo plano de ao menos 4.5:1.
Nota: caso o tamanho das fontes de textos sejam no mínimo “18pt” ou “14pt bold” a relação de contraste pode ser de 3:1. - Critério 1.4.6 — Contraste (melhorado) [AAA]
Textos devem ter uma relação de contraste entre primeiro e segundo plano de ao menos 7:1.
Nota: caso o tamanho das fontes de textos sejam no mínimo “18pt” ou “14pt bold” a relação de contraste pode ser de 4.5:1. - Critério 1.4.11 — Contraste Não textual [AA]
Componentes de interface (exemplo: botões) e imagens essenciais para o entendimento do conteúdo devem ter uma relação de contraste entre primeiro e segundo plano de ao menos 3:1.
Tendo em vista essas informações, utilizamos o site Color.review e o Contrast Checker para escolher as tonalidades que se enquadrassem nessas recomendações.
Dentro da proposta de identidade visual do Edux há o uso de tons pastéis em algumas áreas da ferramenta, porém, essas tonalidades não promoviam um contraste adequado com o background, portanto, decidimos colocar uma borda em uma tonalidade de cinza (#949494) que gerou o contraste de 3.0 e atendeu ao “critério 1.4.11”.
Para exemplificar melhor o uso das cores nos elementos da interface, nós resolvemos dar como amostra a disciplina de Física. Na imagem a seguir estão descritas as cores escolhidas e o contraste estabelecido entre elas, os textos e com o background:
Em parceria com as cores para cada disciplina e turma, foram criadas artes personalizadas, envolvendo fotos e desenhos digitais produzidos no Figma, pela integrante Érika Heim. Desta forma, geramos 3 meios de associação: texto, cor e imagem, o que configura um ponto bastante positivo na usabilidade pelos estudantes e professores.
Acreditamos que a arte, as cores e um pouco de diversão podem contribuir bastante para estabelecermos um vínculo com nossos usuários e proporcionar um sentimento de satisfação ao utilizar o Edux.
Aulas gravadas e “ao vivo”
Além da escolha das cores de modo a promover um contraste adequado, seguimos outros critérios no desenvolvimento das telas de aulas “ao vivo” e aulas gravadas.
Na tela da aula gravada nós disponibilizamos transcrições e no botão de “configurações” do vídeo nós indicamos o recurso de legendas e o da tradução em LIBRAS:
Assim como nas aulas gravadas, colocamos a opção de legenda nas aulas “ao vivo” e ela pode ser ativada através do botão de “opções”. Também seguimos a mesma lógica da tela preservar as mesmas ferramentas mesmo que a orientação do celular seja alterada:
Conclusões
A acessibilidade em meios digitais envolve uma gama enorme de princípios e nós tentamos, ao máximo, estudar as informações fundamentais e cumprir as recomendações mais pertinentes para nosso estudo.
Acreditamos no poder transformador da educação e ficamos muito felizes por termos conseguido realizar essas análises e implementar critérios de sucesso da WCAG no Edux. Como UX Designers, devemos refletir sobre nosso importante papel e pensar em proporcionar uma experiência de qualidade a todos os usuários, independente do nicho do produto em que estejamos trabalhando.
