Ilustração de uma mulher segurando um grande símbolo de checado, verificado. Ao seu lado há uma grande pasta de trabalho e atrás dela uma enorme tela de onde sai uma folha de papel. A figura representa que o documento que sai do computador está em conformidade.
Categorias:

Conformidade com validadores automáticos em uma página com barreiras de acesso

Este artigo foi escrito com o objetivo de mostrar como a intervenção humana continua importante na verificação de acessibilidade.

Nos últimos anos tenho feito alguns testes para entender as ferramentas de verificação de acessibilidade em páginas Web. Venho notando cada vez mais uma demanda por ferramentas automáticas milagrosas, pois nem sempre a intervenção humana é possível em todos os sites.

O problema é quando delegamos somente para as ferramentas a responsabilidade de garantir a acessibilidade. Um site sem erros ou com nota 10 pode ser completamente inacessível se não contar com a intervenção humana no processo. E isso é o que quero mostrar neste experimento.

Esse estudo foi baseado no artigo de Manuel Matuzovic sobre um site com 100% de conformidade no LightHouse do Google mas com sérios problemas de acessibilidade. Repliquei boa parte do seu código aqui e decidi fazer alguns testes nas principais ferramentas de verificação de acessibilidade.

Desenvolvi uma página simples, com a estrutura semântica e tudo o que o código precisa para ser acessível. Porém adicionei alguns recursos que eliminam a navegação por teclado, a visualização dos textos e o acesso por tecnologia assistiva.

Enfim: é um site que ninguém consegue usar.

Coloquei essa página no meu blog e comecei os testes em diversas ferramentas. Como a ideia desse post é antiga, refiz o teste algumas vezes e fui ajustando o código às ferramentas. O objetivo era conseguir zero ou o mínimo possível de erros, mantendo a página cheia de barreiras de acesso para o ser humano.

Resultado: Uma página totalmente inacessível com ótimas notas em validadores automáticos.

IMPORTANTE: O objetivo desse estudo não é uma crítica às ferramentas de verificação automática. Elas são importantíssimas para esse processo e essa página de testes foi feita exclusivamente para “burlar” essas ferramentas. O que quero nesse artigo é mostrar que precisamos da intervenção humana no processo para realmente garantir a acessibilidade.

A seguir temos um breve resumo dos resultados. Após a análise e conclusão estão as tabelas com todas as verificações.

Verificação de 05 de junho de 2019

Primeira verificação feita. A maioria não dava avisos ou erros sobre o uso de atributos para “atrapalhar” o usuário, como content= “user-scalable=no”

Verificação de 04 de fevereiro de 2020

A partir desta verificação o validador de markup do W3C marca um aviso, relacionado ao atributo content= “user-scalable=no”. Existe um número muito baixo de erros, mesmo com o site cheio de problemas de acessibilidade.

Verificação de 15 de junho de 2021

Aqui parece que as ferramentas ficaram mais apuradas, como a detecção de erros de contraste pela sua opacidade e por detectar o uso indevido de atributos de WAI-ARIA.

Análise do resultado

Como a página foi feita para passar sem erros, os primeiros testes apontaram resultado melhor. Foram usados alguns atributos para impedir o redimensionamento de tela e para esconder conteúdo dos usuários de tecnologia assistiva (como aria-hidden=”true”).

Com o passar do tempo foi possível verificar que as ferramentas começaram a detectar esses atributos de aria-hidden=”true” em elementos que recebem foco por teclado, como links e campos de formulário (Lighthouse e axeDevTools). A ferramenta de verificação de markup do W3C marca o atributo content= “user-scalable=no” como um aviso.

Algumas ferramentas que analisam contraste começaram a suportar atributos de CSS como oppacity (usado para diminuir o contraste visual sem alterar as cores de fundo e texto). A ferramenta CheckMyColors não reportava nenhum erro nas verificações anteriores e hoje ela reporta erros.

Infelizmente muitas ferramentas desapareceram ou estavam fora do ar no último teste.

Conclusão

As ferramentas de verificação automática estão evoluindo e detectando problemas de acessibilidade que vão além do WCAG (como atributos de WAI-ARIA) mal posicionados e contraste com elementos com sua opacidade reduzida.

Porém esse estudo mostra que não podemos deixar para uma única ferramenta automática a responsabilidade de garantir a acessibilidade de um site ou aplicação Web. Usar mais de uma ferramenta de verificação permite comparar erros e identificar melhor as barreiras.

A acessibilidade envolve o acesso de pessoas, por isso a verificação manual continua importante para detectarmos barreiras no acesso de seres humanos e não de máquinas.

