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
- Página verificada em 21 ferramentas
- Passou sem nenhum erro em 14 deles
- Somente 2 deles mostraram mais de 10 erros
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
- Página verificada em 20 ferramentas
- Passou sem nenhum erro em 13 deles
- Nenhuma delas com mais de 8 erros
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
- Página verificada em 14 ferramentas
- Passou sem nenhum erro em 8 delas
- Duas delas apontou mais de 20 erros
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
| 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 |
| 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 |
| 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 |
