Skill: Acessibilidade Web (WCAG 2.1 AA)

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.