Imported from artubss/SKILLS-CLAUDE-CODE (skills/skills/creative-design/accessibility-auditor/SKILL.md). Install upstream with npx skills add artubss/SKILLS-CLAUDE-CODE --skill accessibility-auditor. Copyright stays with the author.

Auditor de Acessibilidade

Orientação abrangente para criar experiências web acessíveis que estejam em conformidade com padrões WCAG e atendam efetivamente usuários de todas as habilidades.

Quando Usar Esta Habilidade

Use esta habilidade quando:

Auditar sites para conformidade de acessibilidade
Implementar padrões WCAG 2.1 Nível AA ou AAA
Corrigir violações e erros de acessibilidade
Testar com leitores de tela (NVDA, JAWS, VoiceOver)
Garantir que a navegação por teclado funcione corretamente
Implementar atributos ARIA e marcos de página
Preparar auditorias de conformidade ADA ou Section 508
Projetar experiências de usuário inclusivas

Princípios WCAG 2.1 (POUR)

1. Perceptível

Os usuários devem ser capazes de perceber as informações sendo apresentadas.

2. Operável

Os usuários devem ser capazes de operar a interface.

3. Compreensível

Os usuários devem ser capazes de compreender as informações e a interface.

4. Robusto

O conteúdo deve ser robusto o suficiente para funcionar com tecnologias atuais e futuras.

Problemas Comuns de Acessibilidade e Soluções

1. Falta de Texto Alternativo para Imagens

❌ Problema:

<img src="/products/shoes.jpg">

✅ Solução:

<!-- Imagem informativa -->
<img src="/products/shoes.jpg" alt="Tênis de corrida Nike Air Max vermelho com swoosh branco">

<!-- Imagem decorativa -->
<img src="/decorative-pattern.svg" alt="" role="presentation">

<!-- Logo que funciona como link -->
<a href="/">
  <img src="/logo.png" alt="Nome da Empresa - Início">
</a>

Regras:

Imagens informativas: Descreva o conteúdo/função
Imagens decorativas: Use alt vazio (alt="")
Imagens funcionais: Descreva a ação
Imagens complexas: Forneça descrição detalhada próxima

2. Contraste de Cor Baixo

❌ Problema:

/* Taxa de contraste 2.5:1 - Falha em WCAG */
.text {
  color: #767676;
  background: #ffffff;
}

✅ Solução:

/* Taxa de contraste 4.5:1+ - Passa AA */
.text {
  color: #595959;
  background: #ffffff;
}

/* Taxa de contraste 7:1+ - Passa AAA */
.text-high-contrast {
  color: #333333;
  background: #ffffff;
}

Requisitos:

Texto normal (< 18px): 4.5:1 mínimo (AA), 7:1 aprimorado (AAA)
Texto grande (≥ 18px ou ≥ 14px em negrito): 3:1 mínimo (AA), 4.5:1 aprimorado (AAA)
Componentes UI e gráficos: 3:1 mínimo

3. HTML Não Semântico

❌ Problema:

<div class="button" onclick="submitForm()">Enviar</div>
<div class="heading">Título da Página</div>
<div class="nav-menu">...</div>

✅ Solução:

<button type="submit" onclick="submitForm()">Enviar</button>
<h1>Título da Página</h1>
<nav aria-label="Navegação principal">...</nav>

Elementos Semânticos:

<button> para botões
<a> para links
<h1> - <h6> para títulos (hierárquico)
<nav>, <main>, <aside>, <article>, <section> para marcos
<ul>, <ol>, <li> para listas
<table>, <th>, <td> para dados tabulares

4. Rótulos de Formulário Ausentes

❌ Problema:

<input type="email" placeholder="Digite seu email">

✅ Solução:

<!-- Rótulo explícito -->
<label for="email">Endereço de Email</label>
<input type="email" id="email" name="email">

<!-- Rótulo implícito -->
<label>
  Endereço de Email
  <input type="email" name="email">
</label>

<!-- Rótulo oculto (para layouts compactos) -->
<label for="search" class="sr-only">Buscar</label>
<input type="text" id="search" placeholder="Buscar...">

Boas Práticas:

Cada campo de formulário deve ter um rótulo associado
Rótulos devem ser visíveis (não dependa de placeholder)
Use aria-label apenas quando o rótulo visual não for possível
Agrupe campos relacionados com <fieldset> e <legend>

5. Problemas de Navegação por Teclado

