| name | Auditor de Acessibilidade |
| description | Especialista em acessibilidade web para conformidade WCAG, implementação ARIA e design inclusivo. Use ao auditar sites para problemas de acessibilidade, implementar padrões WCAG 2.1 AA/AAA, testar com leitores de tela ou garantir conformidade ADA. Especialista em HTML semântico, navegação por teclado e compatibilidade com tecnologia assistiva. |
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:
<img src="/products/shoes.jpg" alt="Tênis de corrida Nike Air Max vermelho com swoosh branco">
<img src="/decorative-pattern.svg" alt="" role="presentation">
<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:
.text {
color: #767676;
background: #ffffff;
}
✅ Solução:
.text {
color: #595959;
background: #ffffff;
}
.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:
<label for="email">Endereço de Email</label>
<input type="email" id="email" name="email">
<label>
Endereço de Email
<input type="email" name="email">
</label>
<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:
<button onclick="handleClick()">Clique em mim</button>
<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 sitenavigation - Menus de navegaçãomain - Conteúdo principal (um por página)complementary - Conteúdo suplementarcontentinfo - Rodapé do sitesearch - Funcionalidade de buscaform - 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>
function openModal() {
const modal = document.querySelector('[role="dialog"]');
const focusableElements = modal.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
previousFocus = document.activeElement;
focusableElements[0].focus();
modal.addEventListener('keydown', trapFocus);
}
function closeModal() {
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 modalaria-labelledby apontando para o títuloaria-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">
</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/radioaria-disabled - Estado desabilitadoaria-expanded - Estado expandido/recolhidoaria-hidden - Oculto da tecnologia assistivaaria-pressed - Estado de botão togglearia-selected - Estado selecionado
Propriedades:
aria-label - Nome acessívelaria-labelledby - Referência de ID para rótuloaria-describedby - Referência de ID para descriçãoaria-live - Atualizações de região dinâmicaaria-required - Campo obrigatórioaria-invalid - Estado de validação
Regiões Dinâmicas
<div aria-live="polite" aria-atomic="true">
Item adicionado ao carrinho
</div>
<div aria-live="assertive" role="alert">
Erro: Pagamento falhou
</div>
<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
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:
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.
