0Pricing
HTML Academy · Aula

aria-selected e padrões de abas

Implemente interfaces de abas acessíveis pelo teclado.

aria-selected e padrões de abas é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 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.

Visão geral do padrão de abas

Uma interface de abas tem três componentes ARIA:

  • role="tablist" — contêiner de todas as abas
  • role="tab" — botão de cada aba
  • role="tabpanel" — painel de conteúdo de cada aba

Estrutura de abas ARIA

Marcação acessível completa para abas:

<div role="tablist" aria-label="Account Settings">
  <button role="tab" id="tab-1" aria-selected="true"
          aria-controls="panel-1">Profile</button>
  <button role="tab" id="tab-2" aria-selected="false"
          aria-controls="panel-2" tabindex="-1">Security</button>
  <button role="tab" id="tab-3" aria-selected="false"
          aria-controls="panel-3" tabindex="-1">Notifications</button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Profile content...
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Security content...
</div>

aria-selected

aria-selected indica o item atualmente ativo em um contexto de seleção:

<!-- In a tablist: -->
<button role="tab" aria-selected="true">Active Tab</button>
<button role="tab" aria-selected="false">Other Tab</button>

<!-- In a listbox: -->
<ul role="listbox">
  <li role="option" aria-selected="false">Option 1</li>
  <li role="option" aria-selected="true">Option 2</li>
</ul>

Padrão de teclado para abas

Os padrões ARIA definem um comportamento específico do teclado para abas:

  • Tab — move o foco para dentro da lista de abas, até a aba selecionada
  • Teclas de seta — percorrem as abas
  • Tab novamente — move o foco para fora da lista de abas, até o painel ativo
  • Home — primeira aba
  • End — última aba

Implementação da navegação por teclado em abas

Navegação por teclado em abas usando as teclas de seta:

const tabs = document.querySelectorAll('[role="tab"]');

tabs.forEach((tab, i) => {
  tab.addEventListener('keydown', (e) => {
    let target;
    if (e.key === 'ArrowRight') target = tabs[(i + 1) % tabs.length];
    if (e.key === 'ArrowLeft') target = tabs[(i - 1 + tabs.length) % tabs.length];
    if (e.key === 'Home') target = tabs[0];
    if (e.key === 'End') target = tabs[tabs.length - 1];

    if (target) {
      activateTab(target);
      target.focus();
    }
  });
});

Função activateTab

Função para alternar abas e atualizar ARIA:

function activateTab(selectedTab) {
  // Deactivate all tabs:
  document.querySelectorAll('[role="tab"]').forEach(tab => {
    tab.setAttribute('aria-selected', 'false');
    tab.setAttribute('tabindex', '-1');
    document.getElementById(tab.getAttribute('aria-controls')).hidden = true;
  });

  // Activate selected tab:
  selectedTab.setAttribute('aria-selected', 'true');
  selectedTab.setAttribute('tabindex', '0');
  document.getElementById(selectedTab.getAttribute('aria-controls')).hidden = false;
}

Padrão de tabindex móvel

Os grupos de abas usam tabindex móvel para manter uma aba na ordem de tabulação:

<!-- Only the selected tab has tabindex=0 -->
<button role="tab" aria-selected="true" tabindex="0">Active</button>
<button role="tab" aria-selected="false" tabindex="-1">Other</button>
<button role="tab" aria-selected="false" tabindex="-1">Another</button>

<!-- When user arrows to a new tab:
     1. Set new tab tabindex=0
     2. Set old tab tabindex=-1
     3. Focus new tab -->

aria-selected vs aria-checked

aria-selected vs aria-checked — contextos diferentes:

  • aria-selected — usado em componentes de seleção: abas, opções em listbox e itens em árvore
  • aria-checked — usado em itens que podem ser marcados: caixas de seleção e itens de menu com marca de seleção

Foco no painel da aba

Quando uma aba é ativada, o painel fica visível, mas o foco permanece na aba:

// Users can then Tab to move into the panel content
// The panel should not automatically receive focus

// Exception: if the panel is very long, consider moving focus
// to the panel heading for long-form content tabs

// Panel should have tabindex=-1 for programmatic focus:
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="-1">

Ativação automática vs. manual

Dois modelos de ativação de abas:

  • Automática — as abas são ativadas conforme o usuário percorre as abas com as setas (experiência mais simples)
  • Manual — o usuário precisa pressionar Enter/Espaço para ativar depois de percorrer as abas com as setas (melhor quando o conteúdo da aba exige carregamento)

Estilização acessível de abas

CSS para o estado selecionado de abas acessíveis:

[role="tab"] {
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1rem;
  cursor: pointer;
}

[role="tab"][aria-selected="true"] {
  border-bottom-color: #0070f3;
  font-weight: bold;
}

/* :focus-visible for keyboard users: */
[role="tab"]:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: -2px;
}

Verificação rápida

Como a navegação pelo teclado deve funcionar em uma lista de abas?

Recapitulação: aria-selected e abas

Elementos essenciais do padrão de abas:

  • tablist → tab (aria-selected) → tabpanel (aria-labelledby)
  • As teclas de seta navegam entre as abas; Tab entra no painel
  • tabindex móvel: somente a aba ativa tem tabindex=0
  • aria-selected="true" na aba ativa
  • Os painéis inativos usam o atributo hidden

Perguntas Frequentes

A aula “aria-selected e padrões de abas” é grátis?

Sim — o texto completo de “aria-selected e padrões de abas” é 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 “aria-selected e padrões de abas”?

Implemente interfaces de abas acessíveis 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 2 de 4.

Quanto tempo leva a aula “aria-selected e padrões de abas”?

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. aria-expanded e aria-controls para alternâncias
  2. aria-selected e padrões de abas
  3. Regiões dinâmicas: aria-live aria-atomic aria-relevant
  4. Testes com leitores de tela
← Voltar para HTML Academy