#1 Desenvolvimento ágil considerando acessibilidade: Não precisa ser um trade-off

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.