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
[editar | editar código-fonte]- 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
[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".
- 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.