Revisão de Acessibilidade de Frontend Fluig
Esta skill revisa a acessibilidade de markup/UI Fluig e emite achados por severidade; ela não duplica convenções — os arquivos de context/ são a fonte de verdade, referenciada abaixo. A skill não reescreve o código.
Objetivo
Revisar, com responsabilidade única, a acessibilidade do frontend Fluig — semântica, rótulos, teclado/foco, ARIA, texto alternativo e contraste — identificando barreiras alinhadas às WCAG e produzindo um relatório de achados classificados por severidade, cada um vinculado à regra correspondente do arquivo de contexto. Para aplicar as correções, use a skill fluig-improve-accessibility.
Quando Usar
- Antes de um merge, para uma revisão focada em acessibilidade de um widget, layout ou Custom Element.
- Quando o markup usa
div/span genéricos no lugar de elementos semânticos.
- Quando campos não têm rótulos associados ou botões só têm ícone, sem nome acessível.
- Quando a interface pode não ser navegável por teclado ou o contraste pode ser insuficiente.
Entradas Esperadas
| Entrada |
Descrição |
Obrigatória |
| Markup/componente alvo |
Trecho ou arquivo de UI a revisar (widget, layout .ftl, Custom Element) |
sim |
| Contexto de uso |
Onde a UI aparece e como é operada (ex.: modal, lista, formulário) |
não |
Contexto de Referência (Fonte de Verdade)
Leia antes de executar — não reproduza o conteúdo aqui:
- conventions.md — HTML semântico, convenções de markup e i18n (texto visível sempre via
${i18n.getTranslation('chave')}).
- style-guide.md — componentes acessíveis do Style Guide, tokens de cor/contraste via
var(--fs-color-*) e conjuntos de ícones.
Regras Aplicáveis (Resumo Executivo)
Somente o mínimo para orientar a revisão, alinhado às WCAG; o detalhe está no contexto. Cada achado deve citar a regra de origem.
- HTML semântico (
header, nav, main, button, label) em vez de div/span genéricos → ver conventions.md.
- Rótulos/nome acessível em campos e botões (
label/for, aria-label), com texto via i18n → ver conventions.md.
- Navegação por teclado e foco visível: ordem de tabulação lógica e foco gerenciado em modais.
- ARIA apenas quando necessário — semântica nativa tem prioridade sobre ARIA.
- Texto alternativo em imagens/ícones informativos; decorativos ocultos para a tecnologia assistiva (
aria-hidden).
- Contraste adequado via
var(--fs-color-*); sem hexadecimal fixo → ver style-guide.md.
- Estados comunicados de forma acessível (
aria-expanded, aria-selected, aria-checked).
- Reutilizar componentes acessíveis do Style Guide em vez de recriar comportamentos → ver
style-guide.md.
Escala de Severidade
Classifique cada achado em um destes níveis, considerando o impacto na operação por tecnologia assistiva:
| Severidade |
Critério |
Exemplos típicos |
| Crítico |
Bloqueia o uso por teclado ou leitor de tela |
Controle interativo sem nome acessível; funcionalidade só acessível por mouse; foco preso fora do modal |
| Alto |
Barreira relevante que dificulta muito a operação |
Campo de formulário sem rótulo associado; imagem informativa sem texto alternativo |
| Médio |
Problema que degrada a experiência sem bloquear |
Uso de div/span no lugar de elemento semântico; estado não comunicado via ARIA |
| Baixo |
Ajuste menor de consistência/acessibilidade |
Contraste no limite do aceitável; ícone decorativo sem aria-hidden |
Procedimento
- Identificar o tipo de componente e como ele é operado (modal, lista, formulário).
- Avaliar os eixos: semântica, rótulos/nome acessível, navegação por teclado/foco, ARIA, texto alternativo, contraste e estados.
- Para cada barreira, registrar um achado com localização, descrição, severidade e a regra de contexto correspondente (
conventions.md/style-guide.md, com a seção).
- Recomendar a correção objetiva, apontando a skill
fluig-improve-accessibility.
- Consolidar os achados ordenados do mais grave ao menos grave.
- Validar a revisão com o checklist abaixo antes de entregar.
Nota importante: a conformidade WCAG completa exige teste manual com tecnologias assistivas (leitores de tela, navegação só por teclado) e revisão por especialista. Esta skill auxilia a identificar barreiras, mas não garante conformidade total por si só.
Saída Esperada
Um relatório de revisão de acessibilidade contendo:
- Resumo com a contagem de achados por severidade e a avaliação geral.
- Achados agrupados por severidade (crítico → baixo); cada um com localização, descrição, severidade e a regra de contexto referenciada.
- Recomendações acionáveis por achado, indicando a skill
fluig-improve-accessibility.
A skill não altera o código — apenas diagnostica e recomenda.
Exemplo de Uso
Trecho revisado e achado correspondente.
<!-- Código revisado (trecho) -->
<button class="btn">
<span class="icon icon-trash"></span>
</button>
## Achados
### 🔴 Crítico
- **Nome acessível — linha 1:** botão só com ícone, sem nome acessível para leitor de tela.
- Regra: `conventions.md` › HTML semântico e i18n.
- Recomendação: adicionar `aria-label="${i18n.getTranslation('action.delete')}"` e `aria-hidden="true"` no ícone decorativo. Ver skill `fluig-improve-accessibility`.
Checklist de Validação
1---2name: fluig-review-accessibility3description: Revisa a acessibilidade de markup/UI de customizações Fluig (HTML semântico, rótulos, navegação por teclado, foco visível, ARIA, texto alternativo e contraste de cor) e produz achados classificados por severidade alinhados às WCAG, cada um referenciando a regra do arquivo de contexto. Use quando o desenvolvedor pedir uma revisão de acessibilidade de um trecho de markup ou componente antes de merge, sem reescrever o código.4---56# Revisão de Acessibilidade de Frontend Fluig78Esta skill revisa a acessibilidade de markup/UI Fluig e emite achados por severidade; ela **não duplica** convenções — os arquivos de `context/` são a fonte de verdade, referenciada abaixo. A skill **não reescreve** o código.910## Objetivo1112Revisar, com responsabilidade única, a **acessibilidade do frontend Fluig** — semântica, rótulos, teclado/foco, ARIA, texto alternativo e contraste — identificando barreiras alinhadas às WCAG e produzindo um **relatório de achados classificados por severidade**, cada um vinculado à regra correspondente do arquivo de contexto. Para aplicar as correções, use a skill `fluig-improve-accessibility`.1314## Quando Usar1516- Antes de um merge, para uma revisão focada em acessibilidade de um widget, layout ou Custom Element.17- Quando o markup usa `div`/`span` genéricos no lugar de elementos semânticos.18- Quando campos não têm rótulos associados ou botões só têm ícone, sem nome acessível.19- Quando a interface pode não ser navegável por teclado ou o contraste pode ser insuficiente.2021## Entradas Esperadas2223| Entrada | Descrição | Obrigatória |24|---------|-----------|-------------|25| Markup/componente alvo | Trecho ou arquivo de UI a revisar (widget, layout `.ftl`, Custom Element) | sim |26| Contexto de uso | Onde a UI aparece e como é operada (ex.: modal, lista, formulário) | não |2728## Contexto de Referência (Fonte de Verdade)2930Leia antes de executar — não reproduza o conteúdo aqui:3132- [conventions.md](../../context/conventions.md) — HTML semântico, convenções de markup e i18n (texto visível sempre via `${i18n.getTranslation('chave')}`).33- [style-guide.md](../../context/style-guide.md) — componentes acessíveis do Style Guide, tokens de cor/contraste via `var(--fs-color-*)` e conjuntos de ícones.3435## Regras Aplicáveis (Resumo Executivo)3637Somente o mínimo para orientar a revisão, alinhado às WCAG; o detalhe está no contexto. Cada achado deve citar a regra de origem.3839- **HTML semântico** (`header`, `nav`, `main`, `button`, `label`) em vez de `div`/`span` genéricos → ver `conventions.md`.40- **Rótulos/nome acessível** em campos e botões (`label`/`for`, `aria-label`), com texto via i18n → ver `conventions.md`.41- **Navegação por teclado e foco visível:** ordem de tabulação lógica e foco gerenciado em modais.42- **ARIA apenas quando necessário** — semântica nativa tem prioridade sobre ARIA.43- **Texto alternativo** em imagens/ícones informativos; decorativos ocultos para a tecnologia assistiva (`aria-hidden`).44- **Contraste adequado** via `var(--fs-color-*)`; sem hexadecimal fixo → ver `style-guide.md`.45- **Estados comunicados** de forma acessível (`aria-expanded`, `aria-selected`, `aria-checked`).46- **Reutilizar componentes acessíveis** do Style Guide em vez de recriar comportamentos → ver `style-guide.md`.4748## Escala de Severidade4950Classifique **cada achado** em um destes níveis, considerando o impacto na operação por tecnologia assistiva:5152| Severidade | Critério | Exemplos típicos |53|------------|----------|------------------|54| **Crítico** | Bloqueia o uso por teclado ou leitor de tela | Controle interativo sem nome acessível; funcionalidade só acessível por mouse; foco preso fora do modal |55| **Alto** | Barreira relevante que dificulta muito a operação | Campo de formulário sem rótulo associado; imagem informativa sem texto alternativo |56| **Médio** | Problema que degrada a experiência sem bloquear | Uso de `div`/`span` no lugar de elemento semântico; estado não comunicado via ARIA |57| **Baixo** | Ajuste menor de consistência/acessibilidade | Contraste no limite do aceitável; ícone decorativo sem `aria-hidden` |5859## Procedimento60611. Identificar o tipo de componente e como ele é operado (modal, lista, formulário).622. Avaliar os eixos: semântica, rótulos/nome acessível, navegação por teclado/foco, ARIA, texto alternativo, contraste e estados.633. Para cada barreira, registrar um achado com localização, descrição, **severidade** e a **regra de contexto** correspondente (`conventions.md`/`style-guide.md`, com a seção).644. Recomendar a correção objetiva, apontando a skill `fluig-improve-accessibility`.655. Consolidar os achados ordenados do mais grave ao menos grave.666. Validar a revisão com o checklist abaixo antes de entregar.6768> **Nota importante:** a conformidade WCAG completa exige **teste manual com tecnologias assistivas** (leitores de tela, navegação só por teclado) e **revisão por especialista**. Esta skill **auxilia** a identificar barreiras, mas **não garante** conformidade total por si só.6970## Saída Esperada7172Um **relatório de revisão de acessibilidade** contendo:7374- **Resumo** com a contagem de achados por severidade e a avaliação geral.75- **Achados** agrupados por severidade (crítico → baixo); cada um com localização, descrição, severidade e a **regra de contexto referenciada**.76- **Recomendações** acionáveis por achado, indicando a skill `fluig-improve-accessibility`.7778A skill **não altera** o código — apenas diagnostica e recomenda.7980## Exemplo de Uso8182Trecho revisado e achado correspondente.8384```html85<!-- Código revisado (trecho) -->86<button class="btn">87 <span class="icon icon-trash"></span>88</button>89```9091```markdown92## Achados9394### 🔴 Crítico95- **Nome acessível — linha 1:** botão só com ícone, sem nome acessível para leitor de tela.96 - Regra: `conventions.md` › HTML semântico e i18n.97 - Recomendação: adicionar `aria-label="${i18n.getTranslation('action.delete')}"` e `aria-hidden="true"` no ícone decorativo. Ver skill `fluig-improve-accessibility`.98```99100## Checklist de Validação101102- [ ] Os eixos foram percorridos (semântica, rótulos, teclado/foco, ARIA, texto alternativo, contraste, estados).103- [ ] Cada achado tem **severidade** atribuída conforme a escala (crítico/alto/médio/baixo).104- [ ] Cada achado **referencia a regra** do arquivo de contexto (`conventions.md`/`style-guide.md`, com a seção).105- [ ] O relatório está ordenado do mais grave ao menos grave e aponta a skill `fluig-improve-accessibility`.106- [ ] A nota sobre teste manual/WCAG foi considerada na avaliação geral.107- [ ] A revisão não alterou o código — apenas diagnosticou e recomendou.
totvs