Addaw, ir a inicio Donar

Técnica Técnicas generales WCAG 2.2

G88Proporcionar títulos descriptivos para las páginas web

En resumen

El título de una página (el elemento title) es lo primero que anuncia un lector de pantalla y lo que aparece en pestañas, marcadores y resultados de búsqueda. Esta técnica pide que cada página tenga un título corto que identifique su tema, se entienda fuera de contexto y, a ser posible, sea único dentro del sitio. Ayuda a todos los usuarios a orientarse y a saber que la página ha cambiado.

Ejemplo práctico

Donde más se nota un mal título es en los procesos de varios pasos (compra, solicitud, inscripción) y en los listados con filtros: todas las páginas se llaman igual y no hay forma de saber en cuál se está sin leer el contenido.

Así no: Paso del proceso de compra con un título genérico

Todas las páginas de la tienda se titulan «Tienda Rumbo». Al cargar el paso 2 el lector de pantalla anuncia lo mismo que en el paso 1, y en las pestañas o en el historial (Ctrl + H) es imposible distinguir unas páginas de otras.

<head>
  <meta charset="utf-8">
  <title>Tienda Rumbo</title>
</head>
<body>
  <main>
    <h1>Finalizar compra</h1>
    <h2>Paso 2 de 3: datos de envío</h2>
    <form action="#">
      <label for="cp">Código postal</label>
      <input id="cp" autocomplete="postal-code" inputmode="numeric">
      <button type="submit">Continuar al pago</button>
    </form>
  </main>
</body>

Así sí: Título que identifica la página y el paso

El título dice primero lo más específico (el paso), luego el proceso y por último el sitio. Se entiende fuera de contexto, es único dentro de la tienda y la parte que distingue la página no queda cortada en pestañas estrechas.

<head>
  <meta charset="utf-8">
  <title>Datos de envío (paso 2 de 3) – Finalizar compra – Tienda Rumbo</title>
</head>
<body>
  <main>
    <h1>Finalizar compra</h1>
    <h2>Paso 2 de 3: datos de envío</h2>
    <form action="#">
      <label for="cp">Código postal</label>
      <input id="cp" autocomplete="postal-code" inputmode="numeric">
      <button type="submit">Continuar al pago</button>
    </form>
  </main>
</body>

Cómo comprobarlo

Herramientas del navegador

  1. Recorrer varias páginas del mismo apartado (cada paso de un formulario, cada ficha de producto, los resultados de búsqueda) y comparar los textos de las pestañas.
  2. Abrir el historial (Ctrl + H) y comprobar que cada entrada permite reconocer la página sin abrirla.
  3. En aplicaciones de una sola página, ejecutar document.title en la Consola (F12) después de cada cambio de vista y comprobar que se ha actualizado.

Lector de pantalla (NVDA o VoiceOver)

  1. Pasar del paso 1 al paso 2 del proceso y escuchar lo que se anuncia al cargar la página.
  2. Pulsar Insert + T en NVDA (VO + F2 en VoiceOver para macOS) para releer el título.

Debería anunciar: «Datos de envío (paso 2 de 3) – Finalizar compra – Tienda Rumbo»

Validación automática

  1. axe DevTools y Lighthouse solo comprueban que el título exista y no esté vacío (regla document-title); que sea descriptivo y pertinente se valora a mano.
  2. Un rastreador SEO (por ejemplo, Screaming Frog) ayuda a listar los títulos de todo el sitio y localizar los duplicados, que suelen ser los que no identifican la página.

Errores frecuentes en auditorías

  • El mismo título en todas las páginas, normalmente el nombre de la empresa o «Inicio».
  • Títulos que empiezan por el nombre del sitio y un eslogan largo, de modo que en la pestaña nunca se llega a ver la parte que identifica la página.
  • Procesos de varios pasos y resultados de búsqueda o filtros que mantienen el mismo título aunque cambie el contenido.
  • Páginas de error (404, sesión caducada, error de envío) que conservan el título de la página que se pretendía cargar.

Técnica completa: traducción al español del texto del W3C

Aplicabilidad

Todas las tecnologías.

Descripción

El objetivo de esta técnica es dar a cada página web un título descriptivo. Los títulos descriptivos ayudan a los usuarios a encontrar el contenido, a orientarse dentro de él y a navegar por él. Un título descriptivo permite al usuario identificar fácilmente qué página web está utilizando y darse cuenta de cuándo la página web ha cambiado. El título puede servir para identificar la página web sin que los usuarios tengan que leer o interpretar su contenido. Cuando en los mapas del sitio o en las listas de resultados de búsqueda aparecen títulos precisos y descriptivos, los usuarios identifican con mayor rapidez el contenido que necesitan. Cuando los títulos descriptivos se usan en el texto de los enlaces, ayudan a los usuarios a llegar con más precisión al contenido que les interesa.

El título de cada página web debería:

  • Identificar el tema de la página web
  • Tener sentido cuando se lee fuera de contexto, por ejemplo con un lector de pantalla o en un mapa del sitio o una lista de resultados de búsqueda
  • Ser corto

También puede ser útil que el título

  • Identifique el sitio u otro recurso al que pertenece la página web
  • Sea único dentro del sitio u otro recurso al que pertenece la página web

Ejemplos

Un título que presenta primero la información identificativa más importante

Una página web es publicada por un grupo perteneciente a una organización más grande. El título de la página web identifica primero el tema de la página, después muestra el nombre del grupo y, por último, el nombre de la organización matriz.

<title>Working with us: The Small Group: The Big Organization</title>

Una presentación multimedia sincronizada con un título descriptivo

Una presentación multimedia sincronizada sobre el tsunami del sur de Asia de 2004 se titula "The Tsunami of 2004" («El tsunami de 2004»).

Una página web con un título descriptivo en tres partes

Una página web ofrece pautas y sugerencias para crear subtítulos ocultos. La página web forma parte de un «subsitio» dentro de un sitio más grande. El título está separado en tres partes mediante guiones. La primera parte del título identifica la organización. La segunda identifica el subsitio al que pertenece la página web. La tercera identifica la propia página web.

<title>Computer Hardware Corporation - Laptop Division - Laptop FAQs</title>

La página web de un periódico

Un sitio web que solo permite ver la edición actual titula su página web "National News, Front Page" («Noticias nacionales, portada»). Un sitio web que permite ver las ediciones de distintas fechas titula su página web "National News, Front Page, Oct 17, 2005" («Noticias nacionales, portada, 17 de octubre de 2005»).

Pruebas

Procedimiento

  1. Comprobar que la página web tiene un título
  2. Comprobar que el título es pertinente respecto al contenido de la página web.
  3. Comprobar que la página web puede identificarse mediante el título.

Resultados esperados

  • Todas las comprobaciones anteriores son verdaderas.

Cómo lo comprobamos en ADDAW

En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica G88 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.

Financiado por la unión europea Gobierno de españa red.es Plan de recuperación transformación y resilencia kit digital