Diferencia entre revisiones de «Principio 2/2.4 Navegable/2.4.6-A»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 61: Línea 61:


|wcag_tipo_evaluacion=Manual
|wcag_tipo_evaluacion=Manual
|wcag_pasos_evaluacion=
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi Heading Maps].'''
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi Heading Maps].'''


|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
<li><span class="paso-badge">Paso 1.</span>

Revisión del 22:50 5 nov 2025

2.4.6-A. Encabezados descriptivos

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)

  • Los encabezados usados en la página deben identificar el contenido de la sección que encabezan.

Comprensión del criterio

Descripción resumida

Los encabezados de sección deben comunicar claramente el contenido que presentan, facilitando la orientación, lectura y escaneo rápido de la página.

Objetivo

Permitir que los usuarios identifiquen rápidamente la estructura y propósito de cada sección sin leer todo el contenido.

Importancia de cumplir el criterio

Una jerarquía clara y encabezados descriptivos ayudan a las personas con discapacidad cognitiva, usuarios de lectores de pantalla y quienes escanean visualmente la información para localizar contenido relevante sin esfuerzo.

Referencias WCAG

Recursos de apoyo

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

Usa la herramienta de Heading Maps.
  1. Paso 1. Visualizar la estructura de encabezados que identifica la herramienta.
  2. Paso 2. Verificar que los elementos identificados como encabezados:
    • a. Identifican la sección de contenido que encabezan.
    • b. Son claros y breves.

Resultado esperado

Los encabezados describen adecuadamente su contenido, siguen un orden jerárquico correcto y permiten comprender y navegar la página con facilidad.

Ejemplo ilustrativo

Encabezados descriptivos y estructurados. 

<section>
<h1>Guía de solicitud de becas</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<h2>Requisitos para aplicar</h2>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h3>Documentación necesaria</h3>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
</section>


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
  • Inspección del contenido: revisar que los encabezados (<h1>–<h6>) describen claramente el contenido de la sección que introducen.
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) usar navegación por encabezados para confirmar que cada título tiene sentido fuera de contexto y guía adecuadamente al usuario.
  • Inspección del DOM: verificar que los encabezados se usan para estructurar el contenido y no solo para aplicar estilos visuales.
  • Revisión editorial: comprobar que los encabezados no son genéricos o ambiguos (p. ej. “Más” o “Información”) cuando puede utilizarse un texto más claro.










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.6-A. Encabezados descriptivos

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.4_Navegable/2.4.6-A&oldid=3539»