Sistema de Tabla de Contenidos (ToC)

¿Qué hace Sistema de Tabla de Contenidos (ToC)?

Propósito

El Sistema de Tabla de Contenidos (ToC) proporciona una metodología para diseñar menús de navegación dentro de la página que reflejan la estructura de una sola página o documento. Resuelve el problema de la "fatiga de desplazamiento" en contenido extenso al ofrecer un mapa visual constante de la jerarquía de la página, permitiendo a los usuarios comprender su contexto actual y saltar a secciones específicas al instante sin perder su lugar.

Casos de Uso

• Guías Técnicas y Documentación: Navegación por jerarquías profundas de encabezados y subencabezados.
• Artículos y Publicaciones Largas: Proporcionar una hoja de ruta para contenido editorial de más de 2000 palabras.
• Páginas de Aterrizaje Complejas: Ayudar a los usuarios a saltar entre las secciones de Funciones, Precios y Preguntas Frecuentes.
• Páginas Legales y de Políticas: Navegar por cláusulas densas y secciones numeradas.
• Centros de Recursos: Organizar listas largas de enlaces o herramientas en una sola página.

Cuándo NO Usarlo

• Contenido Corto (<3 secciones): Si toda la página se puede escanear en dos desplazamientos, un ToC añade ruido visual innecesario.
• Navegación Principal del Sitio: No usar un ToC para moverse entre diferentes páginas; usar en su lugar site-navigation-system.
• Asistentes Lineales: Para procesos paso a paso donde el usuario debe seguir un orden fijo, usar step-progress-system.
• Marketing Minimalista: Cuando el objetivo es un flujo narrativo único e ininterrumpido sin desviaciones.

Entradas

1. Jerarquía de Encabezados: El mapa de etiquetas <h2> a <h4> en la página.
2. Contexto de Diseño: El espacio horizontal disponible (Barra lateral vs. En línea).
3. Contenedor de Desplazamiento: ¿El desplazamiento ocurre en el cuerpo o en un contenedor desbordado específico?
4. Tokens de Marca: Espaciado, tipografía y colores del estado "Activo" del sistema de diseño.

Salidas

1. Especificación de Anatomía del ToC: Definiciones visuales para elementos de lista, niveles de sangría y el indicador "Activo".
2. Plano del Scroll-Spy: Lógica de cómo se actualiza el estado "Activo" mientras el usuario se desplaza.
3. Mapa de Adaptación Responsiva: Cómo se transforma el ToC de una barra lateral de escritorio a una utilidad móvil (por ejemplo, Encabezado Fijo o Cajón Inferior).
4. Especificación de Orientación: Definición de comportamientos de desplazamiento suave y gestión del foco.

Flujo de Trabajo

1. Auditar el Esquema del Documento

Extraer la estructura de encabezados. Un ToC limpio depende de una progresión lógica h1 -> h2 -> h3.

• Nivel Primario: Generalmente derivado de las etiquetas <h2>.
• Nivel Secundario: Derivado de las etiquetas <h3> (con sangría).
• Nivel Terciario: Raramente se muestra en el ToC a menos que el documento sea excepcionalmente denso; considerar contraerlos por defecto.

2. Seleccionar el Patrón de Diseño

Elegir una disposición espacial según el diseño de la página:

• Barra Lateral Persistente (Derecha/Izquierda): Mejor para pantallas anchas (Escritorio). Mantiene el mapa visible en todo momento.
• Resumen en Línea: Colocado al principio del artículo. Mejor para móviles o contenido de longitud media donde no se requiere "pegajosidad".
• Encabezado Fijo/Barra Flotante: Una versión minimizada que aparece solo después de desplazarse más allá del hero.

3. Establecer la Jerarquía Visual (Niveles)

Aplicar el visual-hierarchy-system para indicar la profundidad:

• Sangría: Usar un relleno horizontal consistente (por ejemplo, --space-s por nivel) para mostrar las relaciones padre-hijo.
• Tipografía: Usar un tamaño de fuente más pequeño o un color atenuado para los subniveles (h3) en comparación con los niveles primarios (h2).
• Indicadores: Usar una "línea de progreso" vertical a la izquierda/derecha de la lista para conectar visualmente los elementos.

