Skill: Acessibilidade Web (WCAG 2.1 AA)

Esta skill garante que todas as páginas do projeto sigam as diretrizes de acessibilidade WCAG 2.1 nível AA, tornando o site acessível para todos os usuários, incluindo pessoas com deficiências.

Quando Usar

• •Ao criar novas páginas HTML
• •Ao adicionar componentes interativos (accordion, navbar, modals)
• •Quando o usuário mencionar "acessibilidade", "ARIA", "alt text", "leitores de tela"
• •Ao revisar código HTML existente
• •Quando adicionar imagens, ícones ou conteúdo visual
• •Ao criar formulários (se aplicável)

Princípios WCAG 2.1

1. Perceptível

Informação e componentes da interface devem ser apresentados de forma perceptível aos usuários.

2. Operável

Componentes da interface e navegação devem ser operáveis por todos os usuários.

3. Compreensível

Informação e operação da interface devem ser compreensíveis.

4. Robusto

Conteúdo deve ser robusto o suficiente para ser interpretado por diferentes tecnologias assistivas.

Diretrizes Principais

Estrutura Semântica

Hierarquia de Headings:

• •Use h1, h2, h3... em ordem hierárquica
• •Não pule níveis (h1 → h3 é incorreto)
• •Apenas um h1 por página

Tags Semânticas HTML5:

<nav>      <!-- Navegação -->
<main>     <!-- Conteúdo principal -->
<section>  <!-- Seções -->
<article>  <!-- Conteúdo independente -->
<footer>   <!-- Rodapé -->

ARIA (Accessible Rich Internet Applications)

Roles:

<div role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">

Labels:

<button aria-label="Fechar menu">✕</button>

Atributos ARIA Essenciais:

• •aria-label: Texto alternativo para leitores de tela
• •aria-expanded: Estado expandido/colapsado
• •aria-controls: Relacionamento entre elementos
• •aria-hidden: Ocultar elementos decorativos
• •aria-live: Regiões que atualizam dinamicamente

Navegação por Teclado

Requisitos:

• •Todos os elementos interativos devem ser acessíveis via Tab
• •Ordem de tab lógica e sequencial
• •Indicadores visuais de foco visíveis
• •Não use tabindex com valores positivos

Elementos Focáveis:

• •Links (<a>)
• •Botões (<button>)
• •Inputs (<input>, <select>, <textarea>)
• •Elementos com tabindex="0"

Contraste de Cores

Requisitos WCAG AA:

• •Texto normal (< 18pt): mínimo 4.5:1
• •Texto grande (≥ 18pt ou ≥ 14pt bold): mínimo 3:1

Combinações Bootstrap Seguras: ✅ bg-dark + text-white ✅ bg-primary + text-white ✅ bg-light + text-dark ✅ bg-warning + text-dark

⚠️ Evite: ❌ bg-warning sem text-dark ❌ Cores claras em fundos claros ❌ Texto cinza claro em fundo branco

Imagens e Conteúdo Visual

Atributo Alt:

<!-- Imagem informativa -->
<img src="carta.jpg" alt="Carta Pikachu Base Set graduada nota 9">

<!-- Imagem decorativa -->
<img src="decoracao.png" alt="">
<!-- ou -->
<div aria-hidden="true">🔥</div>

Emojis: Como este projeto usa emojis decorativos:

<div class="display-1" aria-hidden="true">🔥</div>
<h2>Charizard</h2>

Links e Botões

Texto Descritivo:

<!-- ✅ Bom -->
<a href="charizard.html">Ver detalhes do Charizard</a>

<!-- ❌ Ruim -->
<a href="charizard.html">Clique aqui</a>

Área de Clique:

• •Mínimo 44x44px (Bootstrap já garante com .btn)
• •Espaçamento adequado entre elementos clicáveis

Componentes Bootstrap com ARIA

Accordion:

<button class="accordion-button"
        aria-expanded="true"
        aria-controls="collapse1">
    Título
</button>
<div id="collapse1" class="accordion-collapse collapse show">
    Conteúdo
</div>

Navbar Toggle:

<button class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Alternar navegação">
    <span class="navbar-toggler-icon"></span>
</button>

Progress Bars:

<div class="progress" style="height: 30px;">
    <div class="progress-bar bg-success"
         role="progressbar"
         style="width: 85%;"
         aria-valuenow="85"
         aria-valuemin="0"
         aria-valuemax="100">
        <span class="fw-bold">85%</span>
    </div>
