Base de trabalho
HTML com conteúdo editorial e blocos de destaque
A estrutura mistura leitura, navegação e interação para simular decisões comuns em interfaces reais.
Kit de avaliação para o TCC
Uma experiência realista para revisar acessibilidade em HTML e CSS
Uma base com muitos pontos para comparar com a extensão
Esta base foi pensada para que o participante use a extensão, encontre problemas e aplique correções em um fluxo semelhante ao de um projeto real.
- 10 desenvolvedores convidados
- HTML + CSS foco na base de código
- SUS aplicado ao final
Contexto do estudo
Por que este kit existe
O objetivo é avaliar a usabilidade percebida da ferramenta ao apoiar a identificação e correção de problemas de acessibilidade. A página abaixo simula uma interface de produto com navegação, destaques, cards e conteúdo de apoio.
Revisão guiada
Fluxo para testar leitura, foco e interação por teclado
Os blocos foram organizados para gerar situações comuns de revisão de acessibilidade em um projeto front-end.
Depoimentos
Percepção de quem revisou a interface
Produto
Marina, coordenadora de produto
A revisão ficou mais rápida quando consegui comparar a leitura manual com os achados da ferramenta.
Ver observação completa
Front-end
João, desenvolvedor sênior
A ferramenta ajudou a enxergar erros que eu já conhecia, mas estava deixando passar.
QA
Camila, analista de testes
O relatório deixou mais claro o que precisava ser corrigido primeiro.
Tarefas
O que o participante deve fazer
-
01
Fazer uma leitura manual da página, da estilização e do código.
Anote os problemas de acessibilidade que você conseguir identificar sem usar a extensão.
-
02
Abrir a extensão e comparar os achados.
Use a barra lateral e, se necessário, o relatório exportado para confrontar com a sua lista inicial.
-
03
Corrigir os erros com apoio do hover.
Use o feedback do hover, a barra lateral e o relatório exportado para ir entendendo cada achado.
-
04
Fazer uma revisão final.
Veja se não ficou nenhum item na tela e anote o que a ferramenta agilizou ou esclareceu.
Dúvidas comuns
Pontos para orientar a execução
Como devo começar a usar a extensão neste kit?
Abra o arquivo HTML no VS Code, habilite a extensão e siga os avisos apresentados para corrigir o código.
Posso reorganizar a estrutura visual da página?
Sim, desde que a adaptação preserve a leitura, a navegação por teclado e a semântica da marcação.
O que devo observar ao final da atividade?
Além de corrigir os problemas apontados, observe como a ferramenta ajuda a entender os erros e o que ainda gera dúvida.
Encerramento
Finalize a revisão e siga para o questionário
Depois de concluir as tarefas, responda ao questionário do estudo e, em seguida, ao formulário SUS fornecido separadamente.