Principio 2/2.4 Navegable/2.4.2-A

De WCAG Wiki

2.4.2-A. Título descriptivo de página

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 página web debe tener un título descriptivo mediante el elemento <title>.

Comprensión del criterio

Descripción resumida

Cada página debe incluir un título claro, conciso y útil que describa su contenido o propósito.

Objetivo

Ayudar a los usuarios a identificar rápidamente el propósito de la página, facilitar la navegación y la orientación dentro del sitio.

Importancia de cumplir el criterio

Los títulos permiten diferenciar páginas abiertas, entender su contenido antes de navegar y orientarse al cambiar entre pestañas o ventanas, especialmente con lectores de pantalla.

Referencias WCAG

Recursos de apoyo

Evaluación del criterio

Tipo de evaluación

Evaluación Automática_y_manual

Procedimiento de evaluación

  1. Confirmar que la página incluye <title> en <head>.
  2. Verificar que el título describe adecuadamente el contenido o propósito.
  3. Comprobar que los títulos son únicos entre páginas similares.
  4. Validar lectura correcta del título con lector de pantalla.

Resultado esperado

La página tiene un título descriptivo, único y relacionado con su contenido.

Ejemplo ilustrativo

✅ Correcto 

<head>
  <title>Contacto | Universidad de Ejemplo</title>
</head>

❌ Incorrecto 

<head>
  <title>Página web</title>
</head>


Otras herramientas de evaluación

  • Validadores HTML
  • AXE, WAVE, Accessibility Insights
  • NVDA, JAWS, VoiceOver
  • Inspección visual en pestañas del navegador










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.2-A. Título descriptivo de página

Loading comments...




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