Tabs
Resumo
Um elemento de UI que permite aos usuários visualizar seletivamente um único painel de conteúdo entre uma lista de opções disponíveis (tabs/abas).
Elas facilitam a navegação do usuário entre conjuntos de informações que partilham o mesmo contexto, proporcionando uma experiência de interface mais intuitiva e estruturada.
Anatomia
Label: O título ou rótulo que identifica o conteúdo da aba.
Grupo de Tabs: O conjunto que reúne todas as opções de abas disponíveis.
Indicador de Seleção: Um sinal visual que mostra qual aba está ativa; embora frequentemente seja uma barra, pode assumir diversas formas.
Painel de Conteúdo: A área que exibe as informações relacionadas à aba selecionada.
Além desses itens básicos, é comum a inclusão de elementos extras para facilitar a navegação
Ícones, elementos de ação (adicionar, fechar ou renomear) e a funcionalidade de reordenar (Drag and Drop), embora esta última seja menos frequente em layouts horizontais.
Estilos
Linha
O estilo de tabulação em linha é menos contido do que o estilo de borda e, possivelmente, mais moderno.
Fronteira
O estilo da borda contém claramente o conteúdo a ela pertencente.
Orientado para cima
As abas orientadas para cima são o tipo mais comum que você provavelmente encontrará na internet. Esse posicionamento permite que o usuário examine rapidamente o que está procurando.
Alinhado à esquerda
Quando há muitas abas , as abas alinhadas à esquerda são frequentemente usadas em vez de abas alinhadas ao topo, pois geralmente há mais espaço vertical disponível do que espaço horizontal.
Variações
In-page tabs
Organiza e apresenta conteúdo relacionado em uma única página. Essas abas não são para navegação, mas permitem que usuários alterem o conteúdo exibido.
Tabs de navegação
Permite que os usuários naveguem entre páginas diferentes. Utiliza o mesmo estilo das tabs, mas como controle de navegação
Diferenças
Tabs de navegação | In-page tabs | |
Conteúdo | Abrangente, não relacionado, diferente | Relacionado, similar |
|---|---|---|
Localização | Desktop
Mobile
| Várias, pois são colocadas dentro de uma página |
Posição de rolagem | Geralmente fixaa no topo ou rodapé da viewport | Raramente fixa |
Expectativa do usuário | Navegar para outra página | Permanecer na página atual |
Tab selecionada padrão | Geralmente uma por padrão, mas se a página atual não estiver sob uma tab, não será exibida na lista como selecionada | Sempre uma tab selecionada por padrão |
In-page tabs vs Segmented Controls
Embora as abas e os controles segmentados possam servir ao mesmo propósito de selecionar uma visualização, os itens em um Segmented Control estão sempre conectados pela trilha.
Outro ponto é que o segmented control troca a visualização de um conjunto de dados de um mesmo contexto, enquanto tabs trocam entre painéis de conteúdo relacionado mas distinto.
Quando usar
Quando extensos conteúdos tem grupos claros
Quando há poucos agrupamentos de conteúdos
Quando o conteúdo tem importância desigual
Quando o conteúdo pode ser rotulado de forma concisa
Quando devem manter os usuários na mesma página
Boas práticas
Textos simples
Os rótulos das abas devem ser sempre o mais fáceis de entender possível. Evite ícones e jargões. Em uma etiqueta de aba, o espaço é limitado . Para otimizar o espaço, utilize apenas uma ou duas palavras.
Caso da frase
Usar apenas letras maiúsculas dificulta a leitura dos títulos das abas pelos usuários. Além disso, aumenta o tamanho do componente da aba, tornando mais difícil incluir todo o conteúdo.
Ao selecionar
Quando uma aba é selecionada, o conteúdo associado a ela deve ficar visível para o usuário .
Acessibilidade
A
A aba ativa não pode ser distinguida das inativas apenas por cor (WCAG 1.4.1).
Todo ícone com função dentro das tabs precisa de um nome textual equivalente (WCAG 1.1.1).
Nenhuma instrução ou referência a uma aba pode depender só de característica sensorial — posição ou cor (WCAG 1.3.3).
Nas tabs de navegação, o rótulo precisa deixar claro o destino (WCAG 2.4.4).
AA
O rótulo de cada aba precisa de contraste de pelo menos 4.5:1 contra o fundo (WCAG 1.4.3).
O indicador de seleção e as bordas (no estilo com fronteira) precisam de pelo menos 3:1 contra a cor adjacente (WCAG 1.4.11).
Cada aba precisa de área de toque de no mínimo 24×24px (WCAG 2.5.8).
O indicador de foco precisa estar visível em cada aba alcançada por teclado (WCAG 2.4.7).
Ao receber foco, a aba não pode ficar escondida atrás de outro elemento (WCAG 2.4.11).
Quando há muitas abas numa tela estreita, o conjunto precisa caber em 320px sem perder conteúdo (WCAG 1.4.10).
AAA
O rótulo das abas com contraste de 7:1 contra o fundo (WCAG 1.4.6).
Cada aba, e o botão de fechar, com área de toque de no mínimo 44×44px (WCAG 2.5.5).
O indicador de foco com espessura equivalente a um perímetro de 2px ao redor da aba e contraste de 3:1 entre focado e não-focado (WCAG 2.4.13).
Referências
https://componentes.design/aulas/tabs