Los desarrolladores web y las herramientas de desarrollo van incorporando poco a poco elementos que van reduciendo la complejidad y la severidad de las barreras de accesibilidad presentes en las páginas de nueva creación. Pero estos esfuerzos se centran principalmente en las alternativas a imágenes, contrastes de color y, a veces, la estructura semántica de las páginas. En muchos casos siguen apareciendo barreras de accesibilidad relacionadas con la comprensión del sitio que se está navegando o de los mecanismos de navegación y orientación en un sitio web. En la mayoría de ocasiones este problema se debe al desconocimiento de las necesidades de estos mecanismos de orientación y navegación.
Título de página
El título de una página web es un mecanismo de orientación al que no se le presta actualmente mucha importancia. Incluso en muchos casos el desarrollador desconoce cómo cambiar el valor del título de la página sobre todo si desarrolla webs del tipo Single Page Application en la que toda la experiencia de navegación aparentemente se desarrolla sin saltar a otras páginas web.
El título de una página web es un mecanismo de navegación muy útil para personas con discapacidad que no pueden comprender una página de un vistazo.
Esta necesidad de accesibilidad se recoge en el criterio de éxito 2.4.2 de WCAG 2.0. Puedes leer la documentación oficial de la WAI para el criterio de éxito 2.4.2 understanding page titled.
Este criterio de éxito es de nivel A por lo que es de obligado cumplimiento en todas las legislaciones nacionales de Europa y Estados Unidos así como en las legislaciones de otros países ya que en todos ellos el nivel de mínimo cumplimiento legal es el de AA.
Título de página apropiado
Se considera como válido y accesible un título de página que identifique claramente el propósito y el contenido de la página que se está consultando.
En muchos casos el título de las páginas consiste en el uso del nombre de la empresa o producto que se está consultando.
Imaginemos por ejemplo la experiencia de navegación por un sitio web especializado en la venta de productos de jardinería. Lo habitual es encontrar que el título de todas las páginas es algo como El jardinero en casa. Y utiliza este valor para titular todas las páginas del sitio web. Esto hace que el título de la página no ayude como mecanismo de orientación.
Sigamos imaginando y en nuestro sitio de jardinería encontramos que hay secciones de quienes somos, contactar, tienda, noticias y galería de fotos. Con esta complejidad en la estructura de secciones y contenidos es cada vez más necesario un título de página que refleje la sección que estamos consultando sin olvidar el nombre del sitio web. Un título de página más apropiado para estos contenidos podría ser: El jardinero en casa – quienes somos.
Pero si seguimos profundizando en la experiencia de navegación y nos movemos dentro de la tienda consultando productos el título de página que muestra el nombre del sitio y la sección no es suficiente. Además debemos añadir al título de página el nombre del contenido concreto que estamos consultando en esa página. Un título de página más apropiado sería: El jardinero en casa – Tienda – Tijeras de podar modelo Acme.
Con esta información una persona puede comprender dónde está y qué contenido principal se va a encontrar en la página.
Declaración del título de página
La declaración del título de página se realiza dentro del fichero HTML en la cabecera de la página (elemento <head></head>) y se utiliza el tag <title>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>El título de la página</title>
</head>
<body></body>
</html>
Esta declaración dentro del código HTML es apropiada cuando utilizamos tecnologías en las que tenemos total control del código HTML que se envía a los navegadores web de los usuarios.
En el caso de utilizar tecnologías como las utilizadas en las Single Page Applications como React o Angular debemos hacer uso de Javascript para actualizar el valor del título de la página.
La propiedad title del objeto document nos proporciona esta posibilidad de actualizar el título de nuestra página. Por ejemplo la siguiente línea en javascript actualizará el título de la página:
function setTitlePageWithProduct(productName) {
document.title = "El jardinero en casa - Tienda - " + productName
}
Esta función se podría utilizar cada vez que se vaya a renderizar el componente que muestra la información del producto de la tienda.
Con toda esta información ya no hay excusas para que los desarrolladores no proporcionen buenos y accesibles títulos en sus páginas web.