Você quer tornar seu site do Angular acessível para todos? Este é o lugar certo.
Tornar o app acessível significa que todos os usuários, incluindo pessoas com necessidades especiais, poderão usá-lo e entender o conteúdo. De acordo com o Relatório Mundial da Saúde, mais de um bilhão de pessoas, cerca de 15% da população mundial, têm algum tipo de deficiência. Portanto, a acessibilidade é uma prioridade para qualquer projeto de desenvolvimento.
Nesta postagem, você vai aprender a adicionar as verificações de acessibilidade do codelyzer ao processo de compilação de um app do Angular. Essa abordagem permite detectar bugs de acessibilidade diretamente no editor de texto enquanto você programa o código.
Uso de codelyzer para detectar elementos inacessíveis
O codelyzer é uma ferramenta que fica na parte superior do TSLint e verifica se os projetos do Angular TypeScript seguem um conjunto de regras de lint. Por padrão, os projetos configurados com a interface de linha de comando (CLI) do Angular incluem o codelyzer.
O codelyzer tem mais de 50 regras para verificar se um aplicativo do Angular segue as práticas recomendadas. Dessas, existem cerca de 10 regras para a aplicação de critérios de acessibilidade. Para saber mais sobre as várias verificações de acessibilidade oferecidas pelo codificador e as justificativas delas, consulte o artigo Novas regras de acessibilidade no Codelyzer.
Atualmente, todas as regras de acessibilidade são experimentais e estão desativadas por padrão. É possível ativá-los adicionando-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 conhecidos. Para usá-lo com o VSCode, instale o plug-in do TSLint. No WebStorm, o TSLint é ativado por padrão. Para outros editores, consulte o README (em inglês) do TSLint.
Com as verificações de acessibilidade do Codelyzer configuradas, você recebe um pop-up que mostra erros de acessibilidade em arquivos TypeScript ou modelos in-line à medida que você programa o código:
Para executar a inspeção em todo o projeto, incluindo modelos externos, use o comando ng lint:
Complementando o codificador
O Lighthouse é outra ferramenta usada para aplicar práticas de acessibilidade no aplicativo Angular. A principal diferença entre o Codelyzer e o Lighthouse é o momento em que as verificações são realizadas. O Codelyzer analisa estaticamente o aplicativo no momento do desenvolvimento, sem executá-lo. Isso significa que, durante o desenvolvimento, você pode receber feedback direto no seu editor de texto ou no terminal. Em contrapartida, o Lighthouse realmente executa seu aplicativo e realiza diversas verificações usando análises dinâmicas.
Ambas as ferramentas podem ser partes úteis do seu fluxo de desenvolvimento. O Lighthouse tem uma cobertura melhor devido às verificações realizadas. Já o Codelyzer permite uma iteração mais rápida com feedback constante no editor de texto.
Como aplicar verificações de acessibilidade na integração contínua
A introdução de verificações de acessibilidade estáticas na sua integração contínua (CI) pode ser uma ótima melhoria no fluxo de desenvolvimento. Com o codelyzer, é possível aplicar facilmente 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 envio).
Dessa forma, mesmo antes de passar para a revisão do código, a CI pode informar se há violações de acessibilidade.
Conclusão
Para melhorar a acessibilidade do seu aplicativo Angular:
- Ativa as regras experimentais de acessibilidade no codelyzer.
- Executar o lint de acessibilidade em todo o projeto usando a CLI do Angular.
- Correção de todos os problemas de acessibilidade relatados pelo codelyzer.
- Considere usar o Lighthouse para auditorias de acessibilidade no ambiente de execução.