Saltar para o conteúdo

Testes de acessibilidade

Fonte: Wikiversidade

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

[editar | editar código-fonte]
  1. Procure nas extensões do seu navegador por "axe DevTool".
  2. Assim que a instalação for feita, verifique se a aba de desenvolvimento apertando F12.
  3. Na parte das abas, aparecerá uma nova funcionalidade chamada "axe DevTool".
  4. Para analisar alguma falha presente no site, aperte o botão "Scan all of my page".
  5. 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

[editar | editar código-fonte]

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
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.