❌ Problema:

<div onclick="handleClick()">Clique em mim</div>
<a href="javascript:void(0)" onclick="doSomething()">Ação</a>

✅ Solução:

<!-- Use botão apropriado -->
<button onclick="handleClick()">Clique em mim</button>

<!-- Se div for necessária, torne-a acessível -->
<div
  role="button"
  tabindex="0"
  onclick="handleClick()"
  onkeydown="handleKeyPress(event)"
>
  Clique em mim
</div>

<script>
function handleKeyPress(event) {
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault();
    handleClick();
  }
}
</script>

Requisitos de Teclado:

Todos os elementos interativos devem ser acessíveis por teclado
Indicadores de foco visíveis (outline ou estilo personalizado)
Ordem de tabulação lógica (corresponde ao fluxo visual)
Links para pular conteúdo repetitivo
Sem armadilhas de teclado (usuários podem navegar para fora)

6. Marcos ARIA Ausentes

❌ Problema:

<div class="header">...</div>
<div class="main-content">...</div>
<div class="sidebar">...</div>
<div class="footer">...</div>

✅ Solução:

<header role="banner">
  <nav aria-label="Navegação principal">...</nav>
</header>

<main role="main">
  <h1>Título da Página</h1>
  <article>...</article>
</main>

<aside role="complementary" aria-label="Artigos relacionados">
  ...
</aside>

<footer role="contentinfo">
  ...
</footer>

Marcos Comuns:

banner - Cabeçalho do site
navigation - Menus de navegação
main - Conteúdo principal (um por página)
complementary - Conteúdo suplementar
contentinfo - Rodapé do site
search - Funcionalidade de busca
form - Regiões de formulário

7. Modais/Diálogos Inacessíveis

❌ Problema:

<div class="modal">
  <div class="content">
    Conteúdo do modal
    <button onclick="closeModal()">Fechar</button>
  </div>
</div>

✅ Solução:

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  aria-describedby="modal-desc"
>
  <h2 id="modal-title">Confirmar Ação</h2>
  <p id="modal-desc">Tem certeza que deseja excluir este item?</p>

  <button onclick="confirmAction()">Confirmar</button>
  <button onclick="closeModal()">Cancelar</button>
</div>

<script>
// Gerenciamento de foco
function openModal() {
  const modal = document.querySelector('[role="dialog"]');
  const focusableElements = modal.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );

  // Armazene o foco anterior
  previousFocus = document.activeElement;

  // Coloque o foco no primeiro elemento
  focusableElements[0].focus();

  // Prenda o foco
  modal.addEventListener('keydown', trapFocus);
}

function closeModal() {
  // Retorne o foco
  if (previousFocus) previousFocus.focus();
}

function trapFocus(event) {
  if (event.key !== 'Tab') return;

  const focusableElements = Array.from(
    modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
  );

  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];

  if (event.shiftKey && document.activeElement === firstElement) {
    lastElement.focus();
    event.preventDefault();
  } else if (!event.shiftKey && document.activeElement === lastElement) {
    firstElement.focus();
    event.preventDefault();
  }
}
</script>

Requisitos de Modal:

role="dialog" ou role="alertdialog"
aria-modal="true" para indicar comportamento modal
aria-labelledby apontando para o título
aria-describedby para descrição (opcional)
Gerenciamento de foco (prender e restaurar)
Fechar com tecla Escape
Evitar rolagem de fundo

8. Links para Pular Ausentes

✅ Solução:

<a href="#main-content" class="skip-link">
  Pular para conteúdo principal
</a>

<header>
  <nav>...</nav>
</header>

<main id="main-content" tabindex="-1">
  <!-- Conteúdo da página -->
</main>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}
</style>

Boas Práticas ARIA

Referência de Atributos ARIA

Estados:

aria-checked - Estado de checkbox/radio
aria-disabled - Estado desabilitado
aria-expanded - Estado expandido/recolhido
aria-hidden - Oculto da tecnologia assistiva
aria-pressed - Estado de botão toggle
aria-selected - Estado selecionado

Propriedades:

aria-label - Nome acessível
aria-labelledby - Referência de ID para rótulo
aria-describedby - Referência de ID para descrição
aria-live - Atualizações de região dinâmica
aria-required - Campo obrigatório
aria-invalid - Estado de validação

Regiões Dinâmicas

<!-- Polite: Aguarde pausa na fala -->
<div aria-live="polite" aria-atomic="true">
  Item adicionado ao carrinho
