La guía completa de accesibilidad para marcadores, tablas de contenido y encabezados: cómo construir estructuras que sean “encontrables, navegables y nunca confusas” en textos largos, documentos y PDF/HTML (WCAG 2.1 AA)

Resumen ejecutivo (puntos clave primero)

• Aunque un texto largo o un documento tenga un contenido excelente, resulta ilegible si no se puede encontrar. La clave de la accesibilidad es no hacer que las personas se pierdan por culpa de la estructura.
• En HTML, el conjunto básico es jerarquía de encabezados (h1 → h2 → h3) + tabla de contenido de la página (ToC) + enlaces de salto + landmarks. En PDF, es estructura etiquetada + marcadores + orden de lectura.
• Los enlaces de la ToC no solo deben saltar a algún lugar; también deben asegurar que el foco aterrice correctamente tras la navegación, para que las personas usuarias de teclado no pierdan su posición.
• Los nombres de las secciones deben estandarizarse con “frases nominales que indiquen claramente el contenido”, y no se deben reutilizar en exceso las mismas palabras vagas (una explosión de encabezados como “Resumen”, “Detalles” u “Otros” es peligrosa).
• Este artículo incluye métodos de redacción en HTML/Markdown, ejemplos de implementación de ToC, guía para marcadores en PDF y una checklist operativa editorial.

Lectores previstos (específicos): editores, redactores, responsables de documentación, personal de documentos municipales/sector público, creadores de contenido educativo, ingenieros frontend, diseñadores UI/UX, personal de QA/revisión
Nivel objetivo de accesibilidad: cumplimiento WCAG 2.1 AA (relacionado con: 1.3.1, 2.4.1, 2.4.2, 2.4.6, 2.4.10, 2.4.7, etc.)

1. Introducción: la razón por la que el contenido largo no se lee no es “porque es difícil”, sino “porque es difícil encontrarlo”

El texto largo, por sí solo, cansa a quien lee. Y en smartphones, durante desplazamientos, entre tareas de trabajo o cuando una persona no se siente bien, normalmente primero quiere saltar a la parte que necesita antes que leerlo todo.
Las personas usuarias de lector de pantalla, en particular, exploran páginas mediante listas de encabezados y listas de landmarks. Si faltan encabezados, puede que no tengan otra opción que escuchar eternamente el contenido leído en voz alta. Las personas usuarias de teclado, si no pueden llegar a la sección que quieren mediante una tabla de contenido, terminan repitiendo desplazamientos y navegación con Tab.
En otras palabras, la accesibilidad del contenido largo no puede lograrse solo con “buena redacción”. La estructura (encabezados, tabla de contenido, marcadores) crea la libertad de la persona lectora. Este artículo explica, de forma práctica, cómo construir estructuras que sean “encontrables, navegables y no confusas” tanto en HTML como en PDF.

2. El conjunto básico en HTML: jerarquía de encabezados + tabla de contenido + enlaces de salto + landmarks

2.1 La jerarquía de encabezados es la “escala del mapa”

• h1: el tema principal de la página (solo uno)
• h2: capítulos/secciones principales
• h3: subsecciones
• h4: subtítulos menores (si es necesario)

Elige los encabezados por significado, no por tamaño visual. El diseño siempre puede ajustarse con CSS, así que los encabezados HTML deben decidirse lógicamente.

Ejemplo (jerarquía natural)

<h1>Accesibilidad de marcadores y tablas de contenido</h1>

<h2>Diseño en HTML</h2>
<h3>Jerarquía de encabezados</h3>
<h3>Tabla de contenido de la página</h3>

<h2>Diseño en PDF</h2>
<h3>PDF etiquetados</h3>
<h3>Marcadores</h3>

2.2 Tabla de contenido de la página (ToC): da primero los “destinos”

Una tabla de contenido reduce la ansiedad de la persona lectora en documentos largos. Tener un breve resumen y una ToC cerca del inicio ayuda a estabilizar el ritmo de lectura.

<nav aria-label="Tabla de contenido de la página">
  <ol>
    <li><a href="#sec-html">Diseño en HTML</a></li>
    <li><a href="#sec-pdf">Diseño en PDF</a></li>
    <li><a href="#sec-check">Checklist</a></li>
  </ol>
</nav>

<h2 id="sec-html" tabindex="-1">Diseño en HTML</h2>

Puntos clave:

• Usa nav aria-label para identificar claramente que se trata de una tabla de contenido
• Añade un id al encabezado de destino
• Añadir tabindex="-1" facilita colocar el foco en el encabezado después de saltar mediante un enlace, de modo que las personas usuarias de teclado no pierdan su posición