Tabelas com todos os resultados

Ferramentas verificadas em 15 de junho de 2021
Padrão Ferramenta de validação Data Erros Avisos/potenciais problemas Itens verificados
WCAG 2.0 HTML CodeSniffer 15/06/2021 0 7 x
WCAG 2.0 Access monitor 15/06/2021 0 4 88
WCAG 2.1 Color Contrast Accessibility Validator 15/06/2021 0 X 5
WCAG 2.1 Taw 15/06/2021 0 24 X
Outro Ases Web 15/06/2021 0 17 X
Outro Google Lighthouse 15/06/2021 4 10 X
WCAG 2.0 Wave 15/06/2021 0 13 X
WCAG 2.0 Check My Colors 15/06/2021 21 X X
Outro W3C Markup Validator 15/06/2021 0 1 X
Outro W3C CSS Validator 15/06/2021 0 0 X
Outro Web Accessibility 15/06/2021 2 X 266
WCAG 2.0 Functional Accessibility Evaluator 2.1
15/06/2021 5 1 X
WCAG 2.0 CynthiaSays 15/06/2021 6 X X
WCAG 2.1 Mauve ++ 15/06/2021 3 2 X
WCAG 2.0 axe DevTools 15/06/2021 43 7 X
Ferramentas verificadas em 4 de fevereiro de 2020
Padrão Ferramenta de validação Data Erros Avisos/potenciais problemas Itens verificados
WCAG 2.0 Examinator (fora do ar) 04/02/2020 0 X 88
WCAG 2.0 OAW Ecuador (com erro) 04/02/2020 0 8 88
WCAG 2.0 Html5 CodeSniffer 04/02/2020 0 0 x
WCAG 2.0 Access Monitor (Fora do ar no dia do teste) 04/02/2020 x x x
WCAG 2.0 AChecker (fora do ar) 04/02/2020 0 98 X
WCAG 2.1 Color Contrast Accessibility Validator 04/02/2020 0 X X
WCAG 2.1 Taw 04/02/2020 0 37 X
Outro Ases Web 04/02/2020 0 13 X
Outro Google Lighthouse 04/02/2020 0 11 X
WCAG 2.0 Wave 04/02/2020 0 13 X
WCAG 2.0 Check My Colors 04/02/2020 0 X X
Outro W3C Markup Validator 04/02/2020 0 1 X
Outro W3C CSS Validator 04/02/2020 0 0 X
WCAG 1.0 Hera (fora do ar) 04/02/2020 2 38 86
WCAG 2.0 Hearcolors (fora do ar) 04/02/2020 8 10 X
Outro Web Accessibility 04/02/2020 2 X X
WCAG 2.0 Functional Accessibility Evaluator 2.1
04/02/2020 5 1 X
WCAG 2.0 CynthiaSays 04/02/2020 6 X X
WCAG 2.1 Mauve ++ 04/02/2020 6 4 X
WCAG 2.0 axe DevTools 04/02/2020 3 38 X
Ferramentas verificadas em 5 de junho de 2019
Padrão Ferramenta de validação Data Erros Avisos/potenciais problemas Itens verificados
WCAG 2.0 Examinator (fora do ar) 05/06/2019 0 X 85
WCAG 2.0 OAW Ecuador (com erro) 05/06/2019 0 7 85
WCAG 2.0 HTML CodeSniffer 05/06/2019 0 0 25
WCAG 2.0 AccessMonitor 05/06/2019 0 10 85
WCAG 2.0 AChecker (fora do ar) 05/06/2019 0 87 X
WCAG 2.1 Color Contrast Accessibility Validator 05/06/2019 0 X X
WCAG 2.1 Taw 05/06/2019 0 33 X
Outro Ases Web 05/06/2019 0 13 X
Outro Google Lighthouse 05/06/2019 0 11 X
WCAG 2.0 Wave 05/06/2019 0 13 X
WCAG 2.0 Check My Colors 05/06/2019 0 X X
Outro W3C Markup Validator 05/06/2019 0 0 X
Outro W3C CSS Validator 05/06/2019 0 0 X
WCAG 1.0 Hera (fora do ar) 05/06/2019 2 38 86
WCAG 2.0 Hearcolors (Fora do ar) 05/06/2019 2 13 X
Outro Web Accessibility 05/06/2019 2 X X
WCAG 2.0 Functional Accessibility Evaluator 2.1
05/06/2019 5 1 X
WCAG 2.0 CynthiaSays 05/06/2019 6 X X
WCAG 2.1 Mauve ++ 05/06/2019 16 2 X
WCAG 2.0 axe DevTools 05/06/2019 42 X X