2.4.2 Página titulada
Criterio de éxito oficial
Las páginas web tienen títulos que describen el tema o el propósito.
¿Qué es?
El título de página es el texto que aparece en el elemento <title> del HTML. Es lo primero que anuncian los lectores de pantalla al cargar una página y aparece en varios lugares clave de la interfaz del navegador.
Anatomía de un buen título
El tema específico va primero para que los usuarios puedan distinguir las pestañas sin leer el nombre del sitio completo.
¿Por qué es importante?
Los títulos significativos son la primera línea de orientación. Permiten a los usuarios saber dónde están, qué contiene la página y si es lo que buscaban, todo ello antes de empezar a leer el contenido.
Para los usuarios de lectores de pantalla, el título es el primer elemento que se anuncia al cargar una página. Si todas las páginas tienen el mismo título genérico («Inicio», «Empresa», «Sin título»), la desorientación es inmediata.
¿Quién se ve afectado?
Personas ciegas: El lector de pantalla anuncia el título al cargar la página. Un título descriptivo confirma que han llegado a la página correcta.
Personas con discapacidades cognitivas: Los títulos claros reducen la carga cognitiva al navegar por varias páginas o volver a una pestaña después de un tiempo.
Todos los usuarios con múltiples pestañas: Identificar la pestaña correcta sin tener que hacer clic en cada una ahorra tiempo a cualquier usuario.
Cómo implementar 2.4.2
El elemento <title>
El título de página se define en el elemento <title> dentro del <head>:
<head>
<title>Auditoría de accesibilidad WCAG — Accesible Web</title>
</head>Títulos descriptivos vs. genéricos
Todos iguales o sin información:
<title>Inicio</title> <title>Sin título</title> <title>Empresa SA</title> <title>Empresa SA</title> Únicos y descriptivos por página:
<title>Inicio — Empresa SA</title> <title>Servicios de consultoría — Empresa SA</title> <title>Contacto — Empresa SA</title> <title>Blog — Empresa SA</title> Características de un buen título
Único: Cada página tiene un título diferente al resto del sitio.
Descriptivo: Indica el tema o propósito específico de esa página.
Conciso: Lo esencial primero; nombre del sitio al final si se incluye.
Actualizado: En SPAs y páginas dinámicas, el título cambia con el contenido visible.
SPAs: títulos dinámicos
En aplicaciones de una sola página (React, Vue, Angular), el título debe actualizarse programáticamente al cambiar de «página»:
// Al navegar a una nueva vista
document.title = 'Carrito de compra — Mi Tienda';Ejemplos prácticos
Correcto Título con tema y sitio
Una tienda online usa <title>Zapatillas de running — SportShop</title> en la página de producto. El usuario sabe exactamente en qué página está y a qué sitio pertenece.
Fallo Todas las páginas con el mismo título
Una empresa usa <title>Bienvenido</title> en todas sus páginas. Un usuario con lector de pantalla no puede distinguir en cuál está al cargar.
Fallo SPA sin actualización de título
Una aplicación de gestión tiene <title>App Gestión</title> fijo. Al navegar entre secciones (Facturación, Clientes, Informes), el título nunca cambia, dejando al usuario desorientado.
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| G88 | Proporcionar títulos descriptivos a las páginas web | Suficiente |
| G127 | Identificar una página web dentro de un conjunto de páginas con el título | Complementaria |
| H25 | Proporcionar un título usando el elemento title | Suficiente |
Errores comunes
- No incluir el elemento
<title>en el<head>. - Usar el mismo título en todas las páginas del sitio.
- Usar títulos genéricos como «Inicio», «Página 1» o «Sin título».
- Colocar el nombre del sitio antes del tema específico de la página.
- En SPAs, no actualizar el título al navegar entre vistas.