Sistema de Abas (Tab UI System)

Sistema de Abas

Propósito

O Sistema de Abas fornece uma metodologia para projetar e estruturar abas—elementos de navegação que permitem aos usuários alternar entre painéis de conteúdo relacionados dentro do mesmo contexto. Abas são um padrão chave para divulgação progressiva, ajudando a reduzir a carga cognitiva ao organizar informações em grupos lógicos sem exigir recarregamento da página. Uma abordagem sistemática garante que as abas tenham estados ativos claros, agrupamento lógico e se adaptem graciosamente entre dispositivos.

Casos de Uso

• Páginas de Detalhes do Produto: Organizando especificações, avaliações, detalhes de envio e FAQ em seções escaneáveis.
• Configurações da Conta: Agrupando perfil do usuário, segurança, notificações e configurações de faturamento.
• Dashboards: Alternando entre diferentes visualizações de dados (ex.: "Visão Geral", "Analytics", "Histórico").
• Resultados de Pesquisa: Filtrando resultados por tipo (ex.: "Todos", "Imagens", "Vídeos", "Notícias").
• Formulários Complexos: Dividindo formulários grandes em seções temáticas (se as etapas não precisarem ser concluídas em uma ordem rigorosa).

Quando NÃO Usar

• Etapas Sequenciais: Se o usuário precisar concluir o conteúdo em uma ordem específica, use o sistema-de-progresso-de-etapas.
• Navegação Global: As abas devem gerenciar o conteúdo dentro de uma página; use o sistema-de-navegação-do-site para navegar entre páginas.
• Comparação de Informações: Se o usuário precisar ver conteúdo de duas seções simultaneamente, não use abas. Considere um acordeão ou um layout lado a lado.
• Muito Poucos Itens: Se houver apenas dois itens e o conteúdo for curto, considere mostrar ambos ou usar uma alternância simples.
• Muitos Itens: Se você tiver mais de 6-7 abas, a interface ficará confusa. Considere uma navegação lateral ou um filtro baseado em menu suspenso.

Entradas

1. Inventário de Conteúdo: Uma lista de rótulos e seus painéis de conteúdo correspondentes.
2. Contexto de Uso: Onde as abas estarão (ex.: área de conteúdo principal, barra lateral ou dentro de um modal).
3. Nível de Prioridade: Este é o foco principal da página ou um detalhe secundário?
4. Sistemas Existentes: Espaçamento fluido, escalas tipográficas e definições de estado interativo.

Saídas

1. Especificação da Anatomia da Aba: Definições visuais para Gatilhos (as abas), a Lista de Abas (o contêiner) e os Painéis (o conteúdo).
2. Matriz de Estados: Tratamentos visuais definidos para os estados Padrão, Hover, Ativo, Foco e Desabilitado.
3. Estratégia Responsiva: Regras para lidar com estouro (Rolável, Quebrado em Linhas ou Recolhido em Acordeão/Select).
4. Blueprint de Acessibilidade: Papéis ARIA, mapeamento de teclado e regras de gerenciamento de foco.

Fluxo de Trabalho

1. Definir a Relação do Conteúdo

Certifique-se de que todas as abas estejam no mesmo nível de hierarquia e se relacionem com a mesma entidade pai. Os rótulos devem ser curtos (1-3 palavras) e usar capitalização consistente.

2. Estabelecer a Anatomia Visual

Aplique o sistema-de-hierarquia-visual para definir a lista de abas:

• A Aba Ativa: Deve ser a mais proeminente. Use uma combinação de cor, peso da fonte e um indicador visual (como uma borda inferior ou preenchimento de fundo).
• A Aba Inativa: Deve parecer interativa, mas secundária.
• O Painel de Conteúdo: Geralmente compartilha um contêiner visual ou alinhamento com a aba ativa para criar uma sensação de "conexão".

3. Definir a Lógica de Interação

• Alternância Imediata: O conteúdo deve mudar instantaneamente ao interagir.
• Hover vs. Clique: As abas nunca devem alternar ao passar o mouse; elas exigem um clique ou toque explícito.
• Estado Padrão: A primeira aba geralmente está ativa por padrão, a menos que o usuário esteja retornando a um estado específico.

4. Otimizar para Espaçamento e Toque

