Principio 1/1.3 Adaptable/1.3.1-C

De WCAG Wiki
< Principio 1‎ | 1.3 Adaptable
Revisión del 18:15 4 nov 2025 de Admin (discusión | contribs.) (Se ha deshecho la revisión 3316 de Admin (disc.))

1.3.1-C. Estructura lógica de encabezados

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)

  • La información, estructura y relaciones comunicadas a través de la presentación pueden ser determinadas por software o están disponibles como texto.

Comprensión del criterio

Descripción resumida

La página debe tener una jerarquía de encabezados coherente. La secuencia h1 → h2 → h3 debe seguir un orden lógico, sin saltos innecesarios, para que lectores de pantalla y otras ayudas técnicas detecten correctamente la estructura del contenido.

Objetivo

Garantizar que la estructura jerárquica del contenido se puede interpretar y navegar fácilmente mediante software, manteniendo su coherencia incluso con cambios de diseño o formato.

Importancia de cumplir el criterio

Los encabezados son puntos de referencia esenciales. Muchas personas con discapacidad visual navegan únicamente mediante la lista de encabezados. Saltos o desorden en la jerarquía (por ejemplo, pasar de h1 a h3 sin un h2 previo) pueden generar confusión, aumentar la carga cognitiva y dificultar la navegación.

Referencias WCAG

  • H42: Using h1-h6 to identify headings
  • F43: Failure due to incorrect heading structure

Recursos de apoyo

  • Los encabezados deben resumir su contenido asociado y ser breves
  • Evitar saltos de nivel (ej. no pasar de h1 a h3)
  • Debe existir un único h1 como título principal
  • Comprobar que la jerarquía refleja la estructura real del contenido

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

  1. Abrir extensión HeadingsMap para visualizar la jerarquía.
  2. Verificar que la estructura h1 → h2 → h3 es lógica y sin saltos.
  3. Comprobar que existe un único <h1>.
  4. Asegurar que los niveles de encabezado reflejan la estructura real del contenido.

Resultado esperado

La jerarquía de encabezados es correcta, sin saltos de nivel y con un único título principal (<h1>).

Ejemplo ilustrativo

Ejemplo correcto: 
<h1>Título página</h1>
<h2>Sección 1</h2>
<h3>Subsección 1.1</h3>

Ejemplo incorrecto: 

<h1>Título página</h1>
<h3>Subtema mal jerarquizado</h3>


Otras herramientas de evaluación

  • Bookmarklet diagnóstico encabezados:
    Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los encabezados de otras páginas.
    Ver encabezados/títulos
  • Lectores recomendados: JAWS, NVDA, VoiceOver.
  • Inspección del navegador: Revisar si todos los títulos de la página, se muestran bajo código HTML de encabezados ( <h1>-<h6> )










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 1.3.1-C. Estructura lógica de encabezados

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.3_Adaptable/1.3.1-C&oldid=3317»