Testes rápidos de acessibilidade para interfaces digitais

Melhorando a acessibilidade em aplicações digitais utilizando a extensão Lighthouse como ferramenta para análise inicial de requisitos.

Sabemos que ao construir uma interface digital devemos, portanto, garantir uma boa usabilidade, e que o nosso usuário deve atingir o seu objetivo de maneira eficiente, eficaz e satisfatória. E também sabemos que existem outras métricas, além da usabilidade, que indicam se nossa aplicação está proporcionando uma boa experiência ao usuário.

Segundo o diagrama da Colmeia da Experiência do Usuário, ou em inglês “The User Experience Honeycomb”, uma boa experiência vai além da usabilidade da interface. Composta por nove favos, sendo eles a usabilidade, utilidade, desejabilidade, acessibilidade, encontrabilidade, credibilidade, valor, desempenho e satisfação, a teoria nos ajuda a entender que a construção de um produto digital é complexa e não se limita apenas na usabilidade da aplicação.

Vamos falar, hoje, da acessibilidade, um dos noves favos que compõe a colmeia.

Em uma sociedade que as pessoas estão cada vez mais utilizando aplicações WEB e imersas no mundo digital, é importante que nossos sistemas sejam programados para atender às necessidades das pessoas.

Segundo o último relatório global da OMS, há cerca de 2,2 bilhões de pessoas no mundo com algum tipo de deficiência visual. Dado esses números, faz-se necessário planejar bem a construção de nossas aplicações. E existe apenas um caminho para saber se estamos indo para o lado certo, validação!

Criar e garantir que nossos produtos atendam os requisitos mínimos de acessibilidade digital é uma responsabilidade compartilhada todos os envolvidos na sua construção! Ou não?

Para garantir que nossas aplicações estão cumprindo as diretrizes de acessibilidade da WCAG, é essencial realizar testes com usuários e capturar diretamente deles, suas necessidades e demandas e por fim, dar um analgésico a suas dores. Pois é apenas com testes que podemos identificar as barreiras existentes e oferecer soluções para melhorar a experiência do usuário.

Para saber mais sobre os requisitos recomendados de acessibilidade digital, acesse o site da WCAG.

Graças aos avanços na tecnologia, atualmente vez mais temos algumas ferramentas que nos auxiliam nesse processo de análises de nossas interfaces, através de requisitos previamente definidos.

Extensão Lighthouse

A extensão Lighthouse é uma poderosa ferramenta, de uso gratuito e que pode ser encontrada na loja de extensões de diversos navegadores. Com ela podemos realizar uma rápida análise de alguns requisitos, que visam melhorar o desempenho, acessibilidade, qualidade, e outras métricas importantes na nossa aplicação. Com um simples clique, a extensão nos fornece relatórios detalhados e sugestões práticas de como otimizar nossa aplicação para proporcionar uma melhor experiência para nossos usuários.

De uma maneira geral, a extensão Lighthouse gera um relatório com alguns requisitos técnicos, e possíveis pontos de melhoria em nossa aplicação. Essa ferramenta não substitui uma análise mais detalhada de nosso produto, mas com base nas informações por ela gerada, podemos gerar produtos cada vez mais aprimorados.

Passo a passo para instalar e usar essa extensão

1. O primeiro passo é ir na loja do seu navegador e instalar a extensão Lighthouse. No meu caso, utilizei o Google Chrome como navegador, então fui na Chrome Web Store e instalei a extensão.

2. Depois de instalada, acesse a página que você quer realizar a análise. 3. Clique no ícone da extensão, no navegador da Google fica no canto superior direito. 4. Clique no ícone de engrenagem e acesse as configurações da extensão, ao fazer isso você vai poder escolher os tipos de testes que você deseja fazer na página.

5. Existem 5 categorias possíveis para as análises. Como o nosso objetivo é apenas analisar a acessibilidade, é recomendável deixar apenas a categoria “Accessibility” ativada. E também coloque o dispositivo (device) no modo Desktop se quiser testar o modelo para telas grandes, ou como Mobile se quiser testar como telas menores.

