2 problemas documentados

Acessibilidade por Teclado

Foco visível, ordem de foco lógica, armadilhas de foco e interação completa sem mouse.

Imagens Formulários Contraste Estrutura Links Acessibilidade Tabelas Multimídia:

WCAG AA

Indicador de foco removido via CSS

WCAG 2.4.7WCAG 2.4.11eMAG 2.1

O indicador de foco (anel azul/outline) é a única forma que usuários de teclado têm de saber onde estão na página. Removê-lo via CSS ":focus { outline: none }" é uma das violações mais graves.

Impacto por tipo de deficiência

Motora

Usuários que não conseguem usar mouse navegam por teclado — sem indicador de foco, ficam completamente desorientados na página.

Baixa visão

Usuários com tremor que alternam entre mouse e teclado dependem do anel de foco para confirmar onde clicaram.

Incorreto — cria barreiras de acessibilidade

/* ❌ O pior código de acessibilidade existente */
* { outline: none; }
*:focus { outline: none; }
button:focus { outline: 0; }

Correto — acessível para todos os usuários

/* ✓ Nunca remover outline — melhorar o estilo se necessário */
:focus-visible {
  outline: 3px solid #0048B6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ✓ :focus-visible mostra outline só para navegação por teclado */
/* (não mostra ao clicar com mouse — melhor UX para todos) */

/* ✓ Alternativa: custom focus ring */
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #0048B6, 0 0 0 5px white;
}

WCAG A

Armadilha de foco (focus trap indesejado)

WCAG 2.1.2WCAG 2.4.3eMAG 2.1 eMAG 2.4

O foco não pode ficar preso em um componente sem forma de sair. Modais, dropdowns e widgets precisam de lógica de foco controlada que permita fechar e retornar ao elemento que abriu o componente.

Impacto por tipo de deficiência

Motora

Usuários de teclado ficam presos dentro de um componente sem poder avançar ou fechar — o único recurso é recarregar a página.

Cegueira

Leitor de tela entra em loop dentro do componente sem forma de escapar.

Incorreto — cria barreiras de acessibilidade

<!-- ❌ Modal sem gerenciamento de foco -->
<div class="modal" style="display:block">
  <h2>Confirmar ação</h2>
  <p>Deseja continuar?</p>
  <button onclick="fechar()">Fechar</button>
  <!-- Foco vaza para elementos fora do modal -->
</div>

Correto — acessível para todos os usuários

<!-- ✓ Modal com foco gerenciado e Escape para fechar -->
<dialog id="modal-confirmacao" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Confirmar ação</h2>
  <p>Deseja continuar?</p>
  <div class="acoes">
    <button id="btn-confirmar">Confirmar</button>
    <button id="btn-cancelar">Cancelar</button>
  </div>
</dialog>

<!-- ✓ <dialog> nativo gerencia foco e Escape automaticamente -->
<!-- ✓ Para implementação manual, use um focus trap library -->
<!-- ✓ Ao abrir: mover foco para o modal -->
<!-- ✓ Ao fechar: retornar foco ao elemento que abriu -->

Técnicas ARIA relevantes

role="dialog"aria-modal="true"aria-labelledbyaria-describedby

🔗 Links e Navegação

Próxima categoria

📊 Tabelas de Dados

Ver todas as categorias do Guia