</div>

<!-- Assertive: Interrompa imediatamente -->
<div aria-live="assertive" role="alert">
  Erro: Pagamento falhou
</div>

<!-- Mensagem de status -->
<div role="status" aria-live="polite">
  Salvando alterações...
</div>

Componentes Personalizados

Acordeão:

<div class="accordion">
  <button
    aria-expanded="false"
    aria-controls="panel-1"
    id="accordion-1"
  >
    Seção 1
  </button>
  <div id="panel-1" role="region" aria-labelledby="accordion-1" hidden>
    Conteúdo do painel
  </div>
</div>

Abas:

<div role="tablist" aria-label="Seções de conteúdo">
  <button
    role="tab"
    aria-selected="true"
    aria-controls="panel-1"
    id="tab-1"
  >
    Aba 1
  </button>
  <button
    role="tab"
    aria-selected="false"
    aria-controls="panel-2"
    id="tab-2"
    tabindex="-1"
  >
    Aba 2
  </button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  Conteúdo do painel 1
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
  Conteúdo do painel 2
</div>

Checklist de Testes

Testes Automatizados

Execute axe DevTools ou extensão de navegador WAVE
Verifique validação de HTML (Validador W3C)
Teste taxas de contraste de cor
Verifique hierarquia de títulos
Procure por texto alternativo ausente

Testes Manuais

Testes com Leitor de Tela

VoiceOver (Mac):

Ativar: Cmd + F5
Navegar: Control + Option + teclas de seta
Ler tudo: Control + Option + A

NVDA (Windows):

Navegar: Teclas de seta (modo navegação) ou Tab (modo foco)
Ler tudo: NVDA + seta para baixo
Lista de elementos: NVDA + F7

Cenários de Teste:

Os usuários conseguem entender a estrutura da página?
Os títulos são descritivos e hierárquicos?
Os rótulos de formulário são claros e associados?
As mensagens de erro são anunciadas?
Os usuários conseguem completar tarefas essenciais sem visão?

Declaração de Acessibilidade

Inclua no website:

# Declaração de Acessibilidade

Estamos comprometidos em garantir a acessibilidade digital para pessoas com deficiência. Melhoramos continuamente a experiência do usuário para todos e aplicamos padrões de acessibilidade relevantes.

## Status de Conformidade
Este website está parcialmente em conformidade com WCAG 2.1 Nível AA. "Parcialmente conforme" significa que algumas partes do conteúdo não estão totalmente em conformidade com o padrão de acessibilidade.

## Comentários
Acolhemos seus comentários sobre a acessibilidade deste site. Entre em contato:
- Email: acessibilidade@exemplo.com.br
- Telefone: +55 11 0000-0000

## Problemas Conhecidos
- [Liste quaisquer problemas de acessibilidade conhecidos e correções planejadas]

Última atualização: [Data]

Recursos

Ferramentas:

axe DevTools (extensão de navegador)
WAVE (ferramenta de avaliação de acessibilidade web)
Lighthouse (Chrome DevTools)
Analisador de Contraste de Cor
Leitores de tela: NVDA, JAWS, VoiceOver

Diretrizes:

WCAG 2.1: https://www.w3.org/WAI/WCAG21/quickref/
Práticas de Autoria ARIA: https://www.w3.org/WAI/ARIA/apg/

Acessibilidade não é opcional—é um requisito fundamental para criar experiências web inclusivas. Priorize-a desde o início de cada projeto, não como uma reflexão tardia.

Auditor de Acessibilidade

About

Auditor de Acessibilidade

Quando Usar Esta Habilidade

Princípios WCAG 2.1 (POUR)

1. Perceptível

2. Operável

3. Compreensível

4. Robusto

Problemas Comuns de Acessibilidade e Soluções

1. Falta de Texto Alternativo para Imagens

2. Contraste de Cor Baixo

3. HTML Não Semântico

4. Rótulos de Formulário Ausentes

5. Problemas de Navegação por Teclado

6. Marcos ARIA Ausentes

7. Modais/Diálogos Inacessíveis

8. Links para Pular Ausentes

Boas Práticas ARIA

Referência de Atributos ARIA

Regiões Dinâmicas

Componentes Personalizados

Checklist de Testes

Testes Automatizados

Testes Manuais

Testes com Leitor de Tela

Declaração de Acessibilidade

Recursos

Use it

Manifest

Reviews