Criterios de éxito de las WCAG · Level A
WCAG 2.4.2: Página titulada
WCAG 2.4.2 requiere que cada página web tenga un título descriptivo y significativo que identifique su tema o propósito. Esto garantiza que las personas usuarias —especialmente quienes dependen de lectores de pantalla o gestionan varias pestañas— puedan orientarse rápidamente y navegar de manera eficiente.
Qué significa esta regla
WCAG 2.4.2 Página titulada es un criterio de éxito de Nivel A bajo el principio de Operable. Establece: "Las páginas web tienen títulos que describen el tema o propósito." En términos prácticos, esto significa que cada documento HTML entregado a una persona usuaria debe incluir un elemento <title> dentro de la sección <head>, y ese elemento debe contener texto que identifique de manera significativa el contenido, la función o el contexto de la página dentro del sitio.
El criterio se aplica a cada página web discreta, ya sea un archivo HTML estático, una vista de una aplicación de una sola página (SPA) renderizada dinámicamente, una página modal o un paso en un asistente de varios pasos. Cada "pantalla" distinta a la que una persona usuaria pueda navegar directamente o que reemplace la vista actual debe tener su propio título único y descriptivo.
Una página cumple este criterio cuando su elemento <title> está presente, no está vacío y contiene texto que describe adecuadamente el tema o propósito de la página. El título no necesita ser único en todo internet, pero sí debe ser lo suficientemente específico como para que una persona que solo escuche o lea el título pueda entender de qué trata la página sin necesitar contexto adicional.
Una página no cumple este criterio cuando se da cualquiera de las siguientes condiciones: el elemento <title> está completamente ausente del <head>; el elemento <title> está presente pero vacío (no contiene texto); el título contiene únicamente texto genérico de marcador de posición como "Untitled Document", "New Page" o el nombre de dominio sin ningún contenido descriptivo; o una aplicación de una sola página navega a una nueva vista lógica sin actualizar dinámicamente el título del documento.
WCAG no define excepciones explícitas para este criterio en el Nivel A. Cada página web —independientemente de su tamaño, público o propósito— debe tener un título descriptivo. Sin embargo, el documento de Understanding aclara que el título no necesita ser el único medio de identificación; simplemente debe existir y ser lo suficientemente descriptivo como para servir como una señal básica de orientación.
Por qué es importante
El título de la página es una de las primeras piezas de información que una persona usuaria encuentra al llegar o al navegar entre páginas web. Su ausencia o insuficiencia crea barreras para varios grupos de personas usuarias diferentes.
Personas usuarias de lectores de pantalla, la mayoría de las cuales son ciegas o tienen una discapacidad visual significativa, escuchan el título de la página anunciado inmediatamente cuando la página se carga o cuando el foco se desplaza a un nuevo documento. Para aproximadamente 2.2 mil millones de personas en todo el mundo que tienen algún tipo de discapacidad visual (según la Organización Mundial de la Salud), este anuncio es la forma principal de confirmar que la página correcta se ha cargado y de entender qué contiene antes de explorar más. Sin un título significativo, una persona ciega que navega entre pestañas o que regresa a una página después de una pausa debe leer todo el contenido de la página solo para reorientarse, una tarea que puede llevar minutos con un diseño complejo.
Personas usuarias con discapacidades cognitivas y de aprendizaje se benefician enormemente de títulos de página claros y consistentes. Cuando una persona con dificultades de memoria abre varias pestañas durante una sesión de investigación, el título de la pestaña suele ser la única etiqueta visible para cada pestaña. Un título como "Account Settings — Accsible Dashboard" le permite identificar al instante la pestaña correcta; un título como "Page" o un título vacío la obliga a hacer clic en cada pestaña para descubrir su contenido, creando carga cognitiva y posible confusión.
Personas usuarias con discapacidad motriz que dependen de software de control por voz (como Dragon NaturallySpeaking) pueden usar los títulos de página para verificar que han llegado al destino previsto después de emitir comandos de navegación. Los títulos claros reducen la necesidad de correcciones y re-navegaciones repetidas, ahorrando tanto tiempo como esfuerzo físico.
Considere este escenario concreto: una paciente de hospital en Turquía está usando un lector de pantalla de apoyo para completar un formulario de cita en línea a lo largo de varios pasos. Si cada paso no actualiza el título de la página para reflejar el paso actual —por ejemplo, "Step 2 of 4: Personal Information — Appointment Booking — Hospital Name"— la paciente no tiene forma de confirmar rápidamente su progreso después de recargar la página o después de cambiar de pestaña para revisar otra ventana del navegador. Debe volver a leer todo el formulario para entender dónde está, lo que es especialmente gravoso para alguien que ya puede estar enferma o estresada.
Más allá de la accesibilidad, los títulos de página tienen un valor SEO significativo. Los motores de búsqueda usan el elemento <title> como la etiqueta principal para los listados de resultados de búsqueda. Un título descriptivo y rico en palabras clave mejora las tasas de clics y la capacidad de descubrimiento. Los sitios web que implementan correctamente WCAG 2.4.2 benefician por tanto no solo a sus personas usuarias con discapacidad, sino también a su presencia general en la búsqueda orgánica, convirtiendo la accesibilidad en una ganancia simultánea para el negocio y la tecnología.
Reglas relacionadas de Axe-core
- document-title: Esta es la regla principal de axe-core asociada con WCAG 2.4.2. Verifica si el documento HTML actual contiene un elemento
<title>dentro del<head>y si ese elemento contiene al menos algo de contenido de texto que no sea espacio en blanco. La regla marca una infracción cuando el elemento<title>falta por completo, cuando existe pero está vacío o cuando contiene solo caracteres de espacio en blanco. Axe-core informa esto como una infracción crítica mapeada a WCAG 2.4.2 Nivel A. La regla se ejecuta automáticamente al cargar la página y detectará omisiones estructurales de forma fiable. - Por qué también se requiere prueba manual: Las herramientas automatizadas como axe-core pueden confirmar que existe un elemento
<title>y que no está vacío, pero no pueden evaluar si el título es significativo o descriptivo. Una página con<title>aaa</title>o<title>Untitled Document</title>pasará la regla automatizada porque el elemento está presente y no está vacío, pero claramente no cumple con el espíritu de WCAG 2.4.2. Se requiere revisión humana para evaluar si el título refleja con precisión el tema y el propósito de la página. De manera similar, en aplicaciones de una sola página, los análisis automatizados normalmente capturan solo el título de la carga inicial de la página y pueden pasar por alto casos en los que el título no se actualiza en los cambios de ruta del lado del cliente; esas transiciones requieren pruebas de navegación manual.
Cómo probar
- Análisis automatizado con axe DevTools o Lighthouse: Abra la página web objetivo en Chrome o Firefox. Abra DevTools (F12), vaya al panel de axe DevTools (si está instalado) o a la pestaña Lighthouse. Ejecute una auditoría de accesibilidad. En los resultados de axe, busque específicamente cualquier infracción de la regla
document-titleen la categoría "Critical" o "Serious". Lighthouse de manera similar marcará un título ausente o vacío en su auditoría de Accesibilidad. Anote la URL exacta de la página y el texto del título (o su ausencia) para su informe. Repita esta prueba para cada ruta o vista única en la aplicación, incluidas las páginas de error (404, 500) y las páginas de confirmación. - Inspección manual en el navegador: En cualquier navegador, examine la etiqueta de la pestaña del navegador: debe mostrar un título significativo y descriptivo que identifique la página. Haga clic derecho en la página y elija "View Page Source" o abra DevTools y vaya al panel Elements. Localice la sección
<head>y verifique que haya un elemento<title>presente con contenido de texto apropiado y no genérico. Compruebe que el título sea relevante para el contenido visible de la página y que, en sitios con varias páginas, difiera de los títulos de otras páginas de una manera que refleje el propósito único de la página. - Pruebas con lector de pantalla usando NVDA + Firefox: Abra la página con Firefox y active NVDA. Cuando la página se cargue, NVDA debería anunciar el título de la página inmediatamente. Navegue fuera de la página y vuelva a ella (usando Alt+Flecha izquierda y luego Alt+Flecha derecha) y confirme que el título correcto se anuncia de nuevo. En una aplicación de una sola página, active un cambio de ruta del lado del cliente y escuche el anuncio del título actualizado. Si NVDA no lee nada o lee una cadena genérica/poco útil al cargar la página, esto es un fallo.
- Pruebas con lector de pantalla usando VoiceOver + Safari (macOS/iOS): Active VoiceOver (Command+F5 en Mac). Cargue la página. VoiceOver anuncia el título de la página al cargar. Use el Rotor (Control+Option+U) y navegue a la lista de Web Spots o de encabezados: el título de la ventana que se muestra en la parte superior de la página debe coincidir con el contenido del elemento
<title>. En iOS, el título aparece en el selector de pestañas de Safari; verifique que sea descriptivo. - Pruebas con lector de pantalla usando JAWS + Chrome: Abra la página en Chrome con JAWS en ejecución. JAWS anuncia el título de la página al cargar. Presione Insert+F1 para abrir la ventana de ayuda de JAWS y confirme el título de la página que se informa. Use Insert+T para leer el título en cualquier momento durante su sesión y verificar que se haya actualizado correctamente después de eventos de navegación en una SPA.
- Prueba de cambio de ruta en una aplicación de una sola página (SPA): Navegue por diferentes vistas de la SPA (por ejemplo, de una página de inicio a una página de producto y luego a una página de pago). Después de cada navegación, revise la etiqueta de la pestaña del navegador y use un lector de pantalla para verificar que el título se haya actualizado. Si la etiqueta de la pestaña permanece igual durante toda la sesión independientemente de la vista actual, esto es un fallo de 2.4.2 para cada vista que no tenga un título distinto.
Cómo corregir
Elemento de título ausente — Incorrecto
<!DOCTYPE html>
<html lang='tr'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- No <title> element present -->
</head>
<body>
<h1>Ürünlerimiz</h1>
</body>
</html>Elemento de título ausente — Correcto
<!DOCTYPE html>
<html lang='tr'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- Title added: describes the page topic and includes the site name for context -->
<title>Ürünlerimiz — Accsible Mağaza</title>
</head>
<body>
<h1>Ürünlerimiz</h1>
</body>
</html>Título genérico de marcador de posición — Incorrecto
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<!-- Generic title provides no useful context to the user -->
<title>Untitled Document</title>
</head>
<body>
<h1>Contact Us</h1>
</body>
</html>Título genérico de marcador de posición — Correcto
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<!-- Descriptive title: page function first, then site name -->
<title>Contact Us — Accsible Support</title>
</head>
<body>
<h1>Contact Us</h1>
</body>
</html>Aplicación de una sola página que no actualiza el título al cambiar de ruta — Incorrecto
<!-- React Router example: title is set only once at app root and never updated -->
<!DOCTYPE html>
<html lang='en'>
<head>
<title>My App</title>
</head>
<body>
<div id='root'></div>
<!-- JavaScript bundle loads React SPA; title never changes during navigation -->
</body>
</html>Aplicación de una sola página que no actualiza el título al cambiar de ruta — Correcto
<!-- Use document.title in each route component or a head-management library -->
<!-- Example using React with react-helmet-async -->
<!-- In your ProductPage component: -->
<!-- import { Helmet } from 'react-helmet-async'; -->
<!-- <Helmet><title>{product.name} — Accsible Store</title></Helmet> -->
<!-- Or using plain JavaScript on each route render: -->
<script>
// Called whenever the SPA navigates to a new view
function updatePageTitle(pageTitle, siteName) {
document.title = pageTitle + ' — ' + siteName;
}
// Example: updatePageTitle('Shopping Cart', 'Accsible Store');
// Results in: <title>Shopping Cart — Accsible Store</title>
</script>Formulario de varios pasos con títulos idénticos en cada paso — Incorrecto
<!-- Step 1 -->
<title>Checkout — Accsible Store</title>
<!-- Step 2 (same title — user cannot distinguish steps) -->
<title>Checkout — Accsible Store</title>
<!-- Step 3 (same title again) -->
<title>Checkout — Accsible Store</title>Formulario de varios pasos con títulos idénticos en cada paso — Correcto
<!-- Step 1: title reflects the current step's purpose -->
<title>Step 1 of 3: Shipping Address — Checkout — Accsible Store</title>
<!-- Step 2: clearly distinct and descriptive -->
<title>Step 2 of 3: Payment Details — Checkout — Accsible Store</title>
<!-- Step 3: confirmation step identified clearly -->
<title>Step 3 of 3: Order Review — Checkout — Accsible Store</title>Errores comunes
- Dejar el título predeterminado del CMS o framework en producción: Muchos sistemas de gestión de contenido (WordPress, Drupal, frameworks personalizados) se entregan con títulos de marcador de posición como "Just another WordPress site" o la URL sin procesar del sitio. Las personas desarrolladoras olvidan configurar la plantilla de título antes del lanzamiento, dejando cada página con un título poco útil o idéntico. Verifique siempre la configuración del título en los ajustes de su CMS y pruebe una URL en vivo antes de la publicación.
- Usar solo el nombre del sitio como título para cada página: Establecer
<title>Accsible</title>en cada página de un sitio pasa la verificación automatizada dedocument-title(el elemento no está vacío) pero no cumple con el requisito descriptivo de WCAG 2.4.2. Cada página debe tener un título que la distinga de otras páginas del mismo sitio. - Poner el nombre del sitio antes del contenido específico de la página: El patrón
<title>Accsible — Contact</title>obliga a las personas usuarias de lectores de pantalla a escuchar el nombre de la marca antes de saber de qué trata la página. El patrón recomendado es<title>Contact — Accsible</title>: primero el tema de la página, luego el nombre del sitio, para que las personas usuarias reciban de inmediato la información más relevante. - Olvidar actualizar
document.titleen aplicaciones de una sola página después de la navegación del lado del cliente: Frameworks como React, Vue y Angular no actualizan el título del documento automáticamente cuando cambia la ruta. Las personas desarrolladoras deben establecer explícitamentedocument.titleo usar una biblioteca de gestión del head (como react-helmet-async o Vue Meta) en cada componente de ruta. No hacerlo significa que cada vista de la SPA después de la carga inicial comparte el mismo título. - Usar elementos de título vacíos o que solo contienen espacios en blanco: Un elemento
<title> </title>que contiene solo espacios o saltos de línea es funcionalmente idéntico a un título ausente para las personas usuarias de tecnología de apoyo, pero puede pasarse por alto en el control de calidad visual porque la pestaña del navegador simplemente aparece en blanco en lugar de mostrar un error. Axe-core marca esto, pero puede pasar inadvertido para revisores manuales. - No actualizar el título en las páginas de error (404, 500, errores de validación): Las páginas de error con frecuencia heredan el título de la página anterior o vuelven a un título genérico del sitio. Una persona usuaria de lector de pantalla que provoca un error 404 necesita escuchar "Page Not Found — Accsible" en lugar del título de la página en la que estaba previamente, para entender que su navegación ha fallado.
- Títulos duplicados en diferentes páginas con contenido distinto: Cuando una página de listado de productos y una página de detalle de producto comparten el título "Products — Accsible Store", las personas usuarias con discapacidades cognitivas o quienes gestionan varias pestañas no pueden distinguir entre ambas. Cada página lógicamente distinta debe tener un título único que refleje su contenido específico.
- Títulos generados dinámicamente que incluyen nombres de variables de plantilla sin procesar: Errores de renderizado del lado del servidor pueden dar lugar a títulos como
<title>{{page.title}} — MySite</title>cuando las variables de plantilla no se renderizan. Estos pasan la verificación de no estar vacíos, pero no proporcionan información significativa. Implemente comprobaciones automatizadas del contenido del título en su canalización de CI/CD para detectar fallos de renderizado de plantillas antes del despliegue. - Títulos demasiado largos o saturados de palabras clave: Aunque WCAG no establece un límite de caracteres, los títulos excesivamente largos (más de 60–70 caracteres) se truncan en las pestañas del navegador y en los resultados de búsqueda, y los lectores de pantalla deben leer toda la cadena antes de anunciar la parte más relevante. Mantenga los títulos concisos, específicos y con la información más importante al principio.
- Omitir títulos en documentos dentro de iframes: Los marcos en línea (
<iframe>) que cargan un documento HTML completo también deben tener un elemento<title>significativo. Aunque el propio elementoiframedebe tener un atributotitleque describa el propósito del marco, el documento cargado dentro de él también se beneficia de un<title>en su propio<head>para la tecnología de apoyo que navega dentro del contenido del marco.
Relación con la normativa de accesibilidad de Turquía
La Circular Presidencial 2025/10 de Turquía, publicada en el Boletín Oficial n.º 32933 el 21 de junio de 2025, establece requisitos de accesibilidad vinculantes para una amplia gama de servicios digitales del sector público y privado. WCAG 2.4.2 Página titulada es un criterio de éxito de Nivel A, y la conformidad de Nivel A es el mínimo obligatorio bajo esta circular. Las entidades cubiertas deben cumplir con el Nivel A en un plazo de un año si son instituciones públicas, y en un plazo de dos años si son organizaciones del sector privado.
La circular abarca un amplio conjunto de tipos de entidades, lo que hace que WCAG 2.4.2 sea relevante para una parte significativa de la economía digital de Turquía. Las entidades cubiertas incluyen todas las instituciones públicas y organismos gubernamentales, plataformas de comercio electrónico, bancos e instituciones financieras, hospitales y proveedores de atención sanitaria, empresas de telecomunicaciones con 200,000 o más abonados, agencias de viajes autorizadas, empresas de transporte privadas y escuelas privadas autorizadas por el Ministerio de Educación Nacional (MoNE).
Para estas organizaciones, no proporcionar un título de página significativo no es simplemente un descuido de buenas prácticas, sino un riesgo de incumplimiento normativo. Considere las implicaciones prácticas: una plataforma de comercio electrónico turca donde las páginas de categorías de productos comparten todas el mismo título genérico, o el sistema de reserva de citas de un hospital público donde cada paso del flujo de reserva tiene el mismo título indiferenciado, estarían ambos en violación directa de los requisitos de accesibilidad de la circular. Los reguladores o denunciantes podrían citar estos fallos como incumplimientos del estándar obligatorio de Nivel A.
Implementar correctamente WCAG 2.4.2 es una de las correcciones de accesibilidad de menor esfuerzo y mayor impacto disponibles, ya que normalmente solo requiere un cambio a nivel de plantilla para garantizar que cada página tenga un elemento <title> bien formado y descriptivo. Para las organizaciones sujetas a la circular 2025/10, abordar los títulos de página debería estar entre los primeros puntos a resolver en cualquier hoja de ruta de remediación de accesibilidad: es sencillo de implementar, fácil de verificar y directamente comprobable mediante la regla document-title de axe-core, lo que facilita demostrar el cumplimiento ante auditores o autoridades reguladoras.
Las organizaciones que atienden a públicos de habla turca también deben asegurarse de que los títulos de las páginas se proporcionen en el idioma correcto que coincida con el contenido de la página, complementando el requisito del atributo lang (WCAG 3.1.1), de modo que los lectores de pantalla en los entornos de las personas usuarias turcoparlantes interpreten y pronuncien correctamente el título anunciado al cargar la página.