Componente de abas com :checked versus JS

Um componente de abas precisa de: um indicador visual da aba ativa, um painel associado exibido ou ocultado ao selecionar, navegação por teclado entre as abas e atributos ARIA acessíveis. Isso pode ser obtido somente com CSS usando o truque de :checked ou com JavaScript para oferecer melhor acessibilidade.

Entradas de rádio ocultas funcionam como estado: cada aba é um <label> vinculado a uma entrada de rádio. Quando um rádio é marcado, os combinadores de irmãos do CSS exibem o painel correspondente e estilizam o rótulo da aba ativa. Nenhum JavaScript é necessário.

Coloque as entradas de rádio, depois todos os rótulos (abas) e, por fim, todos os painéis no mesmo contêiner. Use o combinador geral de irmãos (~) para conectar um rádio marcado ao painel correspondente. Por padrão, os painéis recebem display: none; o painel correspondente recebe display: block.

O truque de :checked não consegue atualizar atributos ARIA (aria-selected, aria-controls), não permite ativar a navegação por teclas de seta entre as abas, e as restrições da ordem no DOM (entradas antes dos painéis) podem entrar em conflito com os requisitos do design visual. Essas lacunas limitam a acessibilidade real.

Um componente de abas em JS escuta eventos de clique nos botões das abas, define aria-selected na aba ativa, atualiza aria-hidden nos painéis e gerencia o foco. Essa abordagem permite conformidade completa com ARIA e padrões de interação por teclado conforme as Práticas de autoria ARIA.

Use role="tablist" no contêiner, role="tab" em cada botão de aba com aria-selected e aria-controls, e role="tabpanel" em cada painel com aria-labelledby. Os leitores de tela anunciam a quantidade de abas, a posição e o estado selecionado.

Práticas de autoria ARIA para abas: a tecla Tab entra na lista de abas e coloca o foco na aba ativa. As setas Esquerda/Direita movem-se entre as abas. Início/Fim levam à primeira ou à última aba. Cada movimento com as teclas de seta ativa a aba em foco (padrão de ativação automática).

Estilize a aba ativa com uma borda inferior ou uma alteração no plano de fundo usando o seletor [aria-selected="true"] — funciona tanto com as abordagens com JS quanto com :checked. Isso mantém o CSS sincronizado com o atributo de estado ARIA, evitando o gerenciamento de dois estados.

Um indicador de aba animado desliza entre as abas: posicione um elemento indicador com posicionamento absoluto, use JavaScript para definir sua posição à esquerda e sua largura de acordo com as dimensões da aba ativa e anime-o com transition: left 200ms ease, width 200ms ease.

Quando as abas ultrapassarem os limites do contêiner em telas pequenas, use rolagem horizontal (overflow-x: auto; scrollbar-width: none) ou recolha-as em um menu suspenso de seleção em dispositivos móveis. A abordagem com seleção exige JS para sincronizar o elemento de seleção nativo com a visibilidade do painel da aba.

Use a técnica de :checked para interfaces simples e não críticas, nas quais a acessibilidade não seja uma restrição prioritária. Use abas com JavaScript para qualquer interface de produção voltada a usuários de teclado, usuários de leitores de tela ou aplicações que exijam conformidade com ARIA em auditorias ou requisitos legais.

Qual é a principal limitação de acessibilidade da técnica de :checked para abas?

A técnica de :checked permite alternar abas usando somente CSS, com entradas de opção e combinadores de irmãos, mas não oferece acessibilidade por ARIA nem pelo teclado. Abas com JavaScript e funções ARIA (tablist, tab, tabpanel), gerenciamento de aria-selected e tratamento das teclas de seta oferecem a experiência completa e acessível necessária para componentes de produção.