Addaw, ir a inicio Donar

Técnica HTML WCAG 2.2

H25Dar a cada página un título con el elemento title

Nombre oficial en el W3C: Proporcionar un título mediante el elemento title

En pocas palabras

Cada página necesita un elemento title dentro de head. Ese texto aparece en la pestaña del navegador, en el historial y en los resultados de los buscadores. Es lo primero que anuncia el lector de pantalla al abrir la página. Debe decir de qué trata la página y, después, a qué sitio pertenece.

Por qué es importante

El título es la primera pista para saber dónde se está. Una persona ciega lo oye al cargar la página o al cambiar de pestaña.

Sin título, el navegador muestra la dirección o el nombre del archivo. Con varias pestañas abiertas, todas parecen iguales. Esto afecta a quien usa lector de pantalla, a quien tiene problemas de memoria o de atención y a cualquiera que busca una página en su historial.

Cómo se hace

  1. Ponga un único elemento <title> dentro de <head> en todas las páginas.
  2. Empiece por lo propio de la página y termine con el nombre del sitio: «Solicitud de cita previa – Ayuntamiento de Villanueva».
  3. Evite títulos vacíos, de plantilla («Sin título») o iguales en todo el sitio.
  4. En aplicaciones que cambian de vista sin recargar, actualice document.title en cada cambio.
  5. No lo confunda con el atributo title: ese atributo no da título a la página.

Ejemplo práctico

El elemento title va en la cabecera de cada página. Es lo primero que anuncia el lector de pantalla al cargarla. También se ve en la pestaña, en el historial y en los marcadores. Suele faltar en plantillas hechas a mano, en páginas generadas por formularios y en documentos dentro de marcos.

Así no: Página de cita previa sin título

La cabecera no tiene title. La pestaña y el historial muestran el nombre del archivo, por ejemplo «cita-previa.html». El lector de pantalla anuncia esa dirección al cargar la página o al cambiar de pestaña. No dice qué página es.

<!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í: Título que describe la página

Se añade un title dentro de head. Dice primero de qué trata la página y después a qué sitio pertenece. No hay que confundirlo con el atributo title, que no da título a la página.

<!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. Si aparece la dirección o el nombre del archivo, falta el título.
  2. Abrir las herramientas de desarrollo (F12) y escribir document.title en la Consola. No debe devolver un texto vacío.
  3. En la pestaña Elementos, comprobar que hay un solo <title> dentro de <head>.

Lector de pantalla (NVDA o VoiceOver)

  1. Cargar la página y escuchar lo primero que se anuncia.
  2. Para volver a oír el título: en NVDA, Insert + T; 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 avisan si falta el título o si 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 bien la página. Un título como «Página nueva» pasa la prueba automática. Hay que revisarlo a mano (véase G88).

Errores frecuentes en auditorías

  • Elemento title vacío o con textos de 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 no cambian document.title al pasar de una vista a otra.
  • Confundir el elemento title con el atributo title. Un <body title="..."> no da título a la página.

Para saber más, en nuestro blog

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica H25 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web 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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica H25 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.