Acessibilidade com React/styled-components

[doglasbatista]

Olá...

Estou no começo do desenvolvimento de uma aplicação utilizando React com styled-components e gostaria de recomendações sobre cuidados, ferramentas e qualquer coisa que possa me ajudar e tomar cuidado com as questões de acessibilidade dessa aplicação

[ninetails]

Opa @doglasbatista , primeiramente parabéns por já pensar em acessibilidade antes mesmo de botar a mão na massa.

Opinando sobre a stack, creio que o styled-components não influirá em relação ao tema e sobre o React, não terá problemas pois a biblioteca por padrão repassa as props como atributos pro frontend.

Para auxiliar no desenvolvimento, cito 2 utilizações do axe:

• jest-axe para validar acessibilidade durante os testes
• react-axe para ver erros de acessibilidade no console

Também existem outras formas de testar, o axe em si ele vai checar partes do teu código e não o código inteiro da página. E também não lembro se o axe valida cores (questões como contrastes e tipos de daltonismo). Logo sempre é bom se preocupar em validar o HTML da página como por exemplo utilizando o validador da w3c para checar semântica. Já que citou o styled-components, vale também ressaltar que existe um plugin pra validar CSS utilizando o stylelint caso também se preocupe com semântica no CSS.

Já sobre checagem que falei anteriormente como cores, contraste e daltonismo, se preocupando com WAI-ARIA, microformats... só googlando mesmo para achar outras ferramentas e bookmarklets.

[doglasbatista]

@ninetails Cara... Valeuzão pelas dicas, vou dar uma olhada com calma nos link....

Sobre o styled-components... Vacilo meu de não ter dado mais contexto do pq dele na pergunta.

A gente ta usando eslint no projeto, e ele tem esse plugin para acessibilidade, o eslint-plugin-jsx-a11y. Porém ele não funciona muito bem com styled-components. Tanto que o pessoal acabou criando o eslint-plugin-styled-components-a11y. Mas ele ainda está no começo

[ninetails]

Opa @doglasbatista não manjava que o jsx-a11y tinha problemas com styled-components... Sou daqueles que considera "quanto mais tooling, melhor" rs. Porém creio que deixar a checagem após a renderização possa dar uma maior segurança, já que nisso o axe ajuda bastante.

No que digo em relação a validação pós-output é pq devido ao React refletir props pro frontend, é que é sempre bom ver se não está indo props pro HTML. Não em relação a acessibilidade mas relacionado a semântica, utilizando styled-components pode ter que fazer coisas do tipo:

const StyledDiv = styled(({propIndesejadaUsadaNoSC, ...props}) => <div {...props} />)`
  regra: ${({propIndesejadaUsadaNoSC}) => `atributo css que usa ${propIndesejadaUsadaNoSC}`};
`

Se usar direto o styled.div, poderia ter um output do tipo <div propIndesejadaUsadaNoSC="algum valor">...</div>

update: Ou melhor ainda, quando eu tinha visto sobre o assunto ainda não tinha o shouldForwardProp pro SC, só pro emotion... muito menos transient props 😍.

[drianoaz]

Estava pesquisando sobre acessibilidade e encontrei uma ferramenta que achei sensacional. O Storybook possui um Addon chamado a11y. Ele basicamente roda os mesmos testes de acessibilidade do Google Lighthouse dentro do Storybook.

O Storybook é uma ferramenta que já faz parte do nosso workflow. Em todos esses anos, eu simplesmente não sabia que isso existia. Saber dessa existência, mudou a forma vou trabalhar de hoje em diante.

É incrível como isso está na página home do storybook e mesmo assim todas as equipes que trabalhei sempre ignoraram essa ferramenta. (Vai ver precisamos fomentar o uso dela)

With a11y you can test compliance of your stories with web accessibility standards.

The “A11y Addon” for Storybook runs on top of the Axe Accessibility Engine developed by Deque Systems. This is the same engine used by Google Lighthouse to test and score entire web pages.

Como isso funciona na prática?

Quando criamos um story, podemos importar esse addon e ao fazer isso, uma nova aba será inserida e nela será exibida algumas informações bem interessantes:

Eu encontrei um artigo bem bacana falando um pouco sobre esse addon

Beleza, mas isso roda no storybook e não é um teste automatizado

Sem muito esforço, é possível se criar uma cultura de code-review que verifique se novos componentes estão passando nesse teste, mesmo que manualmente.

Pela natureza do storybook, é possível adicionar uma etapa no CI para compilar e publicar o storybook em uma URL temporária para que as pessoas que vão fazer o code-review não tenham que rodar na máquina delas.

Qual é o ganho real disso?

Já pensou que louco ter um playground onde qualquer membro da sua equipe consegue consultar todos os componentes existentes na sua aplicação e no mesmo lugar saber se eles são acessíveis? Isso pode trazer melhorias valiosas para qualquer produto.