Títol de pàgina, idioma, metadades i ordre del DOM

Hi ha errades d'accessibilitat que no es veuen en el disseny perquè viuen a la part alta del document: el <title>, l'atribut lang, l'etiqueta viewport. Són trivials de corregir i, tanmateix, apareixen sovint en les revisions d'accessibilitat. S'hi afegeix l'ordre del DOM, que determina què sent primer una persona i què rep el focus a continuació. Aquesta lliçó cobreix els criteris 2.4.2 Pàgina titulada (A), 3.1.1 Idioma de la pàgina (A), 3.1.2 Idioma de les parts (AA) i 1.3.2 Seqüència significativa (A).

El títol de la pàgina (2.4.2)

El <title> és el primer que anuncia un lector de pantalla en carregar una pàgina, el que apareix a la pestanya del navegador, a l'historial, a les adreces d'interès i als resultats de cerca. El criteri exigeix que descrigui el tema o el propòsit de la pàgina. A la pràctica això vol dir:

• Un títol diferent per a cada pàgina. Deu pàgines titulades «Ajuntament de Cartagena» impedeixen distingir pestanyes i entrades de l'historial.
• La informació específica primer i la general després: «Sol·licitud de cita prèvia - Ajuntament de Cartagena», no a l'inrevés, perquè les pestanyes trunquen pel final i el lector de pantalla anuncia primer el que va davant.
• En aplicacions d'una sola pàgina (SPA), actualitzar document.title a cada canvi de vista; ho veurem al curs de frameworks.
• En processos de diversos passos, incloure-hi el pas: «Pas 2 de 4: dades de contacte - Matrícula».
• Si hi ha errors de formulari després d'enviar, és una bona pràctica posar-ho davant: «Error: revisa 2 camps - Sol·licitud de beca».

<title>Inici</title>
<title>Document sense títol</title>
<title>index.html</title>

L'idioma del document (3.1.1)

L'atribut lang a <html> indica al lector de pantalla quin sintetitzador de veu i quines regles de pronunciació ha de fer servir. Si falta, el lector fa servir l'idioma per defecte del sistema: un text en català llegit amb veu anglesa és pràcticament inintel·ligible. També el fan servir els navegadors per oferir traducció, els correctors i els motors de cerca.

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

Fes servir codis de la norma BCP 47: dues lletres per a l'idioma (es, ca, eu, gl, en) i, només si aporta alguna cosa, una regió (es-ES, es-MX, pt-BR). Errors habituals: deixar el lang="en" de la plantilla en un web en castellà, escriure lang="esp" o lang="spanish" (codis no vàlids) o canviar l'idioma de la interfície sense actualitzar l'atribut. En webs multilingües, cada versió ha de portar el seu propi lang, i els enllaços a altres versions poden indicar l'idioma de destinació amb hreflang i, si el text de l'enllaç és en aquest idioma, amb lang al mateix enllaç.

L'idioma de les parts (3.1.2)

Quan dins d'una pàgina apareix un fragment en un altre idioma, es marca amb lang a l'element que el conté perquè el lector canviï de veu només en aquest tram:

<p>La reunió del comitè se celebrarà a Brussel·les sota 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 criteri exclou noms propis, termes tècnics, paraules d'idioma indeterminat i paraules ja incorporades a l'ús comú (software, màrqueting, wifi): no cal marcar-les. El que sí que cal marcar són frases, cites i blocs complets: un resum en anglès en un article científic, els testimonis de clients en un altre idioma, el nom de les seccions d'un selector d'idioma.

Metadades que afecten l'accessibilitat

L'etiqueta viewport controla el zoom als mòbils. Els valors user-scalable=no i maximum-scale=1 impedeixen ampliar amb els dits i suposen una errada del criteri 1.4.4 Canvi de mida del text; a més, alguns navegadors (com Safari a iOS) ja els ignoren, així que no aporten res. La versió correcta és:

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

La redirecció o actualització automàtica amb <meta http-equiv="refresh"> sense control de l'usuari desorienta i pot incomplir 2.2.1 Temps ajustable; substitueix-la per redireccions del servidor. I declara sempre <meta charset="utf-8"> al principi del <head>: els caràcters mal codificats («Ã§» en lloc de «ç») fan que el lector pronunciï disbarats.

L'ordre del DOM (1.3.2)

Els lectors de pantalla llegeixen el contingut en l'ordre del codi, no en l'ordre visual, i el focus del teclat segueix aquest mateix ordre tret que es manipuli amb tabindex. El criteri 1.3.2 Seqüència significativa exigeix que, quan l'ordre de lectura afecti el significat, aquest ordre es pugui determinar per programa. A la pràctica, el més segur és que l'ordre del DOM coincideixi amb l'ordre lògic de lectura i amb l'ordre visual.

CSS Grid, Flexbox (order, flex-direction: row-reverse) i el posicionament absolut permeten mostrar a la pantalla un ordre diferent del del codi. És aquí on apareix el problema.

<article class="producto">
  <h3>Cadira ergonòmica</h3>
  <button>Afegeix al carretó</button>
  <p class="precio">189 €</p>
</article>

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

Com comprovar-ho

• <title>: llegeix la pestanya del navegador en diverses pàgines; han de ser diferents i descriptius.
• lang: inspecciona <html> i escolta un paràgraf amb el lector de pantalla; busca blocs en altres idiomes sense marcar.
• viewport: busca user-scalable o maximum-scale al codi; prova el zoom en un mòbil real.
• Ordre del DOM: desactiva el CSS (a Firefox, menú Visualitza, Estil de la pàgina, Sense estil) i llegeix la pàgina de dalt a baix; o recorre-la amb Tab i observa si el focus salta de manera il·lògica.

Resum

• Cada pàgina necessita un <title> únic i descriptiu, amb l'específic al davant (2.4.2).
• <html lang> amb un codi BCP 47 vàlid i coherent amb l'idioma real (3.1.1); els fragments en un altre idioma, amb lang al seu contenidor (3.1.2).
• El viewport no ha de bloquejar el zoom; declara el charset UTF-8 i evita els meta refresh.
• L'ordre del codi ha de coincidir amb l'ordre lògic de lectura; no facis servir order ni posicionament per reordenar contingut que té sentit seqüencial (1.3.2).
• Desactivar el CSS i recórrer la pàgina amb Tab revela la majoria dels problemes d'ordre.