0Pricing
HTML Academy · Aula

Navegação pelo teclado e ordem do foco

Garanta que todas as funcionalidades sejam acessíveis e estejam em uma ordem lógica pelo teclado.

Navegação pelo teclado e ordem do foco é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Quem precisa de navegação pelo teclado?

Muitos usuários dependem da navegação pelo teclado:

  • Deficiências motoras — não conseguem usar um mouse
  • Usuários avançados — preferem atalhos de teclado
  • Usuários de leitores de tela — navegam inteiramente pelo teclado
  • Usuários de acesso por interruptor — usam botões que simulam pressionamentos de teclas

Elementos naturalmente focáveis

Por padrão, estes elementos HTML podem receber focus pelo teclado:

  • <a href> — Tab move o focus até ele, Enter o ativa
  • <button> — Tab move o focus até ele, Enter/Espaço o ativa
  • <input>, <textarea>, <select> — Tab move o focus até eles
  • <details> / <summary> — Tab + Enter

Ordem de tabulação

O navegador determina a ordem de tabulação da seguinte forma:

  • Ordem do DOM por padrão — os elementos recebem Tab na ordem em que aparecem no HTML
  • Valores positivos de tabindex — esses elementos recebem Tab primeiro, em ordem crescente
  • tabindex="0" — adicionado à ordem natural de tabulação na posição correspondente do DOM
  • tabindex="-1" — não faz parte da ordem de tabulação; só pode receber focus por meio de um script

Ordem natural de tabulação = ordem do DOM

A ordem de leitura do seu HTML deve corresponder ao layout visual:

<!-- GOOD: DOM order matches visual left-to-right, top-to-bottom: -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

<!-- BAD: visually reordered with CSS, DOM order broken:
     CSS flexbox order: doesn't affect tab order!
     Screen readers and keyboard users follow DOM order, not CSS order -->

Indicador de focus visível

WCAG 2.4.7 (Nível AA): o focus do teclado deve estar visível:

/* NEVER do this: */
* { outline: none; }           /* removes all focus outlines */

/* GOOD: styled focus indicator: */
:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 3px;
  border-radius: 4px;
}

/* :focus-visible shows outline for keyboard only
   mouse clicks don't trigger :focus-visible -->
/* But outline: none with :focus (not :focus-visible) hides for both */

Estilos personalizados de focus

Estilos de focus do sistema de projeto:

/* Replace outline with box-shadow for rounded elements: */
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.4);
}

/* Always ensure 3:1 contrast ratio between
   focus indicator and background (WCAG 2.4.11 Level AA) */

Ordem lógica de focus

A ordem de focus deve ser lógica e previsível — WCAG 2.4.3 (Nível A):

<!-- BAD: focus order jumps around the page -->
<!-- First: footer link (tabindex=5) -->
<!-- Then: sidebar (tabindex=3) -->
<!-- Then: header nav (tabindex=1) -->

<!-- GOOD: natural DOM order matches reading flow: -->
<!-- Header → Nav → Main Content → Sidebar → Footer -->

Links de salto

Os links de salto permitem que usuários de teclado ignorem a navegação repetitiva:

<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Visually hidden until focused: -->
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #0070f3;
  color: white;
  padding: 0.75rem;
  z-index: 9999;
}
.skip-link:focus {
  top: 0;  /* visible when focused -->
}

Armadilha de focus do modal

Os modais devem manter o focus preso enquanto estiverem abertos:

<!-- When modal opens:
1. Move focus to modal container or first interactive element
2. Tab stays within modal
3. When modal closes, return focus to the trigger button
-->

const modal = document.getElementById('modal');
const trigger = document.getElementById('open-modal');

function openModal() {
  modal.removeAttribute('hidden');
  modal.querySelector('button, [tabindex="0"]').focus();
}

function closeModal() {
  modal.setAttribute('hidden', '');
  trigger.focus();
}

Atalhos de teclado

Implemente atalhos de teclado com ouvintes de eventos:

document.addEventListener('keydown', (e) => {
  // Close modal on Escape:
  if (e.key === 'Escape') closeModal();

  // Navigate tabs with arrow keys:
  if (e.key === 'ArrowRight') focusNextTab();
  if (e.key === 'ArrowLeft') focusPrevTab();

  // Submit form on Enter (default behavior in inputs):
  // Nothing needed — browser handles this
});

Testando a navegação pelo teclado

Como testar a acessibilidade pelo teclado:

  1. Afaste o mouse e use apenas o teclado
  2. Pressione Tab — você consegue alcançar todos os elementos interativos?
  3. O indicador de focus está sempre visível?
  4. A ordem de tabulação faz sentido lógico?
  5. Você consegue usar todos os recursos (formulários, modais, menus suspensos) sem um mouse?
  6. Pressione Shift+Tab para navegar para trás

Verificação rápida

Qual propriedade CSS você nunca deve remover de todos os elementos para garantir a acessibilidade pelo teclado?

Recapitulação: navegação pelo teclado

Princípios essenciais da acessibilidade pelo teclado:

  • Todos os elementos interativos devem ser alcançáveis com Tab
  • Ordem do DOM = ordem de tabulação — corresponda ao layout visual
  • Nunca remova os contornos de focus — use :focus-visible para estilos personalizados
  • Os links de salto permitem ignorar a navegação repetitiva
  • Use uma armadilha de focus nos modais; devolva o focus ao fechar
  • Teste usando o site apenas com o teclado

Perguntas Frequentes

A aula “Navegação pelo teclado e ordem do foco” é grátis?

Sim — o texto completo de “Navegação pelo teclado e ordem do foco” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Navegação pelo teclado e ordem do foco”?

Garanta que todas as funcionalidades sejam acessíveis e estejam em uma ordem lógica pelo teclado. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Navegação pelo teclado e ordem do foco”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Por que a acessibilidade importa: níveis WCAG
  2. Hierarquia de títulos para leitores de tela
  3. Texto alternativo de imagens: quando e como
  4. Navegação pelo teclado e ordem do foco
← Voltar para HTML Academy