Uma Web mais inclusiva!

Todo o desenvolvedor web aprende logo no começo da sua carreira que o produto que desenvolve não é para si e sim para pessoas com necessidades, literacia digital e vivências completamente diferentes do seu universo. Com isso, começamos a trabalhar com conceitos de personas, arquétipos, contextos de uso, entre outros. Em certa altura começa-se a ouvir falar da importância da acessibilidade, e que devemos pensar nas deficiências, limitações e condições de uso que as pessoas podem ter em relação ao nosso produto.

A internet é uma forte agente da globalização da informação, mas pouco se discute sobre como essas informações estão disponíveis para as pessoas. Será que a informação chega igualmente a todos? Quem são as pessoas que estão a ter acesso a estas informações? Quais as barreiras comunicacionais e consequências geradas quando não tornamos essas informações acessíveis?

Muitas vezes quando se fala em acessibilidade o primeiro pensar é: como pessoas com deficiência vão aceder ao conteúdo. De facto essa é uma preocupação que termos de ter, pois 15% da população mundial apresenta algum tipo de deficiência, e na União Europeia estimam-se mais de 87 milhões de pessoas. Entretanto o desafio da acessibilidade envolve muito mais que apenas o conteúdo. Queremos que a Web seja um ambiente inclusivo, onde qualquer pessoa possa navegar com independência e ter uma experiência completa, e é por isso que é tão importante falar sobre acessibilidade.

Mas o que é uma Web acessível?

Uma Web acessível é um ambiente que promove uma experiência de fácil interação, intuitiva, segura e que os utilizadores tenham autonomia ao explorá-la. Para isso, cabe a nós, designers e desenvolvedores web, termos certos cuidados ao avançar com o desenvolvimento dos nossos projetos. Como estamos a lidar com um ambiente de pluralidade, às vezes pode parecer difícil saber por onde começar, entretanto, existem diversos materiais e ferramentas que podem facilitar esse processo.

Fig. 1 — Representação de diversos tipos de deficiências

Para garantir uma Web acessível, a W3C através da Web Accessibility Initiative (WAI) desenvolveu a WCAG (Web Content Accessibility Guidelines), que é um conjunto de diretrizes sobre acessibilidade para conteúdos disponíveis na internet, onde é possível encontrar recomendações para construir um site com conteúdo acessível, considerando as mais diversas necessidades de um utilizador.

O Obstáculo das Cores

A nível cromático, de acordo com a WCAG, é de extrema importância verificar o contraste das cores para garantir a acessibilidade dos conteúdos, uma vez que existem diversos tipos de deficiência visual e muitas estão relacionadas com a sensibilidade ao contraste. Por isso é preciso atentar à relação entre as cores dos textos, dos ícones e plano de fundo, além de também considerar o tamanho e estilo da fonte.

A norma estabelece duas classificações aceitáveis de contraste: AA para o contraste mínimo, e AAA para um contraste aprimorado. Para auxiliar nesse processo existem alguns sites, extensões e DevTools que permitem verificar o contraste a partir da seleção de cores, ou até mesmo fazer uma análise mais completa de uma página web e indicar as pontuações e problemas encontrados em relação à acessibilidade.

Por exemplo, o site Contrast Ratio da Lea Verou tem uma interface simples que permite fazer essa verificação entre as cores e analisá-las sobre o texto, o site Coolors do Fabrizio Bianchi tem o “Color Contrast Checker” que também permite essa verificação e ainda traz uma funcionalidade que auxilia sobre como aprimorar o nível de contraste quando há uma relação má entre as cores. Ambos os sites também indicam o nível de contraste preciso e dão indicações também em relação ao tamanho do texto a ser utilizado, conforme as recomendações da WGAC.

Fig. 2 — Color Contrast Checker disponível no Coolors

Uma ferramenta bastante interessante também é a Lighthouse da Google. Ela faz uma auditoria a partir da página e verifica não apenas se os níveis de contraste de todo o conteúdo estão de acordo com as normas de acessibilidade, mas também gera um relatório de análise completo em relação aos níveis de progressive web app, performance, boas práticas e SEO.

Google Lighthouse | Automated Accessibility Tool Review

Fig. 3 — Relatório de métricas do Lighthouse

Embora existam diversas ferramentas para auxiliar na definição da tabela cromática, Manuel Matuzovic ressalta que:

“Using high contrasting colors is great, but people who have low vision still may want to alter the colors used by websites. There are many different user needs and accordingly there is also a variety of methods for changing colors available. That fact entails a certain unpredictability and makes it hard for us to make sure that our pages are always fully accessible. That’s why we shouldn’t just rely on meeting level AA or AAA criteria for contrast, but also test our websites thoroughly and consider providing high contrast alternatives.”

