Principio 2/2.4 Navegable/2.4.2-A
De WCAG Wiki
< Principio 2 | 2.4 Navegable
2.4.2-A. Título descriptivo de página
- Nivel: A
- Versión: 2.0
- Principio: 2_Operable
- Pauta: 2.4_Navegable
- Grupo: Navegación
- Subgrupo: Estructura
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Visual total –
Barrera grave
-
Sordoceguera
–
Barrera grave
-
Cognitiva –
Barrera moderada
-
Motriz –
Barrera leve
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
Sin recursos
Evaluación del criterio
Tipo de evaluación
Evaluación Semiautomática
Procedimiento de evaluación
- Paso 1.
Comprobar el texto que se muestra como título de la pestaña activa; este texto se corresponde con el contenido del elemento
<title>de la página. - Paso 2. Verificar que existe este título (si no, se mostraría la URL) y que describe de manera adecuada el cometido de la página.
Resultado esperado
La página tiene un título descriptivo, único y relacionado con su contenido.
Ejemplo ilustrativo
<head> <title>Contacto | Universidad de Ejemplo</title> </head>
Otras herramientas de evaluación
- Bookmarklet:
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver los títulos de otras páginas.
Ver el titulo de la página -
Inspección del navegador: comprobar en el código que existe un elemento
<title>en la sección<head>y que su contenido es descriptivo y único para esa página. - Verificación en la pestaña del navegador: revisar el título mostrado en la barra/pestaña y confirmar que refleja claramente el contenido o propósito de la página.
- Lectores de pantalla: (NVDA, JAWS, VoiceOver) iniciar la lectura de la página para confirmar que el título se anuncia correctamente.
- Validadores: usar herramientas como W3C HTML Validator o extensiones de accesibilidad para detectar ausencia o duplicación del elemento
<title>.
Ejemplos accesibles y no accesibles creados por alumnos
<!DOCTYPE html>
⚠️ 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>
✅ 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
✅ 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...