6. Depois de definir essas métricas para análises, clique no botão “Generate report”. 7. Uma nova aba será aberta com um relatório, como esse abaixo, dos resultados gerados pela extensão pronto para análise e correção.

O relatório gerado pela extensão pontua funcionalidades que devem ser melhoradas na aplicação. Esse relatório é dividido em seções, as quais são:

1 — O gráfico da porcentagem que a página atingiu na análise, avaliando os requisitos totais.

2 — BEST PRATICES: Análise das melhores práticas nos requisitos comuns de acessibilidade. Nessa seção, é realizada uma análise da semântica da página, com o objetivo de oferecer uma melhor experiência aos usuários que dependem de leitores de telas.

3 — CONTRAST: É analisado o contraste entre os elementos da sua interface. Nesta seção, é verificada a taxa de contraste entre as cores de fundo e do primeiro plano, com o objetivo de garantir que o conteúdo seja legível para todos os usuários, especialmente aqueles com deficiências visuais.

[embed]Understanding Success Criterion 1.4.3: Contrast (Minimum) | WAI | W3C The intent of this Success Criterion is to provide enough contrast between text and its background so that it can be…www.w3.org

4 — ADDITIONAL ITEMS TO MANUALLY CHECK: Nesse tópico a análise da extensão mostra algumas funcionalidades que não puderam ser analisados por ela. Desse modo, é importante lembrar que, apesar dessa ser extensão nos gerar um relatório para análises, é preciso fazer verificações manuais dos mesmo, pois a extensão não descarta os teste de acessibilidade com usuários reais.

5 — PASSED AUDITS: Neste tópico estão os itens que foram aprovados na análise

6 — NOT APPLICABLE: Neste tópicos também estão os itens que passaram como aprovados nesta rápida análise.

• Importante: Muito provavelmente, sua análise terá tópicos diferentes destes apresentados, por causa dos pontos que foram aprovados e reprovados na sua aplicação.

No final desse relatório, você e sua equipe terá muitos pontos para melhorar a aplicação. Mas lembre-se que essa análise foi gerada por uma máquina e que os critérios são estáticos e dependentes de atualizações da equipe de desenvolvimento da extensão. Isso implica que, dependente do dia de atualização da mesma, novos requisitos de acessibilidade podem ter sido adicionados ou atualizados nas recomendações da WCAG. Portanto, é importante estar sempre atualizado e complementar esta análise com uma análise manual e testes de acessibilidade com usuários reais.

[embed]Guia WCAG | Guia de consulta rápida WCAG - Guia de Consulta Rápida versão 8.2.7última atualização em 01/03/2023 O que foi atualizado nesta versão?guia-wcag.com

Como pudemos ver, os itens 5 e 6 da análise precisam de uma avaliação mais detalhada que não pode ser realizada somente pela extensão. É necessário considerar outras formas de avaliação para garantir a acessibilidade da aplicação.

E outra recomendação, e a mais importante, é que essa análise não descarta a necessidade de testes reais com usuários portadores de deficiências visuais para testar e aprimorar esses e outros pontos de acessibilidade! A extensão serve apenas como um guia inicial, o qual pode direcionar sua equipe de desenvolvimento para melhorar a sua aplicação.

É importante destacar que a acessibilidade nas aplicações não se restringem apenas a cores e tamanhos de fontes, mas sim a uma série de requisitos que devem ser considerados no desenvolvimento do produto. O tema de acessibilidade digital, não é exclusivo processo de design, toda a construção e execução do projeto deve ter esse olhar, e com certeza que nossos projetos estarão cada vez mais acessíveis para todos.

Afinal, recursos de acessibilidade não devem ser apenas um item de checklist em nossos projetos, eles devem realmente fazer a diferença para quem precisa! Como um compromisso ético e social para tornar a tecnologia mais inclusiva e acessível para todos.

Em conclusão, é fundamental que a acessibilidade em aplicações digitais seja tratada como uma prioridade em todos os processos de desenvolvimento. A utilização de ferramentas como a extensão Lighthouse pode ser um primeiro passo importante para identificar possíveis problemas de acessibilidade em nossas aplicações, mas não pode substituir a necessidade de testes reais com usuários portadores de deficiências visuais.