4. Diseñar el Estado Scroll-Spy (Activo)

El ToC debe permanecer sincronizado con el viewport del usuario:

• El Enlace Activo: Resaltar el enlace correspondiente a la sección que está actualmente en la parte superior del viewport.
• El Efecto de "Línea Activa": Si se usa una línea vertical, animar un marcador para que se deslice a la posición del elemento activo.
• Retardo de Retroalimentación: Asegurar que el estado activo se actualice rápidamente (<100 ms), pero incluya un pequeño búfer para evitar parpadeos al desplazarse entre encabezados.

5. Planificar la Orientación Responsiva

Las barras laterales suelen desaparecer en móviles; proporcionar una alternativa:

• El Disparador del ToC Móvil: Un botón fijo (por ejemplo, "En esta sección") en la parte superior o inferior de la pantalla que abre un cajón.
• La Revelación Progresiva: Mostrar solo el <h2> actual en una barra fija, con un cheurón para expandir la lista completa.

Reglas de Decisión

• El Límite de "Tres Niveles": Nunca mostrar más de 3 niveles de profundidad en un ToC. Si el contenido es más profundo, simplificar el ToC para centrarse solo en h2 y h3.
• Sangría sobre Iconos: Usar sangría para mostrar la jerarquía en lugar de viñetas o iconos, que pueden saturar la lista de texto densa.
• Unicidad del Estado Activo: Solo UN elemento en el ToC debe estar "Activo" a la vez.
• Umbral de Fijación: El ToC debe volverse fijo solo cuando alcance la parte superior del viewport, no inmediatamente al cargar la página.
• Clic para Saltar: Al hacer clic en un enlace del ToC, se debe utilizar "Desplazamiento Suave" para evitar la desorientación, y DEBE actualizar el hash de la URL (#id-seccion) para facilitar su uso compartido.

Restricciones

• Accesibilidad: El ToC debe estar envuelto en un <nav> con aria-label="Tabla de contenidos". El enlace activo debe usar aria-current="true" (o aria-current="location"). Asegurar que el anillo de enfoque sea visible al navegar con tabulador por los enlaces.
• Contraste: Los estados activo e inactivo deben cumplir con los requisitos WCAG AA (4.5:1).
• Capacidad de Respuesta: En móviles, el ToC no debe superponerse al texto principal; usar un cajón o una sección conmutable.
• Sincronización de Contenido: El texto del enlace en el ToC debe coincidir exactamente con el texto del encabezado (o ser una versión abreviada claramente reconocible).

Patrones de Falla Comunes

• El Estado "Obsoleto": El ToC resalta la sección incorrecta porque el punto de activación del scroll-spy está configurado demasiado arriba o demasiado abajo.
• El Obstructor de Contenido: Un ToC fijo que se superpone al texto que se supone debe ayudar a leer al usuario.
• Sobrecarga de Profundidad: Mostrar cada h4 y h5, haciendo que el ToC sea más largo que el viewport y requiera su propia barra de desplazamiento (evitar barras de desplazamiento anidadas).
• IDs Faltantes: Enlaces que no funcionan porque los encabezados carecen de atributos id coincidentes.
• Botón Atrás Roto: Saltar a una sección sin actualizar el hash de la URL, impidiendo que los usuarios usen el botón "Atrás" del navegador para volver al ToC.

Criterios de Validación

• Existe una jerarquía visual clara (sangría) entre los niveles h2 y h3.
• El scroll-spy resalta correctamente la sección activa mientras el usuario se desplaza.
• Al hacer clic en un enlace se activa un desplazamiento suave a la sección correcta.
• El hash de la URL se actualiza al hacer clic en un enlace del ToC.
• El ToC está envuelto en un punto de referencia <nav aria-label="Tabla de contenidos">.
• El estado activo es accesible mediante aria-current.
• Se define un patrón de orientación específico para móviles (por ejemplo, Cajón o Barra Fija).
• Se muestran como máximo 3 niveles de jerarquía.