Título de página, idioma, metadatos y orden del DOM

Hay fallos de accesibilidad que no se ven en el diseño porque viven en la parte alta del documento: el <title>, el atributo lang, la etiqueta viewport. Son triviales de corregir y, sin embargo, aparecen con frecuencia en las revisiones de accesibilidad. A ellos se suma el orden del DOM, que determina qué oye primero una persona y qué recibe el foco a continuación. Esta lección cubre los criterios 2.4.2 Titulado de páginas (A), 3.1.1 Idioma de la página (A), 3.1.2 Idioma de las partes (AA) y 1.3.2 Secuencia significativa (A).

El título de la página (2.4.2)

El <title> es lo primero que anuncia un lector de pantalla al cargar una página, lo que aparece en la pestaña del navegador, en el historial, en los marcadores y en los resultados de búsqueda. El criterio exige que describa el tema o el propósito de la página. En la práctica eso significa:

• Un título distinto para cada página. Diez páginas tituladas «Ayuntamiento de Cartagena» impiden distinguir pestañas y entradas del historial.
• La información específica primero y la general después: «Solicitud de cita previa - Ayuntamiento de Cartagena», no al revés, porque las pestañas truncan por el final y el lector de pantalla anuncia primero lo que va delante.
• En aplicaciones de una sola página (SPA), actualizar document.title en cada cambio de vista; lo veremos en el curso de frameworks.
• En procesos de varios pasos, incluir el paso: «Paso 2 de 4: datos de contacto - Matrícula».
• Si hay errores de formulario tras enviar, es buena práctica anteponerlo: «Error: revisa 2 campos - Solicitud de beca».

<title>Inicio</title>
<title>Documento sin título</title>
<title>index.html</title>

El idioma del documento (3.1.1)

El atributo lang en <html> indica al lector de pantalla qué sintetizador de voz y qué reglas de pronunciación usar. Si falta, el lector usa el idioma por defecto del sistema: un texto en castellano leído con voz inglesa es prácticamente ininteligible. También lo usan los navegadores para ofrecer traducción, los correctores y los motores de búsqueda.

<html lang="es">
<html lang="ca">
<html lang="eu">
<html lang="gl">

Usa códigos de la norma BCP 47: dos letras para el idioma (es, ca, eu, gl, en) y, solo si aporta algo, una región (es-ES, es-MX, pt-BR). Errores habituales: dejar lang="en" de la plantilla en una web en castellano, escribir lang="esp" o lang="spanish" (códigos inválidos) o cambiar el idioma de la interfaz sin actualizar el atributo. En webs multilingües, cada versión debe llevar su propio lang, y los enlaces a otras versiones pueden indicar el idioma de destino con hreflang y, si el texto del enlace está en ese idioma, con lang en el propio enlace.

El idioma de las partes (3.1.2)

Cuando dentro de una página aparece un fragmento en otro idioma, se marca con lang en el elemento que lo contiene para que el lector cambie de voz solo en ese tramo:

<p>La reunión del comité se celebrará en Bruselas bajo el lema
<q lang="en">Accessibility by default</q>.</p>

<ul>
  <li><a href="/ca/" lang="ca" hreflang="ca">Català</a></li>
  <li><a href="/en/" lang="en" hreflang="en">English</a></li>
</ul>

El criterio excluye nombres propios, términos técnicos, palabras de idioma indeterminado y palabras ya incorporadas al uso común (software, marketing, wifi): no hace falta marcarlas. Lo que sí hay que marcar son frases, citas y bloques completos: un resumen en inglés en un artículo científico, los testimonios de clientes en otro idioma, el nombre de las secciones de un selector de idioma.

Metadatos que afectan a la accesibilidad

La etiqueta viewport controla el zoom en móviles. Los valores user-scalable=no y maximum-scale=1 impiden ampliar con los dedos y suponen un fallo del criterio 1.4.4 Cambio de tamaño del texto; además, algunos navegadores (como Safari en iOS) ya los ignoran, así que no aportan nada. La versión correcta es:

<meta name="viewport" content="width=device-width, initial-scale=1">

La redirección o actualización automática con <meta http-equiv="refresh"> sin control del usuario desorienta y puede incumplir 2.2.1 Tiempo ajustable; sustitúyela por redirecciones del servidor. Y declara siempre <meta charset="utf-8"> al principio del <head>: los caracteres mal codificados («Ã±» en lugar de «ñ») hacen que el lector pronuncie disparates.

El orden del DOM (1.3.2)

Los lectores de pantalla leen el contenido en el orden del código, no en el orden visual, y el foco del teclado sigue ese mismo orden salvo que se manipule con tabindex. El criterio 1.3.2 Secuencia significativa exige que, cuando el orden de lectura afecte al significado, ese orden pueda determinarse por programa. En la práctica, lo más seguro es que el orden del DOM coincida con el orden lógico de lectura y con el orden visual.

CSS Grid, Flexbox (order, flex-direction: row-reverse) y el posicionamiento absoluto permiten mostrar en pantalla un orden distinto al del código. Es ahí donde aparece el problema.

<article class="producto">
  <h3>Silla ergonómica</h3>
  <button>Añadir al carrito</button>
  <p class="precio">189 €</p>
</article>

/* CSS */
.producto { display: flex; flex-direction: column; }
.precio { order: -1; }

Cómo comprobarlo

• <title>: lee la pestaña del navegador en varias páginas; deben ser distintos y descriptivos.
• lang: inspecciona <html> y escucha un párrafo con el lector de pantalla; busca bloques en otros idiomas sin marcar.
• viewport: busca user-scalable o maximum-scale en el código; prueba el zoom en un móvil real.
• Orden del DOM: desactiva CSS (en Firefox, menú Ver, Estilo de página, Sin estilo) y lee la página de arriba abajo; o recórrela con Tab y observa si el foco salta de forma ilógica.

Resumen

• Cada página necesita un <title> único y descriptivo, con lo específico delante (2.4.2).
• <html lang> con un código BCP 47 válido y coherente con el idioma real (3.1.1); los fragmentos en otro idioma, con lang en su contenedor (3.1.2).
• El viewport no debe bloquear el zoom; declara charset UTF-8 y evita los meta refresh.
• El orden del código debe coincidir con el orden lógico de lectura; no uses order ni posicionamiento para reordenar contenido que tiene sentido secuencial (1.3.2).
• Desactivar CSS y recorrer la página con Tab revela la mayoría de los problemas de orden.