Sua primeira verificação de acessibilidade com Cypress

Acessibilidade, muitas vezes abreviada como a11y (porque há onze caracteres entre o "a" e o "y" na palavra em inglês "accessibility"), trata de garantir que um produto possa ser usado por pessoas com uma ampla gama de deficiências: visuais, auditivas, motoras, de fala, cognitivas e neurológicas.

Ela importa do ponto de vista ético, porque excluir pessoas de um serviço é um dano real. Também importa comercial e legalmente: a acessibilidade amplia seu público e ajuda no cumprimento de regulações como as Diretrizes de Acessibilidade para Conteúdo Web (WCAG), o Americans with Disabilities Act (ADA) e o European Accessibility Act (EAA).

Quão comuns são as falhas de acessibilidade?

Muito comuns. O estudo WebAIM Million, que analisa automaticamente as home pages do 1 milhão de sites mais acessados todos os anos, encontra consistentemente que cerca de 98% das home pages têm falhas de acessibilidade detectáveis. E seis tipos de falhas respondem pela grande maioria delas, as mesmas seis em torno das quais este curso foi construído.

O que testes automatizados conseguem (e não conseguem) detectar

Vamos detectar essas falhas com o axe-core, um motor de acessibilidade que inspeciona uma página renderizada e reporta violações de regras. Neste curso o acionamos a partir do Cypress, via o plugin cypress-axe.

👨🏻‍🏫 As verificações automatizadas são uma rede de segurança, não a história completa. Segundo a documentação do axe-core, em média é possível encontrar cerca de 57% das falhas de WCAG automaticamente. Ele também sinaliza alguns elementos como "incompletos", onde um humano precisa revisar. Testes com leitores de tela, navegação por teclado e o julgamento de pessoas reais continuam importantes. A automação é um ótimo ponto de partida, não um substituto.

Sua primeira verificação com Cypress e cypress-axe

Com o cypress-axe, uma verificação de acessibilidade tem três passos: visitar a página, injetar o motor do axe e então rodar a verificação.

Visão geral dos comandos 📖

describe

Agrupa casos de teste relacionados em uma suíte de testes.

Sintaxe:

describe(name, callbackFn)

Exemplo:

describe('Acessibilidade', () => {
  // os casos de teste vão aqui.
})

beforeEach

Roda o callback informado antes de cada teste (bloco it) dentro do mesmo describe. Use-o para configurações compartilhadas, como visitar a página, para que cada teste comece do mesmo estado limpo e previsível.

Sintaxe:

beforeEach(callbackFn)

Exemplo:

beforeEach(() => {
  cy.visit('/')
})

it

Define um único caso de teste dentro de uma suíte de testes.

Sintaxe:

it(name, callbackFn)

Exemplo:

it('não reporta violações', () => {
  // implementação do teste aqui.
})

cy.injectAxe()

Injeta o motor axe-core na página sob teste. Chame-o após visitar a página e antes de qualquer verificação de acessibilidade.

Sintaxe:

cy.injectAxe()

Exemplo:

cy.visit("/")
cy.injectAxe()

cy.checkA11y()

Roda uma análise de acessibilidade na página (ou em parte dela) e falha o teste se alguma violação for encontrada.

Sintaxe:

cy.checkA11y(context, options)

Exemplo:

// Verifica a página inteira.
cy.checkA11y()

// Verifica apenas uma região da página.
cy.checkA11y(".page")

👨🏻‍🏫 Ambos os argumentos são opcionais. Sem argumentos, cy.checkA11y() verifica a página inteira. Passar um seletor como primeiro argumento restringe a verificação àquela região, o que é útil quando você quer focar em um componente.

Conteúdo sugerido 📚

• cypress-axe no npm
• Descrições das regras do axe-core
• O relatório WebAIM Million

Exercício 🎯

Com o servidor local rodando, crie o spec cypress/e2e/a11y.cy.js e escreva um primeiro teste que visita a aplicação Banco Simulado no seu estado padrão (modo acessível desligado) e roda cy.checkA11y().

Rode o teste e leia a saída. Como o modo acessível está desligado, a verificação deve falhar e listar várias violações. Não corrija nada ainda, o objetivo desta lição é simplesmente ver as seis falhas reportadas pela primeira vez.

👨🏻‍🏫 Com o DevTools aberto (aba Console) no navegador do Cypress App, clique em uma das entradas de erro individuais no log de comandos (por exemplo, a11y error! html-has-lang on 1 Node) para imprimir seus detalhes no console:

Description:  Ensure every HTML document has a lang attribute
Help:         <html> element must have a lang attribute
Helpurl:      https://dequeuniversity.com/rules/axe/4.13/html-has-lang?application=axeAPI

Se o Cypress App não estiver aberto, use o comando npx cypress open para abri-lo.

Mostre ao mundo o que você aprendeu 🌎

Para mostrar à sua rede profissional o que você aprendeu nesta lição, publique o seguinte no LinkedIn.

Comecei o curso "As 6 Falhas de Acessibilidade Mais Comuns" com @Bruno Pulis na escola @Talking About Testing, onde rodei minha primeira verificação automatizada de acessibilidade com cypress-axe e axe-core. #TalkingAboutTesting #TATSchool #A11yTesting #Cypress

👨🏻‍🏫 Lembre-se de me marcar na sua publicação. Aqui está meu perfil no LinkedIn.