Quer tornar seu site do 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 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ê aprenderá a adicionar as verificações de acessibilidade do codelyzer ao processo de build de um app do Angular. Essa abordagem permite detectar bugs de acessibilidade diretamente no editor de texto durante a programação.
Usar o codelyzer para detectar elementos inacessíveis
O codelyzer é uma ferramenta que fica por cima do TSLint e verifica se os projetos do Angular TypeScript seguem um conjunto de regras de inspeção. Os projetos configurados com a interface de linha de comando (CLI) 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. Dessas, há cerca de 10 regras para a aplicação de critérios de acessibilidade. Para saber mais sobre as diversas verificações de acessibilidade fornecidas pelo codelyzer e as justificativas delas, consulte o artigo Novas regras de acessibilidade no Codelyzer.
No momento, todas as regras de acessibilidade são experimentais e ficam desativadas por padrão. Para ativá-los, 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 os mais conhecidos editores de texto e ambientes de desenvolvimento integrado. 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, um pop-up mostra erros de acessibilidade em arquivos TypeScript ou modelos in-line enquanto você programa:
Para executar a inspeção em todo o projeto, incluindo modelos externos, use o comando ng lint:
Suplementar codelyzer
O Lighthouse é outra ferramenta que pode ser 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 editor de texto ou no terminal. Por outro lado, o Lighthouse executa seu aplicativo e faz diversas verificações usando a análise dinâmica.
Ambas as ferramentas podem ser partes úteis do seu fluxo de desenvolvimento. O Lighthouse tem uma cobertura melhor com as verificações que realiza. Já o codelyzer permite uma iteração mais rápida recebendo feedback constante no seu editor de texto.
Como aplicar verificações de acessibilidade na sua integração contínua
Introduzir verificações de acessibilidade estáticas na integração contínua (CI) pode ser uma ótima melhoria para seu fluxo de desenvolvimento. Com o codificador, você pode aplicar facilmente certas 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 prosseguir para a revisão de código, a CI pode informar se há alguma violação de acessibilidade.
Conclusão
Para melhorar a acessibilidade do app do Angular:
- Ativar as regras de acessibilidade experimentais no codelyzer.
- Fazer a inspeção de acessibilidade em todo o projeto usando a CLI 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.