</div>

Modals:

<div class="modal" id="modalFrente" tabindex="-1" aria-labelledby="modalFrenteLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFrenteLabel">Título</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
        </div>
    </div>
</div>

Responsividade e Zoom

Viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Requisitos:

• •Conteúdo deve ser legível até 200% de zoom
• •Não bloqueie zoom (não use maximum-scale=1.0)
• •Layout deve adaptar sem scroll horizontal

Idioma

Tag HTML:

<html lang="pt-BR">

Mudanças de Idioma:

<p>Este é um <span lang="en">Base Set</span> Charizard</p>

Checklist de Acessibilidade

Ao criar ou modificar uma página, verifique:

Estrutura:

• •✅ <html lang="pt-BR"> definido
• •✅ Hierarquia de headings correta (h1, h2, h3...)
• •✅ Tags semânticas HTML5 usadas apropriadamente

Conteúdo:

• •✅ Alt text em todas as imagens informativas
• •✅ aria-hidden="true" em imagens/emojis decorativos
• •✅ Links com texto descritivo (não "clique aqui")
• •✅ Contraste de cores adequado (4.5:1 mínimo)

Interatividade:

• •✅ Navegação por teclado funcional
• •✅ Indicadores de foco visíveis
• •✅ ARIA labels em botões sem texto
• •✅ Navbar com atributos ARIA corretos
• •✅ Accordion com aria-expanded e aria-controls
• •✅ Progress bars com role e atributos aria-value*
• •✅ Modals com aria-labelledby e aria-hidden

Responsividade:

• •✅ Viewport meta tag configurada
• •✅ Funciona em 200% de zoom
• •✅ Sem scroll horizontal em mobile

Testes de Acessibilidade

Testes Manuais

1. •

   Navegação por Teclado:

   • •Use apenas Tab, Enter, Espaço, Setas
   • •Verifique se todos os elementos interativos são alcançáveis
   • •Confirme que a ordem de foco é lógica
2. •

   Leitor de Tela:

   • •Windows: NVDA (gratuito)
   • •Mac: VoiceOver (nativo)
   • •Verifique se todo o conteúdo é lido corretamente
3. •

   Zoom:

   • •Teste com 200% de zoom no navegador
   • •Verifique se não há quebra de layout
   • •Confirme que todo o conteúdo permanece legível
4. •

   Desabilitar CSS:

   • •Veja se o conteúdo ainda faz sentido
   • •Verifique se a hierarquia está correta

Ferramentas Automatizadas

• •axe DevTools: Extensão para Chrome/Firefox
• •WAVE: Avaliador de acessibilidade web
• •Lighthouse: Painel no Chrome DevTools (aba Accessibility)
• •WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/

Correções Comuns

Problema: Imagem sem alt

<!-- ❌ Antes -->
<img src="carta.jpg">

<!-- ✅ Depois -->
<img src="carta.jpg" alt="Carta Charizard Base Set">

Problema: Link não descritivo

<!-- ❌ Antes -->
<a href="detalhes.html">Clique aqui</a>

<!-- ✅ Depois -->
<a href="detalhes.html">Ver detalhes da carta Charizard</a>

Problema: Botão sem label

<!-- ❌ Antes -->
<button class="btn-close" data-bs-dismiss="modal"></button>

<!-- ✅ Depois -->
<button class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>

Problema: Emoji sem aria-hidden

<!-- ❌ Antes -->
<div class="display-1">🔥</div>

<!-- ✅ Depois -->
<div class="display-1" aria-hidden="true">🔥</div>

Problema: Contraste insuficiente

<!-- ❌ Antes -->
<span class="badge bg-warning">Aviso</span>

<!-- ✅ Depois -->
<span class="badge bg-warning text-dark">Aviso</span>

Recursos

• •WCAG 2.1 Quick Reference
• •Bootstrap 5 Accessibility
• •WebAIM Contrast Checker
• •axe DevTools
• •WAVE Extension

Integração com Outras Skills

Esta skill trabalha em conjunto com:

• •bootstrap-guidelines: Para usar classes Bootstrap acessíveis
• •codigo-html: Para estrutura HTML semântica
• •estrutura-paginas: Para layout acessível de páginas

Ao criar ou modificar páginas, sempre considere acessibilidade como prioridade, não como complemento.