A acessibilidade é uma das pautas mais importantes no desenvolvimento de software atualmente.
Infelizmente, isso não costuma ser priorizado pelas equipes de planejamento e teste de software e, por consequência, acaba não sendo considerado pelo time de desenvolvimento.
Diante dessa dificuldade, podemos adotar diversas ferramentas cotidianas que auxiliem diretamente no desenvolvimento de software, permitindo que os desenvolvedores validem seus códigos em tempo real e minimizem problemas que impactam usuários de tecnologias assistivas ao interagirem com páginas web.
Ambiente de desenvolvimento
No contexto das ferramentas de desenvolvimento front-end, o Visual Studio Code (VSCode) se destaca como a principal ferramenta para codificação.
Um dos grandes benefícios de usar o VSCode é a ampla disponibilidade de plugins, que auxiliam e aceleram significativamente o processo de desenvolvimento.
Uma dessas extensões é o Axe Accessibility Linter: https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter
Essa ferramenta é extremamente útil, pois aponta erros e avisos de acessibilidade durante o desenvolvimento de código, o que melhora significativamente o fluxo de trabalho!
Bônus
Apesar do uso do Axe Linter, muitos erros que não impedem a compilação (ou transpilação) de código tendem a ser ignorados durante o desenvolvimento.
Isso ocorre, muitas vezes, devido à forma como a ferramenta é utilizada. No VSCode, é necessário abrir a aba de problemas ou manter o cursor sobre um erro para visualizá-lo.
Para isso recomendo a extensão error lens:
https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens
Essa extensão é muito útil, pois exibe os erros diretamente na linha de código, permitindo que sejam identificados de forma mais rápida e eficiente.
Validação de Código
É raro encontrar um desenvolvedor que nunca tenha utilizado algum validador de código. Além de suas inúmeras vantagens, é fundamental para garantir qualidade e padronização entre membros de um time ou entre diferentes equipes.
Para essas ferramentas existem alguns plugins que trazem esses padrões de a11y para validação de código.
A11y Eslint Plugin
Uma dessas ferramentas é o eslint-plugin-jsx-a11y:
https://www.npmjs.com/package/eslint-plugin-jsx-a11y
A página principal contém mais explicações de configuração: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#readme
Na prática
Faça a instalação:
yarn add eslint-plugin-jsx-a11y --dev
Depois você pode estender as configurações no seu eslint:
{
"extends": ["plugin:jsx-a11y/recommended"]
}
Caso você precise de cenários específicos, pode consultar as regras disponíveis para configuração:
https://github.com/jsx-eslint/eslint-plugin-jsx-a11y?tab=readme-ov-file#supported-rules
StyleLint A11y
Outra ferramenta do mesmo gênero é o style-lint-a11y:
https://www.npmjs.com/package/stylelint-a11y
A página principal disponibiliza mais informações de configuração: https://github.com/YozhikM/stylelint-a11y#readme
Na prática
Faça a instalação:
yarn add -D stylelint stylelint-a11y
Adicione a configuração do .stylelintrc:
{
"plugins": ["stylelint-a11y"],
"rules": {
"a11y/media-prefers-reduced-motion": true,
"a11y/content-property-no-static-value": true
}
}
Caso você precise de cenários específicos, pode consultar as regras disponíveis para configuração:
https://github.com/YozhikM/stylelint-a11y?tab=readme-ov-file#rules
Pronto! Com essas ferramentas você já terá as validações funcionando no seu código.
Só isso? SIM!!!
Este foi o primeiro artigo dessa sequência, no próximo veremos outras ferramentas que podem ser acopladas ao contexto de desenvolvimento de software, incluindo também ferramentas de validação visual.
Top comments (0)