Quer tornar seu site Angular acessível para todos? Este é o lugar certo!
Tornar seu app acessível significa que todos os usuários, incluindo aqueles com necessidades especiais, podem usá-lo e entender o conteúdo. De acordo com o Relatório Mundial de Saúde, mais de um bilhão de pessoas (cerca de 15% da população mundial) têm algum tipo de deficiência. Por isso, a acessibilidade é uma prioridade em qualquer projeto de desenvolvimento.
Nesta postagem, você vai aprender a adicionar as verificações de acessibilidade do codelyzer ao processo de build de um app Angular. Essa abordagem permite detectar bugs de acessibilidade diretamente no editor de texto enquanto você programa.
Como usar o codelyzer para detectar elementos inacessíveis
O codelyzer é uma ferramenta que fica em cima do TSLint e verifica se os projetos do Angular TypeScript seguem um conjunto de regras de linting. Os projetos configurados com a interface de linha de comando (CLI) do Angular incluem o codelyzer por padrão.
O codelyzer tem mais de 50 regras para verificar se um aplicativo Angular segue as práticas recomendadas. Entre elas, há cerca de 10 regras para aplicar critérios de acessibilidade. Para saber mais sobre as várias verificações de acessibilidade fornecidas pelo codelyzer e os motivos delas, consulte o artigo Novas regras de acessibilidade no Codelyzer (em inglês).
No momento, todas as regras de acessibilidade são experimentais e desativadas por padrão. Para ativar, adicione-os ao arquivo de configuração do TSLint (tslint.json):
{
"rulesDirectory": [
"codelyzer"
],
"rules": {
...,
"template-accessibility-alt-text": true,
"template-accessibility-elements-content": true,
"template-accessibility-label-for": true,
"template-accessibility-tabindex-no-positive": true,
"template-accessibility-table-scope": true,
"template-accessibility-valid-aria": true,
"template-click-events-have-key-events": true,
"template-mouse-events-have-key-events": true,
"template-no-autofocus": true,
"template-no-distracting-elements": true
}
}
O TSLint funciona com todos os editores de texto e ambientes de desenvolvimento integrado mais usados. Para usar com o VSCode, instale o plug-in TSLint. No WebStorm, o TSLint é ativado por padrão. Para outros editores, consulte o README do TSLint.
Com as verificações de acessibilidade do codelyzer configuradas, um pop-up mostra erros de acessibilidade em arquivos TypeScript ou modelos inline enquanto você programa:
Para realizar a verificação de estilo em todo o projeto (incluindo modelos externos), use o comando ng lint:
Complementando o codelyzer
O Lighthouse é outra ferramenta que você pode usar para aplicar práticas de acessibilidade no seu aplicativo Angular. A principal diferença entre o codelyzer e o Lighthouse é quando as verificações são realizadas. O Codelyzer analisa estaticamente o aplicativo durante o desenvolvimento, sem executá-lo. Isso significa que, durante o desenvolvimento, você pode receber feedback direto no editor de texto ou no terminal. Por outro lado, o Lighthouse executa seu aplicativo e realiza vários testes usando a análise dinâmica.
As duas ferramentas podem ser partes úteis do seu fluxo de desenvolvimento. O Lighthouse tem uma cobertura melhor devido às verificações que realiza, enquanto o codelyzer permite iterar mais rápido recebendo feedback constante no editor de texto.
Como aplicar verificações de acessibilidade na integração contínua
A introdução de verificações estáticas de acessibilidade na integração contínua (CI) pode ser uma ótima melhoria no seu fluxo de desenvolvimento. Com o codelyzer, é fácil aplicar determinadas regras de acessibilidade ou outras práticas executando ng lint em cada modificação de código (por exemplo, para cada nova solicitação de pull).
Assim, mesmo antes de prosseguir para a revisão de código, a CI pode informar se há violações de acessibilidade.
Conclusão
Para melhorar a acessibilidade do seu app Angular:
- Ative as regras experimentais de acessibilidade no codelyzer.
- Realize a lintagem de acessibilidade em todo o projeto usando a CLI do Angular.
- Corrija todos os problemas de acessibilidade informados pelo codelyzer.
- Considere usar o Lighthouse para auditorias de acessibilidade no tempo de execução.