Técnica Técnicas generales WCAG 2.2
G88Dar a cada página un título que la describa
Nombre oficial en el W3C: Proporcionar títulos descriptivos para las páginas web
En pocas palabras
El título de la página es el texto que aparece en la pestaña del navegador, en el historial y en los resultados de los buscadores. Esta técnica pide que cada título diga de qué trata la página. Debe ser corto, entenderse fuera de contexto y, mejor aún, distinguirla de las demás páginas del sitio.
Por qué es importante
El lector de pantalla lee el título nada más cargar la página. Es la primera pista para saber dónde se está.
Si todas las páginas se llaman «Inicio» o igual que la empresa, la persona no sabe si ha cambiado de página. Tampoco lo sabe quien tiene muchas pestañas abiertas o busca una página en el historial.
Cómo se hace
- Escriba en
<title>el tema de la página, en pocas palabras. - Ponga primero lo más concreto y después el nombre del sitio: «Pedir cita previa – Servicios sociales – Ayuntamiento de Villanueva».
- Evite títulos repetidos. Cada página debe tener el suyo.
- En procesos de varios pasos, búsquedas y aplicaciones de una sola página, actualice el título cuando cambie el contenido.
Ejemplo práctico
Un mal título se nota sobre todo en los procesos de varios pasos (compra, solicitud, inscripción) y en los listados con filtros. Si todas las páginas se llaman igual, no se sabe 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. En las pestañas y en el historial (Ctrl + H) no se distinguen 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 empieza por lo más concreto (el paso), sigue con el proceso y termina con el nombre del sitio. Se entiende fuera de contexto y no se repite en la tienda. Además, en una pestaña estrecha sigue viéndose la parte que distingue la página.
<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
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. En la pestaña nunca se llega a ver la parte que identifica la página.
- Procesos de varios pasos, búsquedas o filtros que mantienen el mismo título aunque cambie el contenido.
- Páginas de error (404, sesión caducada, error de envío) con el título de la página que se quería cargar.
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 G88 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
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
- Comprobar que la página web tiene un título
- Comprobar que el título es pertinente respecto al contenido de la página web.
- 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 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.
Basado en la técnica G88 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.