Fallo Común F25 de WCAG 2.1: Títulos de página web no identificativos

Texto "<title>" en grande, representando la etiqueta HTML de título de página, clave para la accesibilidad y usabilidad web

El título de una página web es uno de los elementos más importantes para la accesibilidad y la usabilidad. Un título descriptivo y claro ayuda a los usuarios a entender el propósito de la página y facilita la navegación, especialmente para personas que usan lectores de pantalla o tienen dificultades cognitivas.

Sin embargo, muchas páginas no cumplen con este criterio, utilizando títulos genéricos, vacíos o irrelevantes, lo que dificulta la orientación de los usuarios en el sitio web.

Acerca de este fallo

Este fallo ocurre cuando una página web tiene un título, pero este no describe su contenido de manera efectiva. Algunas situaciones comunes incluyen:

  • Títulos predeterminados de herramientas de autoría, como:
    • «Untitled Document»
    • «New Page 1»
    • «Sin título»
  • Nombres de archivos sin sentido, como «page123.html» o «report.html».
  • Títulos genéricos que se repiten en todas las páginas del sitio, como «Mi sitio web».
  • Texto de relleno sin relación con el contenido de la página.

Impacto en la accesibilidad

  • Usuarios de lectores de pantalla pueden perder el contexto de la página en la que están.
  • Personas con dificultades cognitivas pueden confundirse si todas las páginas tienen el mismo título.
  • Usuarios con pestañas abiertas no pueden diferenciar fácilmente cada página en su navegador.

¿Por qué es importante?

  • Mejora la navegación: Los usuarios pueden identificar rápidamente el propósito de una página.
  • Facilita la accesibilidad: Los lectores de pantalla dependen de los títulos para ofrecer contexto.
  • Optimiza el SEO: Los motores de búsqueda consideran los títulos para clasificar las páginas.

Ejemplos

Ejemplo incorrecto 1: Página sin un título adecuado

Código incorrecto:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Untitled Document</title> </head> <body> <h1>Bienvenido a nuestra tienda online</h1> </body> </html>

🔴 Problema: El título no describe el contenido de la página, lo que impide a los usuarios identificar su propósito.

Solución correcta

Código corregido:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Tienda Online | Inicio</title> </head> <body> <h1>Bienvenido a nuestra tienda online</h1> </body> </html>

✅ ¿Qué mejora?: Se especifica un título claro y descriptivo, que indica que la página es la página principal de una tienda online.

Ejemplo incorrecto 1: Todas las páginas del sitio tienen el mismo título

Código incorrecto:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Sitio Web</title> </head> <body> <h1>Servicios</h1> </body> </html>
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Sitio Web</title> </head> <body> <h1>Contacto</h1> </body> </html>
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Sitio Web</title> </head> <body> <h1>Blog</h1> </body> </html>

🔴 Problema: Si todas las páginas tienen el mismo título («Mi Sitio Web»), los usuarios no podrán diferenciarlas fácilmente.

Solución correcta

Código corregido:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Servicios | Mi Sitio Web</title> </head> <body> <h1>Servicios</h1> </body> </html>
<!DOCTYPE html>
<html lang="es">
<head>
<title>Contacto | Mi Sitio Web</title> </head> <body> <h1>Contacto</h1> </body> </html>
<!DOCTYPE html>
<html lang="es">
<head>
<title>Blog | Mi Sitio Web</title> </head> <body> <h1>Blog</h1> </body> </html>

✅ ¿Qué mejora?: El título ahora refleja el contenido de cada página.

Errores comunes y cómo evitarlos

Errores frecuentes:

  • No definir un título en la etiqueta <title>.
  • Usar títulos genéricos o repetitivos.
  • No actualizar el título cuando el contenido de la página cambia.
  • Usar nombres de archivos como título de la página.

Cómo evitar estos errores:

  • Especificar siempre un título único y descriptivo para cada página.
  • Asegurarse de que el título refleje el propósito y contenido de la página.
  • Evitar títulos predeterminados como «Untitled Document».
  • Utilizar una estructura clara en los títulos, como «Sección | Sitio Web».

Preguntas frecuentes

¿Cómo sé si mi título es accesible?

Debe ser único, claro y descriptivo, reflejando el contenido de la página.

¿Puedo repetir títulos en varias páginas?

No. Cada página debe tener un título único para que los usuarios puedan diferenciarla.

¿Afecta el título al SEO?

Sí, los títulos bien escritos mejoran la clasificación en los motores de búsqueda.

¿Qué pasa si dejo el título en blanco?

Algunos navegadores mostrarán un título vacío, lo que afectará la experiencia de usuario.

¿Los lectores de pantalla leen el título de la página?

Sí, es uno de los primeros elementos que leen al cargar una nueva página.

¿Dónde se debe ubicar la etiqueta <title>?

Dentro de la sección <head> del documento HTML.

Recursos relacionados

Pruebas y validación

Procedimiento

  1. Inspeccionar el código fuente y verificar que cada página tenga un título en la etiqueta <title>.
  2. Navegar por el sitio y observar si los títulos en la pestaña del navegador describen correctamente el contenido.
  3. Usar un lector de pantalla para comprobar si los títulos proporcionan contexto adecuado.
  4. Probar con múltiples pestañas abiertas para ver si los títulos son distinguibles.

Resultados esperados

  • ✅ Si cada página tiene un título único y descriptivo, cumple con WCAG 2.1.
  • ❌ Si las páginas tienen títulos genéricos, repetidos o predeterminados, incumple el criterio 2.4.2.

Un título adecuado facilita la navegación, mejora la accesibilidad y optimiza el SEO. Asegúrate de que cada página tenga un título claro y descriptivo para ayudar a todos los usuarios a orientarse en tu sitio web.

¿Tu sitio cumple con este criterio? Si necesitas ayuda para mejorar la accesibilidad web, contáctanos. 🚀

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.

Solicitar Consultoría

Textos legales

Redes sociales

Linkedin