2.3 Enlaces de salto: ve directamente a la tabla de contenido

En sitios con encabezados largos, resulta útil no solo ofrecer “Saltar al contenido”, sino también “Saltar a la tabla de contenido”.

<a class="skip" href="#toc">Saltar a la tabla de contenido</a>
<nav id="toc" aria-label="Tabla de contenido de la página">…</nav>

2.4 Landmarks: el “mapa exterior” alrededor de los encabezados

Si header/nav/main/footer están correctamente estructurados, las personas usuarias de lector de pantalla pueden navegar a través de landmarks, haciendo mucho menos probable perderse incluso en contenido largo.

3. Accesibilidad de los enlaces de la ToC: no solo saltar, sino crear un “aterrizaje” correcto

3.1 El problema de que los encabezados fijos oculten los títulos

Cuando un enlace interno de página salta a una sección, un encabezado fijo puede tapar el título de destino. Eso crea una situación de “has llegado, pero no puedes ver dónde”, que resulta cognitivamente inquietante.

:target { scroll-margin-top: 6rem; }

3.2 Crear un punto de aterrizaje de foco (recomendado)

Si JavaScript coloca el foco en el encabezado, tanto los anuncios del lector de pantalla como la orientación se vuelven más estables.

document.addEventListener('click', (e)=>{
  const a = e.target.closest('a[href^="#"]');
  if(!a) return;
  const id = a.getAttribute('href').slice(1);
  const target = document.getElementById(id);
  if(target){
    target.setAttribute('tabindex','-1');
    target.focus({preventScroll:true});
  }
});

Si tabindex="-1" ya está presente, no hace falta añadirlo otra vez.

4. Nombres de secciones: los títulos afectan tanto a la búsqueda como a la salida del lector de pantalla

La redacción de los encabezados afecta a las listas de encabezados de los lectores de pantalla y también a la búsqueda. Un buen conjunto de reglas es el siguiente.

4.1 Usa frases nominales que indiquen claramente el contenido

• Bien: “Cómo corregir errores”, “Ayuda para la entrada en formularios”, “Cómo crear PDF etiquetados”
• Mal: “Resumen”, “Detalles”, “Otros”, “Puntos”

Cuantas más palabras abstractas uses, menos útil se vuelve la tabla de contenido.

4.2 No reutilices demasiado la misma palabra

Si los encabezados continúan como “Configuración”, “Configuración”, “Configuración…”, se vuelven imposibles de distinguir en una lista de encabezados.
En su lugar, añade el objeto o propósito, por ejemplo:

• “Configuración de notificaciones”
• “Configuración de privacidad”
• “Configuración de pantalla”

5. Operaciones en Markdown: decidir “reglas editoriales” para encabezados y tablas de contenido

Markdown es conveniente en CMS y flujos de trabajo basados en Git, pero sin reglas editoriales la estructura de encabezados se rompe fácilmente.

5.1 Reglas recomendadas de encabezados para Markdown

• Usa # solo una vez (para h1)
• Usa ## para capítulos/secciones principales (h2)
• Usa ### para subsecciones (h3)
• Coloca la tabla de contenido inmediatamente después del primer ## en contenido largo

5.2 No dependas demasiado de las ToC generadas automáticamente

Las tablas de contenido automáticas son útiles, pero la legibilidad cae cuando:

• los encabezados son demasiado largos
• aparecen repetidamente los mismos encabezados

Puede ser muy eficaz incluir manualmente en la tabla de contenido solo las secciones importantes.

6. Marcadores en PDF: solo quedan completos cuando se combinan con estructura etiquetada

Los marcadores en PDF cumplen el mismo papel que una tabla de contenido en HTML. Sin embargo, en los PDF, los marcadores por sí solos no bastan. Deben combinarse con estructura de PDF etiquetado.

6.1 ¿Por qué son útiles los marcadores?

• Puedes moverte instantáneamente a un capítulo
• Las personas usuarias de lector de pantalla pueden entender mejor la estructura del documento
• Los documentos largos se vuelven navegables como “buscar → leer”

6.2 Condiciones para unos buenos marcadores

• Coinciden con la estructura de encabezados
• La jerarquía no es demasiado profunda (2–3 niveles es una buena guía)
• Las etiquetas son cortas y específicas (no solo “Capítulo 1”, sino algo con palabras de contenido real)
• Se nombran por contenido, no por número de página

6.3 Añadir marcadores a un PDF no etiquetado tiene límites claros

