Sistema de Sumário (ToC)

O que Sistema de Sumário (ToC) faz?

Propósito

O Sistema de Sumário (ToC) fornece uma metodologia para projetar menus de navegação dentro da página que refletem a estrutura de uma única página ou documento. Ele resolve o problema da "fadiga de rolagem" em conteúdos longos ao fornecer um mapa visual constante da hierarquia da página, permitindo que os usuários entendam seu contexto atual e saltem para seções específicas instantaneamente sem perder seu lugar.

Casos de Uso

• Documentação e Guias Técnicos: Navegação por hierarquias profundas de cabeçalhos e subcabeçalhos.
• Artigos Longos e Posts de Blog: Fornecer um roteiro para conteúdos editoriais com mais de 2.000 palavras.
• Landing Pages Complexas: Ajudar os usuários a pular entre as seções de Recursos, Preços e FAQ.
• Páginas Legais e de Políticas: Navegar por cláusulas densas e seções numeradas.
• Hubs de Recursos: Organizar longas listas de links ou ferramentas em uma única página.

Quando NÃO Usar

• Conteúdo Curto (<3 seções): Se toda a página pode ser escaneada em duas rolagens, um ToC adiciona ruído visual desnecessário.
• Navegação Primária do Site: Não use um ToC para navegar entre páginas diferentes; use site-navigation-system.
• Assistentes Lineares: Para processos passo a passo onde o usuário deve seguir uma ordem fixa, use step-progress-system.
• Marketing Minimalista: Quando o objetivo é um fluxo narrativo único e ininterrupto, sem desvios.

Entradas

1. Hierarquia de Cabeçalhos: O mapa das tags <h2> a <h4> na página.
2. Contexto de Layout: O espaço horizontal disponível (Sidebar vs. Inline).
3. Contêiner de Rolagem: A rolagem ocorre no corpo ou em um contêiner específico com overflow?
4. Tokens da Marca: Espaçamento, tipografia e cores do estado "Ativo" do sistema de design.

Saídas

1. Especificação da Anatomia do ToC: Definições visuais para itens de lista, níveis de indentação e o indicador "Ativo".
2. Blueprint do Scroll-Spy: Lógica de como o estado "Ativo" é atualizado conforme o usuário rola.
3. Mapa de Adaptação Responsiva: Como o ToC se transforma de uma sidebar de Desktop para um utilitário Mobile (ex.: Cabeçalho Fixo ou Gaveta Inferior).
4. Especificação de Wayfinding: Definição de comportamentos de rolagem suave e gerenciamento de foco.

Fluxo de Trabalho

1. Auditar o Esboço do Documento

Extraia a estrutura de cabeçalhos. Um ToC limpo depende de uma progressão lógica h1 -> h2 -> h3.

• Nível Primário: Geralmente derivado das tags <h2>.
• Nível Secundário: Derivado das tags <h3> (recuado).
• Nível Terciário: Raramente mostrado no ToC, a menos que o documento seja excepcionalmente denso; considere recolhê-los por padrão.

2. Selecionar o Padrão de Layout

Escolha um arranjo espacial com base no layout da página:

• Sidebar Persistente (Direita/Esquerda): Melhor para telas largas (Desktop). Mantém o mapa visível o tempo todo.
• Sumário Inline: Colocado no topo do artigo. Melhor para conteúdo de comprimento médio ou mobile onde "fixação" não é necessária.
• Cabeçalho Fixo/Barra Flutuante: Uma versão minimizada que aparece somente após rolar além do hero.

3. Estabelecer Hierarquia Visual (Níveis)

Aplique o visual-hierarchy-system para indicar profundidade:

• Indentação: Use padding horizontal consistente (ex.: --space-s por nível) para mostrar relações pai-filho.
• Tipografia: Use um tamanho de fonte menor ou cor mais suave para subníveis (h3) em comparação com níveis primários (h2).
• Indicadores: Use uma "linha de progresso" vertical à esquerda/direita da lista para conectar visualmente os itens.