De facto, o modo de alto contraste é algo que merece atenção, uma vez que este é um recurso normalmente fornecido pelos próprios sistemas operacionais, a fim de promover uma maior legibilidade e reduzir a complexidade visual. Se durante o desenvolvimento de um projeto isso não for levado em consideração, determinados elementos podem desaparecer, a depender das definições do utilizador, como é possível ver na imagem abaixo:

Fig. 4 — Interface com cards em tons pastéis

Fig. 5— Interface anterior em alto contraste personalizado.

Entretanto, se esse cenário já for previsto, é possível testar as versões de alto contraste, identificar essas falhas, e corrigí-las estabelecendo novos padrões para “forced colors”.

Fig. 6 — Interface em alto contraste corrigida com forced-colors

O exemplo e a solução encontrada mostrados nas imagens acima, aplicam-se para soluções de alto contrante em Windows, e foram extraídos do Microsoft Edge Blog, onde é possível ler mais sobre o assunto. Para verificar as definições de alto contraste a partir de um Windows, basta ir a Settings > Ease of Access > High contrast > “Turn on high contrast” ou utilizar o atalho Alt + Shift esquerdo + Print Screen, que permite ativar e desativar a função.

Ainda sobre o uso das cores, é possível concluir que não vale a pena comunicar exclusivamente a partir delas. Então quando pensarmos em usar a cor verde para indicar um input correto, ou o vermelho para uma informação errada, é importante incluir elementos complementares, como símbolos e legenda para comunicar essa informação. O mesmo vale ao identificar links num texto, para além de destacá-los com uma cor diferente, é recomendado acrescentar o estilo sublinhado.

Outros detalhes que merecem atenção

• Identificar os conteúdos não textuais, com legendas e textos alternativos
• Disponibilizar legendas e descrições para conteúdos de áudio e/ou vídeo
• Disponibilizar os conteúdos de maneira que possam ser adaptados para formatos mais simples
• Para tornar a leitura dos conteúdos mais agradável: ter um tamanho médio de fonte entre 15px a 20px a depender da resolução dos dispositivos, e um espaçamento entre linhas de pelo menos 1.5.

O Obstáculo da Navegação

A nível de navegação, de acordo com a WCAG, todas as funcionalidades de um site têm de estar disponíveis a partir de um teclado. É muito importante ter atenção ao usar propriedades de CSS que modifiquem a estrutura do DOM em relação à ordem do conteúdo que é projetado para o utilizador, como por exemplo os elementos numa flexbox ou grid, pois isso pode ser um grande obstáculo para os utilizadores que navegam a partir do teclado, ou que fazem uso de alguma tecnologia assistiva, como leitores de tela. Para auxiliar nesse processo e compreender melhor como o conteúdo é projetado a essas tecnologias, é possível consultar a Accessibility Tree a partir do painel de acessibilidade.

Fig 7 — Accessibility Tree

Um outro ponto que merece atenção é que não basta essa navegação ser funcional, nós não queremos produtos apenas funcionais, queremos produtos que contribuam para uma experiência positiva. E todos merecem experiências positivas. Por isso é importante perceber como otimizar a navegação de diferentes maneiras de forma a contemplar as necessidades e contornar obstáculos.

O que para muitos pode parecer apenas um detalhe, para os utilizadores que fazem uso de uma navegação alternativa pode ser fundamental, por exemplo:

• Ter um outline a indicar o elemento selecionado, que ajuda a perceber os elementos em foco durante a navegação.
• Esconder conteúdos de maneira acessível
• Disponibilizar um “atalho” que leve o utilizador diretamente ao conteúdo, permitindo-o saltar links repetitivos. E para fazer isso basta adicionar um link no topo que direcione para o id do conteúdo, e tornar esse elemento focável através do atributo tabindex="0".

Outros detalhes que merecem atenção

• Os sites precisam fornecer uma navegação consistente
• Os links externos devem indicar o seu destino
• Não se deve criar links vazios
• Deve-se ter as instruções evidentes
• Prevenção de erros

Conclusão

Existem diversas práticas que podem ser aplicadas para tornarmos a Web um ambiente mais inclusivo. Ao ignorarmos a necessidade destes cuidados ao desenvolvermos os nossos projetos, estamos a colaborar com a barreira da desigualdade. As pessoas com deficiência apresentam uma menor taxa de uso de tecnologias, e muito se deve aos obstáculos que encontram durante esse processo. Se queremos mudar essa realidade, precisamos encarar a acessibilidade como um requisito.