Testes de acessibilidade

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.

Instalando o Axe

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.

Criando um projeto StoryBook

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:

import React from 'react';
import img from "../../public/color-blind-test.webp" //O componente que estamos usando de exemplo é uma imagem que está no computador

export default function <Nome da componente>() {
    return (
        <div>
            <img src={img} alt="Color Blind Test" />
        </div>
    );
};

Crie um story em /src/components/<nome do arquivo>.stories.jsx

import <Nome da componente> from './<Nome da componente>';

export default  {
    component: <Nome da componente>,
    title: 'Task',
    tags: ['autodocs'],
};

export const Default = {
    args: {
        task:{
            id: '1',
            title: 'Test Task',
            state: 'TASK_INBOX',
        },
    },
};

Depois configure o arquivo .storybook/main.js

const config = {
    ...
    stories: [ ... ,
        "../scr//components/**/*.stories.@(js|jsx)"],
    ...
}

Rode o seguinte comando novamente:

npm run storybook

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.