Addaw, ir a inicio Donar

Técnica HTML WCAG 2.2

H25Proporcionar un título mediante el elemento title

En resumen

Esta técnica pide que todo documento HTML, incluidos los que se cargan en marcos, tenga en su head un elemento title no vacío que resuma en una frase breve el propósito de la página. Es lo primero que anuncian los lectores de pantalla y lo que se muestra en pestañas, marcadores e historial, por lo que ayuda a cualquier persona a orientarse y a distinguir una página de otra sin tener que leer su contenido.

Ejemplo práctico

El elemento title está en la cabecera de cada documento y es lo primero que anuncia un lector de pantalla al cargar la página; también es el texto de la pestaña, del historial y de los marcadores. Se suele omitir en plantillas hechas a mano, páginas generadas por formularios y documentos cargados en marcos.

Así no: Página de cita previa sin elemento title

La cabecera no tiene title. La pestaña y el historial muestran la dirección del archivo (por ejemplo, «cita-previa.html») y el lector de pantalla, al cargar la página o al cambiar de pestaña, anuncia esa dirección en lugar de un nombre que identifique la página.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <header>Ayuntamiento de Villanueva</header>
  <main>
    <h1>Solicitud de cita previa</h1>
    <p>Elija el trámite, la oficina y el día que prefiera.</p>
  </main>
</body>
</html>

Así sí: Elemento title no vacío que describe la página

Se añade un title en head que dice primero de qué trata la página y después a qué sitio pertenece. Es distinto del atributo title, que no sirve para titular el documento.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Solicitud de cita previa – Ayuntamiento de Villanueva</title>
</head>
<body>
  <header>Ayuntamiento de Villanueva</header>
  <main>
    <h1>Solicitud de cita previa</h1>
    <p>Elija el trámite, la oficina y el día que prefiera.</p>
  </main>
</body>
</html>

Cómo comprobarlo

Herramientas del navegador

  1. Mirar el texto de la pestaña del navegador: si aparece la dirección o el nombre del archivo, falta el título.
  2. Abrir las herramientas de desarrollo (F12) y ejecutar document.title en la Consola: no debe devolver una cadena vacía.
  3. En la pestaña Elementos, comprobar que hay un único <title> dentro de <head>.

Lector de pantalla (NVDA o VoiceOver)

  1. Cargar la página y escuchar lo primero que se anuncia.
  2. En NVDA, pulsar Insert + T para leer el título de la ventana; en VoiceOver para macOS, VO + F2.

Debería anunciar: «Solicitud de cita previa – Ayuntamiento de Villanueva»

Validación automática

  1. axe DevTools y Lighthouse detectan que falta el título o que está vacío (regla document-title); el validador de HTML del W3C también lo marca como error.
  2. Ninguna herramienta valora si el título describe la página: un título como «Página nueva» pasa la prueba automática y hay que revisarlo a mano (véase G88).

Errores frecuentes en auditorías

  • Elemento title vacío o con textos de la plantilla, como «Sin título», «Página nueva» o «index».
  • El mismo título en todas las páginas del sitio, normalmente solo el nombre de la entidad.
  • Aplicaciones de una sola página que nunca actualizan document.title al cambiar de vista.
  • Confundir el elemento title con el atributo title y creer que un <body title="..."> titula el documento.

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

Aplicabilidad

HTML

Descripción

Todos los documentos HTML, incluidos los que están en marcos, tienen un elemento title en la sección head que define con una frase sencilla el propósito del documento. Esto ayuda a los usuarios a orientarse rápidamente dentro del sitio sin tener que buscar información de orientación en el cuerpo de la página.

Tenga en cuenta que el elemento title (obligatorio), que solo aparece una vez en el documento, es distinto del atributo title, que puede aplicarse a casi cualquier elemento HTML.

Ejemplos

Este ejemplo define el título de un documento.

<!doctype html>
<html lang="en">
  <head>
    <title>The World Wide Web Consortium</title>     
  </head>
  <body>
      ...   
  </body> 
</html>

Pruebas

Procedimiento

  1. Examinar el código fuente del documento HTML y comprobar que aparece un elemento title no vacío en la sección head.
  2. Comprobar que el elemento title describe el documento.

Resultados esperados

  • Las comprobaciones n.º 1 y n.º 2 son verdaderas.

Recursos

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 H25 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