Melhoria de Acessibilidade de Frontend Fluig
Esta skill melhora a acessibilidade de markup/UI Fluig; ela não duplica convenções — os arquivos de context/ são a fonte de verdade, referenciada abaixo.
Objetivo
Melhorar, com responsabilidade única, a acessibilidade do frontend Fluig — semântica, rótulos, teclado/foco, ARIA, texto alternativo e contraste — aplicando boas práticas públicas alinhadas às WCAG, sem alterar o comportamento observável, a i18n nem a compatibilidade com a plataforma.
Quando Usar
- Quando um markup usa
div/span genéricos no lugar de elementos semânticos.
- Quando campos de formulário não têm rótulos associados ou botões só têm ícone, sem nome acessível.
- Quando a interface não é navegável por teclado ou o foco não é visível/gerenciado (ex.: modais).
- Quando há imagens/ícones informativos sem texto alternativo ou cores com contraste insuficiente.
Entradas Esperadas
| Entrada |
Descrição |
Obrigatória |
| Markup/componente alvo |
Trecho ou arquivo de UI a tornar acessível (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 melhoria; o detalhe está no contexto. Boas práticas públicas, genéricas e alinhadas às WCAG:
- HTML semântico (
header, nav, main, button, label) em vez de div/span genéricos → ver conventions.md.
- Rótulos associados a campos (
label/for, ou aria-label quando não há rótulo visível), 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/diálogos.
- Atributos ARIA apenas quando necessário (roles e
aria-*) — semântica nativa tem prioridade sobre ARIA.
- Texto alternativo em imagens/ícones informativos; ícones puramente decorativos ficam ocultos para a tecnologia assistiva.
- Contraste de cor adequado usando as variáveis do Style Guide (
var(--fs-color-*)) — sem hexadecimal fixo → ver style-guide.md.
- Estados comunicados de forma acessível (ex.:
aria-expanded, aria-selected, aria-checked).
- Reutilizar componentes acessíveis do Style Guide em vez de recriar comportamentos → ver
style-guide.md.
Procedimento
- Avaliar o markup e identificar as barreiras de acessibilidade (semântica ausente, campos sem rótulo, falta de navegação por teclado/foco, ícones sem nome, contraste insuficiente).
- Aplicar HTML semântico e corrigir a estrutura antes de recorrer a ARIA.
- Associar rótulos/nomes acessíveis aos controles e garantir navegação por teclado e foco visível (foco gerenciado em modais).
- Adicionar ARIA e texto alternativo apenas onde a semântica nativa não basta; ajustar contraste usando
var(--fs-color-*).
- Manter a i18n em todos os textos acessíveis (rótulos,
aria-label, alt) via ${i18n.getTranslation('chave')}.
- Validar o resultado com o checklist abaixo antes de entregar, anotando as melhorias aplicadas.
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 tornar a UI mais acessível, mas não garante conformidade total por si só.
Saída Esperada
Markup acessível, com o comportamento original preservado e uma nota curta das melhorias aplicadas (qual barreira foi tratada e como), mantendo i18n e compatibilidade com a plataforma.
Exemplo de Uso
Trecho ilustrativo: botão somente com ícone recebe nome acessível via i18n.
<!-- Antes — botão sem nome acessível (só ícone) -->
<button class="btn">
<span class="icon icon-trash" aria-hidden="true"></span>
</button>
<!-- Depois — aria-label com texto via i18n; ícone decorativo oculto -->
<button class="btn" aria-label="${i18n.getTranslation('action.delete')}">
<span class="icon icon-trash" aria-hidden="true"></span>
</button>
Checklist de Validação
1---2name: fluig-improve-accessibility3description: Melhora 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 — preservando comportamento, internacionalização e compatibilidade com a plataforma. Use quando o desenvolvedor pedir para tornar acessível um trecho de markup ou componente de interface (widget, layout, Custom Element).4---56# Melhoria de Acessibilidade de Frontend Fluig78Esta skill melhora a acessibilidade de markup/UI Fluig; ela **não duplica** convenções — os arquivos de `context/` são a fonte de verdade, referenciada abaixo.910## Objetivo1112Melhorar, com responsabilidade única, a **acessibilidade do frontend Fluig** — semântica, rótulos, teclado/foco, ARIA, texto alternativo e contraste — aplicando boas práticas públicas alinhadas às WCAG, sem alterar o comportamento observável, a i18n nem a compatibilidade com a plataforma.1314## Quando Usar1516- Quando um markup usa `div`/`span` genéricos no lugar de elementos semânticos.17- Quando campos de formulário **não têm rótulos associados** ou botões só têm ícone, sem nome acessível.18- Quando a interface **não é navegável por teclado** ou o foco não é visível/gerenciado (ex.: modais).19- Quando há imagens/ícones informativos **sem texto alternativo** ou cores com contraste insuficiente.2021## Entradas Esperadas2223| Entrada | Descrição | Obrigatória |24|---------|-----------|-------------|25| Markup/componente alvo | Trecho ou arquivo de UI a tornar acessível (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 melhoria; o detalhe está no contexto. Boas práticas públicas, genéricas e alinhadas às WCAG:3839- **HTML semântico** (`header`, `nav`, `main`, `button`, `label`) em vez de `div`/`span` genéricos → ver `conventions.md`.40- **Rótulos associados** a campos (`label`/`for`, ou `aria-label` quando não há rótulo visível), 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/diálogos.42- **Atributos ARIA apenas quando necessário** (roles e `aria-*`) — semântica nativa tem prioridade sobre ARIA.43- **Texto alternativo** em imagens/ícones informativos; ícones puramente decorativos ficam ocultos para a tecnologia assistiva.44- **Contraste de cor adequado** usando as variáveis do Style Guide (`var(--fs-color-*)`) — sem hexadecimal fixo → ver `style-guide.md`.45- **Estados comunicados de forma acessível** (ex.: `aria-expanded`, `aria-selected`, `aria-checked`).46- **Reutilizar componentes acessíveis** do Style Guide em vez de recriar comportamentos → ver `style-guide.md`.4748## Procedimento49501. Avaliar o markup e identificar as barreiras de acessibilidade (semântica ausente, campos sem rótulo, falta de navegação por teclado/foco, ícones sem nome, contraste insuficiente).512. Aplicar **HTML semântico** e corrigir a estrutura antes de recorrer a ARIA.523. Associar **rótulos/nomes acessíveis** aos controles e garantir **navegação por teclado e foco visível** (foco gerenciado em modais).534. Adicionar **ARIA e texto alternativo** apenas onde a semântica nativa não basta; ajustar **contraste** usando `var(--fs-color-*)`.545. Manter a **i18n** em todos os textos acessíveis (rótulos, `aria-label`, `alt`) via `${i18n.getTranslation('chave')}`.556. Validar o resultado com o checklist abaixo antes de entregar, anotando as melhorias aplicadas.5657> **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 tornar a UI mais acessível, mas **não garante** conformidade total por si só.5859## Saída Esperada6061Markup acessível, com o **comportamento original preservado** e uma nota curta das melhorias aplicadas (qual barreira foi tratada e como), mantendo i18n e compatibilidade com a plataforma.6263## Exemplo de Uso6465Trecho ilustrativo: botão somente com ícone recebe nome acessível via i18n.6667```html68<!-- Antes — botão sem nome acessível (só ícone) -->69<button class="btn">70 <span class="icon icon-trash" aria-hidden="true"></span>71</button>72```7374```html75<!-- Depois — aria-label com texto via i18n; ícone decorativo oculto -->76<button class="btn" aria-label="${i18n.getTranslation('action.delete')}">77 <span class="icon icon-trash" aria-hidden="true"></span>78</button>79```8081## Checklist de Validação8283- [ ] Elementos semânticos usados no lugar de `div`/`span` genéricos.84- [ ] Campos com rótulo associado (`label`/`for`) ou nome acessível (`aria-label`).85- [ ] Navegável por teclado, com ordem de tabulação lógica e foco visível/gerenciado.86- [ ] Texto alternativo em imagens/ícones informativos; ARIA usado apenas quando necessário.87- [ ] Contraste adequado via `var(--fs-color-*)`; sem hexadecimal fixo.88- [ ] Textos acessíveis (rótulos, `aria-label`, `alt`) via i18n; comportamento preservado.
totvs