4. Projetar o Estado Scroll-Spy (Ativo)

O ToC deve permanecer sincronizado com a viewport do usuário:

• O Link Ativo: Destaque o link correspondente à seção atualmente no topo da viewport.
• O Efeito "Linha Ativa": Se estiver usando uma linha vertical, anime um marcador para deslizar até a posição do item ativo.
• Atraso de Feedback: Garanta que o estado ativo seja atualizado rapidamente (<100ms), mas inclua um pequeno buffer para evitar cintilação ao rolar entre cabeçalhos.

5. Planejar Wayfinding Responsivo

Sidebars geralmente desaparecem no mobile; forneça uma alternativa:

• O Gatilho do ToC Mobile: Um botão fixo (ex.: "Nesta seção") no topo ou no final da tela que abre uma gaveta.
• A Revelação Progressiva: Mostre apenas o <h2> atual em uma barra fixa, com um chevron para expandir a lista completa.

Regras de Decisão

• O Limite de "Três Níveis": Nunca mostre mais de 3 níveis de profundidade em um ToC. Se o conteúdo for mais profundo, simplifique o ToC para focar apenas em h2 e h3.
• Indentação sobre Ícones: Use indentação para mostrar hierarquia em vez de marcadores ou ícones, que podem poluir a lista de texto densa.
• Unicidade do Estado Ativo: Apenas UM item no ToC deve estar "Ativo" por vez.
• Limiar de Fixação: O ToC deve se tornar fixo apenas quando atingir o topo da viewport, não imediatamente ao carregar a página.
• Clique para Pular: Clicar em um link do ToC deve usar "Rolagem Suave" para evitar desorientação, e DEVE atualizar o hash da URL (#id-da-secao) para compartilhamento.

Restrições

• Acessibilidade: O ToC deve ser envolvido em um <nav> com aria-label="Índice". O link ativo deve usar aria-current="true" (ou aria-current="location"). Garanta que o anel de foco esteja visível ao navegar com Tab pelos links.
• Contraste: Estados ativo e inativo devem atender aos requisitos WCAG AA (4.5:1).
• Responsividade: No mobile, o ToC não deve sobrepor o texto principal; use uma gaveta ou uma seção alternável.
• Sincronização de Conteúdo: O texto do link no ToC deve corresponder exatamente ao texto do cabeçalho (ou ser uma versão abreviada claramente reconhecível).

Padrões Comuns de Falha

• O Estado "Desatualizado": O ToC destacando a seção errada porque o ponto de gatilho do scroll-spy está configurado muito alto ou muito baixo.
• O Obscurecedor de Conteúdo: Um ToC fixo que sobrepõe o texto que deveria ajudar o usuário a ler.
• Sobrecarga de Profundidade: Mostrar cada h4 e h5, tornando o ToC mais longo que a viewport e exigindo sua própria barra de rolagem (evite barras de rolagem aninhadas).
• IDs Ausentes: Links que não funcionam porque os cabeçalhos não possuem atributos id correspondentes.
• Botão Voltar Quebrado: Pular para uma seção sem atualizar o hash da URL, impedindo os usuários de usar o botão "Voltar" do navegador para retornar ao ToC.

Critérios de Validação

• Existe uma hierarquia visual clara (indentação) entre os níveis h2 e h3.
• O scroll-spy destaca corretamente a seção ativa conforme o usuário rola.
• Clicar em um link aciona uma rolagem suave para a seção correta.
• O hash da URL é atualizado ao clicar em um link do ToC.
• O ToC está envolvido em um marco <nav aria-label="Índice">.
• O estado ativo é acessível via aria-current.
• Um padrão de wayfinding específico para mobile (ex.: Gaveta ou Barra Fixa) está definido.
• Não são exibidos mais de 3 níveis de hierarquia.