Automatizando testes de acessibilidade em Angular
Sabemos que os testes manuais, feitos por pessoas com deficiência são os testes mais eficientes. No entanto, podemos prevenir que erros básicos de acessibilidade aconteçam utilizando ferramentas que automatizam este processo.
Essas coberturas feitas para prevenir erros básicos, nos ajudam para que possamos focar em problemas de acessibilidade mais complexos.
Para isso, quero apresentar a vocês o axe-core que é uma biblioteca que já contém alguns testes automatizados para facilitar o nosso desenvolvimento de aplicações acessíveis.
Axe core
O axe-core executa uma série de regras de acessibilidade que a sua aplicação deve cumprir, de acordo com as diretrizes internacionais. Por exemplo:
- Botões devem conter um texto ou aria-label.
- Aria-hidden = “true” não deve estar presente no documento <body>.
- Os elementos do formulário <input> devem ter um rótulo visível.
Ele determina automaticamente quais regras executar com base no contexto.
A versão open source dele possui várias funcionalidades e customizações que já podem nos ajudar bastante!
Ele suporta os mais utilizados e modernos navegadores do mercado:
- Microsoft Edge v40+
- Google Chrome v42+
- Mozilla Firefox v38+
- Apple Safari v7+
- Internet Explorer v9, 10, 11
Como utilizá-lo no Angular
1 - Instale o pacote axe-core no seu projeto.
2 - Dentro do seu arquivo .spec importe o “axe-core”
3 - Agora, basta colocá-lo dentro da especificação do seu teste.
Como no Angular estamos utilizando o jasmine, então vamos colocá-lo dentro do nosso “it”:
E para que você veja o resultado da especificação deste teste, basta executar os seus testes normalmente:
Se você obter sucesso com relação às regras, o seu teste não irá quebrar.
No entanto, caso sua aplicação quebre alguma regra de acessibilidade, você verá algo parecido com a imagem abaixo, onde ele descreve a regra que foi violada, nível de impacto, entre outros tópicos, para te ajudar a resolver o problema.
O axe-core ainda nos possibilita fazer algumas customizações, como:
- Indicar em qual contexto esses testes sejam executados.
- Quais regras eu quero executar.
- E também nos possibilita criar as nossas próprias regras de acessibilidade.
E é apenas isso? Sim!
E agora eu consigo garantir que a minha aplicação é acessível? Não!
Ele te ajudará bastante, no entanto não se torna suficiente para garantir a acessibilidade da sua aplicação.
Testes automatizados + Testes manuais ainda são a melhor opção!
Algumas referências que podem te ajudar:
Testes de acessibilidade com Angular (inglês)
Testes de acessibilidade com React