Los marcadores son una herramienta de navegación, pero si el propio PDF no está etiquetado, el orden de lectura y la estructura de párrafos pueden seguir rotos.
El enfoque estándar para la accesibilidad en PDF es: etiquetas de estructura → orden de lectura → marcadores.

7. Crear “destinos de salto” para tablas y figuras: evitar confusión dentro de documentos largos

En artículos largos, las figuras, tablas y ejemplos de código suelen estar dispersos.
Un buen enfoque es proporcionar, por separado de la ToC principal, una lista de “elementos frecuentemente referenciados en esta página”.

Ejemplos:

• Índice de ejemplos de código
• Lista de figuras/tablas
• Enlaces directos a checklists

Este tipo de “índice” es especialmente útil para personas con diferencias cognitivas.

8. Errores comunes y correcciones

9. Prueba rápida de 5 minutos: comprobaciones mínimas para ToC, marcadores y encabezados

HTML (artículos/páginas)

1. Hay un h1, y la secuencia h2 → h3 es natural
2. Existe una tabla de contenido, y sus enlaces pueden seguirse con teclado
3. Tras saltar mediante un enlace de la ToC, el encabezado es visible y no queda oculto (scroll-margin)
4. La nueva posición queda clara tras la navegación (mediante foco o énfasis visual)
5. La redacción de los encabezados es específica y significativa en una lista
6. Los enlaces de salto pueden llegar al contenido / tabla de contenido (cuando corresponda)

PDF (documentos)

1. El texto puede seleccionarse (no es solo una imagen escaneada)
2. Está etiquetado y contiene estructura de encabezados
3. Los marcadores permiten moverse a los capítulos
4. El orden de lectura es natural (por ejemplo, sin romperse en diseños de dos columnas)
5. Las tablas y figuras tienen información alternativa cuando es necesaria

10. Valor para el público previsto (específico)

• Personas usuarias de lector de pantalla: pueden moverse instantáneamente a su destino mediante listas de encabezados y marcadores, reduciendo enormemente la carga de lectura.
• Personas usuarias de teclado: los enlaces de la ToC junto con un aterrizaje correcto del foco les ayudan a no perder su lugar.
• Personas con diferencias cognitivas: los capítulos y los índices facilitan comprender la estructura general y generan tranquilidad.
• Personas mayores / usuarias de zoom: incluso con ampliación, sigue estando claro dónde están leyendo y es fácil volver a las secciones necesarias.
• Equipos editoriales y de operaciones: con reglas claras de encabezados, la calidad se vuelve más estable a medida que crece el contenido, y también mejoran el SEO y la búsqueda interna.

11. Evaluación del nivel de accesibilidad (lo que este artículo busca lograr)

• Criterios principales relacionados con WCAG 2.1 AA
  • 1.3.1 Información y relaciones: estructura mediante encabezados, listas y landmarks
  • 2.4.1 Evitar bloques: enlaces de salto y rutas de navegación abreviadas mediante ToC
  • 2.4.2 Página titulada: identificación del documento
  • 2.4.6 Encabezados y etiquetas: encabezados específicos y consistentes
  • 2.4.10 Encabezados de sección (AAA): importante en la práctica incluso cuando se apunta a AA
  • 2.4.7 Foco visible: mantener la orientación tras saltos desde la ToC
• En el lado PDF, la estructura etiquetada más los marcadores pueden elevar significativamente la calidad de accesibilidad de documentos distribuidos en la web.

12. Conclusión: la estructura crea la libertad de la persona lectora

1. El contenido largo no puede leerse a menos que esté estructurado para que pueda encontrarse. Los encabezados y las tablas de contenido son el centro de la accesibilidad.
2. En HTML, sigue h1 → h2 → h3 y crea la ruta más corta con una ToC y enlaces de salto.
3. Los enlaces de la ToC no solo deben saltar, sino también proporcionar un aterrizaje correcto tras la llegada (scroll-margin / foco).
4. Los nombres de los encabezados deben ser concretos. La proliferación de etiquetas vagas destruye la utilidad de la ToC.
5. En PDF, el conjunto básico es estructura etiquetada + orden de lectura + marcadores.
6. Añade una prueba rápida de 5 minutos a tu flujo editorial para que las actualizaciones no creen más personas lectoras perdidas.

Los marcadores y las tablas de contenido son funciones silenciosas, pero para quien lee son una gran ayuda.
Demos forma juntos a esa “amabilidad invisible” llamada estructura, para que tu contenido pueda llegar a las personas que lo necesitan, justo donde lo necesitan.