Testes de acessibilidade são um tipo de teste que buscam falhas no projeto que atrapalham a usabilidade do sistema afetando diretamente na inclusão de pessoas com deficiência. Muitas vezes, desenvolvedores não pensam muito na acessibilidade de seus projetos, o que pode dificultar na usabilidade para parte de um público, um exemplo é a utilização de cores com pouco contraste entre o fundo da pagina e a fonte, atrapalhando na leitura das informações.
Tais testes podem ser resolvidos com a utilização de algumas ferramentas como axe, durante esse arquivo, será ensinado a instalação do axe e como é integrado a projetos StoryBook.
Procure nas extensões do seu navegador por "axe DevTool".
Assim que a instalação for feita, verifique se a aba de desenvolvimento apertando F12.
Na parte das abas, aparecerá uma nova funcionalidade chamada "axe DevTool".
Para analisar alguma falha presente no site, aperte o botão "Scan all of my page".
Caso tenha algum problema, aparecerá no log detalhes sobre o problema.
A função do axe fica mais visível nessa parte pois além de mostrar possíveis falhas, ainda orienta como resolver esses problemas para passar nos testes.
Primeiramente, para criar um projeto StoryBook será necessário a instalação do Node.js na máquina e o addon a11y com o seguinte comando no terminal:
npm install @storybook/addon-a11y --dev
Crie um projeto usando React com o seguinte comando:
npx create-next-app@latest
Entre na pasta do projeto que acabou de criar. Dentro da pasta com o seguinte comando inicializamos o StoryBook.
npx storybook@latest init
Quando iniciado, o StoryBook irá usar a porta 6006, podendo ser acessado por "localhost:6006". Caso queira executar o StoryBook novamente rode o comando:
npm run storybook
Crie uma componente na pasta /src/components/ <nome do arquivo>.jsx e dentro desse arquivo implementaremos as seguintes linhas:
importReactfrom'react';importimgfrom"../../public/color-blind-test.webp"//O componente que estamos usando de exemplo é uma imagem que está no computadorexportdefaultfunction<Nomedacomponente>(){return(<div><imgsrc={img}alt="Color Blind Test"/></div>);};
Crie um story em /src/components/<nome do arquivo>.stories.jsx
import<Nomedacomponente>from'./<Nome da componente>';exportdefault{component:<Nomedacomponente>,title:'Task',tags:['autodocs'],};exportconstDefault={args:{task:{id:'1',title:'Test Task',state:'TASK_INBOX',},},};
Assim que executado o comando aparecerá uma interface gráfica do site. Outra possibilidade de visualizar seria pesquisar por "localhost:6006". Ao acessar a pagina que está a componente configurada (no nosso caso uma imagem), terá um "menu" lateral com uma aba escrita "Default".
Exemplo de projeto usando axe e StoryBook
Ao clicar aparecerá um outro menu mostrando os resultados dos testes de acessibilidade sobre o componente, no quadrado em vermelho.Caso o componente não passe nos testes, os erros apareceram na aba "Violations", nela podemos ver em quais testes falharam e formas de arrumar
É possível visualizar os componentes outras maneiras como com visão borrada ou como pessoas daltônicas veriam.