Buenas prácticas al crear títulos accesibles para tus páginas
Siendo el título de la página uno de los elementos más simples al desarrollar un sitio Web, a la vez es uno de los puntos en los que más cometemos errores o lo obviamos por su simplicidad. Hoy quiero enseñarte cómo este recurso nos beneficia a todos, cómo le puedes sacar provecho aplicando buenas prácticas y cómo evitar los errores de siempre.
Empecemos por lo básico, el título se define en un documento Web con el metadato <title> y su propósito es describir de manera conscisa el contenido de la página actual.
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Preguntas Frecuentes</title>
</head>
</html>¿A quién beneficia?
- El título ayuda a todos los usuarios a identificar el contenido sin necesidad de navegar detalladamente por la página.
- Es esencial para personas con discapacidad visual, el título es el primer elemento que anuncia el lector de pantalla, de esta manera el usuario comprende el propósito de la página e identifica su posición actual dentro de un sitio.
- El título se muestra en la pestaña del navegador permitiendo que usuarios videntes puedan identificar y escoger rapidamente una página entre las pestañas abiertas. ¿Quién no tiene al menos 5 pestañas abiertas al mismo tiempo?
- Títulos correctamente definidos mejoran el SEO del sitio debido a que los motores de búsqueda indexan este contenido y lo muestran en la página de resultados como el encabezado principal, asegurando que los usuarios encuentren un sitio más fácilmente.
Buenas prácticas
1. El título debe siempre estar presente y debe contener texto
El lector de pantalla interpreta el metadato <title> y lo anuncia a la persona con discapacidad visual. Si dejas el título vacío o con un valor por defecto, el usuario se verá obligado a explorar la página para inferir su propósito lo cual se traduce a una mala experiencia.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Preguntas frecuentes</title>
</head>
</html>Errores comunes
Página sin título o dejar el título vacío
<!DOCTYPE html>
<html lang="es">
<head>
</head>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<title></title>
</head>
</html>2. El título se debe actualizar cuando la dirección Web cambia
Sí tu página se actualiza por un evento real de carga (se refresca la página) o es una aplicación de página única (SPA) en la que el contenido se carga dinámicamente con una llamada AJAX sin refrescar la página, el título siempre se actualiza reflejando el propósito del contenido nuevo, de lo contrario puede ocasionar confusión no solo para personas con discapacidad visual sino para usuarios con discapacidad cognitiva o limitaciones de aprendizaje.
Adicionalmente, cuando guardas una página a tus favoritos, el navegador toma el título como el valor por defecto para nombrar el marcador.
Errores comunes
Dejar el valor por defecto cuando creas la página con algun administrador de contenido (CMS).
//Valor por defecto
<!DOCTYPE html>
<html lang="es">
<head>
<title>Untitled Document</title>
</head>
</html>Establecer un título genérico para todo el sitio
//Título que no describe el propósito del sitio
<!DOCTYPE html>
<html lang="es">
<head>
<title>Contenido del documento</title>
</head>
</html>
//Título único para todo el sitio
<!DOCTYPE html>
<html lang="es">
<head>
<title>Amazon</title>
</head>
</html>3. El título debe ser comprensible e informativo
- Recuerda que el título identifica el propósito de la página por lo tanto debe ser comprensible e informativo.
- No hay límite en la longitud del título pero se recomienda que sea conciso sin afectar la intención a comunicar.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Pautas de Accesibilidad para el Contenido Web</title>
</head>
</html>Errores comunes
Títulos extensos o usando “Palabras clave” en vez de un título real, pensando que esto va a ayudar al SEO del sitio.
<!DOCTYPE html>
<html lang="es">
<head>
<title>
Servicios de accessibilidad, auditorias gratuitas, pautas de accesibilidad,
accesibilidad en tres pasos, complementos de accesibilidad
</title>
</head>
</html>4. Incluye el nombre de tu sitio Web
Una buena práctica es incluir el título de la página y el nombre del sitio para generer identidad. Pueden haber muchas páginas con el título “Preguntas Frecuentes”. Para ello, es recomendable siempre incluir el título de la página en primer lugar, de esta manera el usuario puede identificarlo rápidamente si tiene varias pestañas abiertas al mismo tiempo.
Para una mayor legibilidad te recomiendo incluir barra vertical o guión para separar el título del nombre del sitio.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Preguntas Frecuentes | LinkedIn</title>
</head>
</html>Errores comunes
- Incluir el nombre del sitio antes que el título de la página, siendo dificil para los usuarios distinguir la pagina cuando se tienen varias pestañas abiertas a la vez. Adicional, la experiencia para los usuarios que acceden usando un lector de pantalla también se verá afectada debido a que tendrán que escuchar el unicio de cada página una y otra vez.
- No es recomendable usar el símbolo slash o barra diagonal / ya que puede ser confuso para algunos usuarios con la URL del sitio. Por ejemplo, el lector de pantalla no anuncia los espacios en blanco y verbalizará el título igual que una URL.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Partes del Cerebro / Anatomía / Universidad Nacional</title>
</head>
</html>¡Llévalo a la práctica según tu rol!
El quid del asunto para integrar accesibilidad en un sitio es ser preventivos y no reactivos, esto significa que debemos aplicar lo aprendido desde el diseño y no cuándo tu sitio ya es público y un tester se da cuenta del error o peor aún tus usuarios. Así que ten presente las siguientes recomendaciones de acuerdo con tu rol:
- Si eres diseñador de contenido, recuerda definir la estructura, el tono y estilo de los títulos de todo el sitio.
- Si eres diseñador de interfaz no olvides incluir el título como una anotación en los prototipos de tu sitio en el editor de tu preferencia. Esto ayudará al desarrollador a tener claro el requerimiento antes de empezar a codificar ahorrando tiempo, esfuerzo, reprocesos y costos para la compañía.
- Si eres desarrollador frontend no olvides actualizar el título de la página cada vez que se actualiza la dirección Web o URL.
- Si eres tester, inspecciona el código y conoce cómo las personas con el lector de pantalla perciben este elemento.