Aplique o sistema-de-espaçamento-fluido e o sistema-de-estado-interativo:

• Alvos de Toque: Cada gatilho de aba deve atender ao WCAG 2.2 SC 2.5.8 (mínimo 24x24px); prefira 44x44px para UIs de aba principais.
• Lacunas Internas: Use espaçamento consistente entre as abas (geralmente --space-s ou --space-m).
• Indicador Ativo: Certifique-se de que a linha ou fundo "Ativo" seja espesso o suficiente para ser visto claramente.

5. Planejar para Responsividade

Determine como a lista de abas lida com viewports estreitas:

• Rolagem Horizontal: O padrão móvel mais comum. Permita que a lista de abas transborde horizontalmente com um desvanecimento sutil ou seta para indicar mais conteúdo.
• Transformação em Acordeão: Para conteúdo longo, transforme as abas em um layout de acordeão no celular.
• Menu Select: Para abas com muitos utilitários, substitua a lista de abas por um elemento <select> no celular.

Regras de Decisão

• A "Regra dos Rótulos": Se os rótulos variarem significativamente em comprimento, use abas alinhadas à esquerda. Se forem consistentes e poucos, use abas centralizadas ou justificadas.
• Horizontal vs. Vertical:
  • Horizontal: Padrão para organização no topo do conteúdo.
  • Vertical: Melhor para listas profundas (configurações) ou quando o espaço horizontal é limitado, mas o espaço vertical é abundante.
• A "Regra dos Sete": Limite as abas horizontais a 7 itens. Se precisar de mais, reavalie sua arquitetura da informação ou use um layout vertical.
• Indicador Ativo: Sempre use mais do que apenas cor para indicar o estado ativo (ex.: um sublinhado de 2px-3px ou uma mudança de peso de fonte para negrito).

Restrições

• Acessibilidade: Siga o padrão ARIA APG Tabs — role="tablist" no contêiner, role="tab" com aria-selected e aria-controls em cada gatilho, e role="tabpanel" com aria-labelledby apontando de volta para sua aba. Apenas a aba ativa tem tabindex="0"; abas inativas usam tabindex="-1" (tabindex flutuante).
• Modelo de Ativação: Prefira ativação automática (as teclas de seta movem o foco e alternam o conteúdo do painel imediatamente) para painéis rápidos e leves. Use ativação manual (as teclas de seta movem apenas o foco; Enter/Espaço confirma) se a alternância acionar uma requisição de rede cara.
• Navegação por Teclado: Seta Esquerda/Direita (ou Cima/Baixo para abas verticais) move entre as abas; Home/End pula para a primeira/última aba; Tab move o foco para fora da lista de abas para o painel ativo.
• Contraste: Os estados Ativo e Inativo devem atender ao WCAG AA (4,5:1 para texto).
• Responsividade: As abas nunca devem causar rolagem horizontal da página; a própria lista de abas deve lidar com o estouro.

Padrões Comuns de Falha

• Estado Ativo Oculto: Usar uma mudança sutil de cor que é difícil de ver, deixando os usuários inseguros sobre qual seção estão visualizando.
• Salto de Conteúdo: Painéis de aba que variam muito em altura, fazendo o rodapé pular para cima e para baixo enquanto os usuários alternam as abas.
• Uso Indevido para Navegação: Usar abas para linkar para páginas separadas, o que quebra as expectativas dos usuários de alternância instantânea de conteúdo.
• Truncamento no Celular: Cortar os rótulos das abas no celular sem fornecer uma maneira de ver o resto.
• Falta de Estados de Foco: Esquecer de projetar um anel de foco visível para usuários de teclado.

Critérios de Validação

• Todas as abas estão relacionadas ao mesmo contexto.
• O estado ativo é visualmente distinto (mais do que apenas cor).
• Cada gatilho de aba atende pelo menos ao mínimo de alvo de toque WCAG 2.2 24x24px (44x44px preferido).
• Os papéis ARIA (tablist, tab, tabpanel) estão atribuídos corretamente, com aria-selected e tabindex flutuante implementados.
• A navegação por teclado (teclas de seta, Home/End) é suportada de acordo com o padrão ARIA APG Tabs.
• O comportamento responsivo (rolagem, acordeão ou select) está definido.
• Os painéis de conteúdo mantêm uma relação visual consistente com as abas.