Principio 2/2.4 Navegable/2.4.5-C

De WCAG Wiki

2.4.5-C. Tabla de contenidos en documentos extensos

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • En los documentos extensos, se debe proporcionar una tabla de contenidos con enlaces que permitan navegar directamente a las diferentes secciones del documento.

Comprensión del criterio

Descripción resumida

Los documentos largos deben incluir una tabla de contenidos o índice con enlaces internos que permitan saltar directamente a cada sección, facilitando la navegación y evitando desplazamientos largos.

Objetivo

Facilitar el acceso rápido y organizado a secciones específicas dentro de documentos extensos, reduciendo la carga cognitiva y mejorando la orientación en la lectura y navegación.

Importancia de cumplir el criterio

Sin una tabla de contenidos, los usuarios deben recorrer grandes cantidades de información para encontrar el contenido relevante. Esto puede generar desorientación, sobrecarga cognitiva y barreras para quienes dependen del teclado o lector de pantalla.

Referencias WCAG

  • W3C WCAG 2.2 – Success Criterion 2.4.5 Multiple Ways
  • Understanding 2.4.5: Multiple Ways (W3C)
  • Guía Técnica WCAG — Principio Operable (documento aportado)

Recursos de apoyo

  • Patrones accesibles de tabla de contenidos
  • Uso de encabezados semánticos y landmarks
  • Anclas internas y navegación por secciones

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Verificar que el documento es extenso (estructura compleja, varias secciones).
  2. Paso 2. Comprobar que existe una tabla de contenidos o índice al inicio.
  3. Paso 3. Confirmar que los enlaces llevan correctamente a las secciones correspondientes.
  4. Paso 4. Revisar la estructura semántica (encabezados `

    `–`

    `, landmarks).
  5. Paso 5. Evaluar con lector de pantalla para asegurar navegación clara entre secciones.

Resultado esperado

El documento ofrece una tabla de contenidos funcional que enlaza a todas las secciones principales, permitiendo navegación rápida y clara.

Ejemplo ilustrativo

✅ Ejemplo accesible: tabla de contenidos 

<nav aria-label="Tabla de contenidos">
  <ul>
    <li><a href="#introduccion">Introducción</a></li>
    <li><a href="#capitulo1">Capítulo 1: Accesibilidad</a></li>
    <li><a href="#capitulo2">Capítulo 2: Diseño</a></li>
  </ul>
</nav>


Otras herramientas de evaluación

  • Validación manual de anclas internas
  • Navegación por encabezados (H1-H6)
  • JAWS, NVDA y VoiceOver
  • Scroll y navegación por teclado










Ejemplos accesibles y no accesibles creados por alumnos

<!DOCTYPE html> Formulario de Reserva - NO Accesible 3.3.2-C

⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras

Reserva de Hotel

⚠️ Problemas de este formulario:
  • No hay etiquetas <label> para ningún campo
  • Algunos placeholders son ambiguos ("Código" - ¿qué código?)
  • No se indica qué campos son obligatorios
  • No hay instrucciones sobre el formato esperado
  • El select dice "Selecciona" pero ¿seleccionar qué?
  • Un campo no tiene ni placeholder ni etiqueta (campo de email)
  • No hay indicación de formato de fecha específico
  • No se explica para qué sirve cada campo

<!DOCTYPE html> Formulario de Reserva - ACCESIBLE 3.3.2-C

✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras

Reserva de Hotel

Complete el siguiente formulario para reservar su estadía

Nota: Los campos marcados con * son obligatorios

Ingrese su nombre tal como aparece en su documento de identidad

Enviaremos la confirmación de reserva a este correo

Incluya el código de país (Ej: +34 para España)

¿Cuántas personas se alojarán?

Formato: DD/MM/AAAA (Ej: 15/02/2025)

Formato: DD/MM/AAAA (Ej: 20/02/2025)

Seleccione el tipo de habitación que prefiere

Si tiene un código promocional, ingréselo aquí

Indique cualquier necesidad especial o preferencia (cama extra, piso bajo, accesibilidad, etc.)

✅ Implementación correcta:
  • Cada campo tiene una etiqueta <label> clara asociada
  • Los campos obligatorios están claramente marcados con *
  • Hay instrucciones específicas sobre formato y contenido esperado
  • Los selectores tienen opciones descriptivas, no ambiguas
  • Se explica el propósito de cada campo cuando no es obvio
  • Se proporcionan ejemplos en los placeholders
  • Hay una nota inicial explicando la convención de campos obligatorios
  • Se usan atributos ARIA apropiados (aria-required, aria-describedby)

Comentarios

A continuación se muestran comentarios sobre el criterio 2.4.5-C. Tabla de contenidos en documentos extensos

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.4_Navegable/2.4.5-C&oldid=3472»