Encapçalaments, paràgrafs, llistes i jerarquia de la informació

Una persona que veu la pàgina en capta l'estructura d'un cop d'ull: títols grans, blocs de text, pics. Una persona que fa servir un lector de pantalla, que navega amb el teclat o que amplia la pantalla al 400 % només capta aquesta estructura si està codificada de debò en el document. Aquesta lliçó explica com donar una estructura real a un contingut amb encapçalaments, paràgrafs i llistes, i quins criteris WCAG hi entren en joc.

Per què l'estructura ha de ser semàntica

El criteri 1.3.1 Informació i relacions (nivell A) exigeix que la informació que es transmet visualment (això és un títol, això és una llista, això és una taula) també estigui disponible mitjançant programació. A la pràctica vol dir que un títol ha de ser un element <h2>, no un paràgraf en negreta i de mida gran. La diferència no es veu, però se sent: el lector de pantalla anuncia «encapçalament de nivell 2» i permet saltar-hi directament amb la tecla H, o obrir una llista amb tots els encapçalaments de la pàgina per navegar-hi com per un índex.

<!-- Incorrecte: sembla un títol però no ho és -->
<p><strong><span class="grande">Com demanar cita</span></strong></p>

<!-- Correcte: és un títol de debò -->
<h2>Com demanar cita</h2>

Si treballes en un gestor de continguts (WordPress, Drupal, un CMS corporatiu), això es tradueix en una regla senzilla: fes servir sempre el selector de «Títol 2», «Títol 3», etc. de l'editor, mai la negreta ni la mida de lletra per simular un títol.

Jerarquia d'encapçalaments

Els encapçalaments formen un esquema, com l'índex d'un llibre. Les regles pràctiques són:

• Un únic <h1> per pàgina, que coincideix (o gairebé) amb el títol de la pàgina. En la majoria dels CMS el genera la plantilla; el redactor comença a <h2>.
• No saltar nivells cap avall: després d'un <h2> ve un <h3>, no un <h4>. Sí que es pot «pujar» diversos nivells en tancar una secció.
• No triar el nivell per l'aspecte. Si el <h3> de la teva plantilla et sembla petit, és un problema de disseny, no un motiu per fer servir <h2>.
• Cada encapçalament descriu el contingut que el segueix. El criteri 2.4.6 Encapçalaments i etiquetes (nivell AA) exigeix precisament això: que els encapçalaments descriguin el tema o el propòsit.
• Evita els encapçalaments buits o decoratius: un <h2> sense text o amb només una icona confon la navegació.

h1 Empadronar-se al municipi
  h2 Qui es pot empadronar
  h2 Documentació necessària
    h3 Si ets ciutadà espanyol
    h3 Si ets ciutadà estranger
  h2 Com presentar la sol·licitud
    h3 Per internet
    h3 Presencialment
  h2 Terminis i resolució

El criteri 2.4.10 Encapçalaments de secció (AAA) recomana, a més, que cada secció de contingut tingui el seu propi encapçalament. No és obligatori en AA, però és una bona pràctica que costa poc.

Paràgrafs que es poden llegir en pantalla

En pantalla, i especialment al mòbil, els paràgrafs llargs es converteixen en murs de text. Recomanacions:

• Entre 40 i 70 paraules per paràgraf, amb la idea principal a la primera frase.
• Un salt de paràgraf real (<p>), no dos <br> seguits. Els salts de línia forçats no creen paràgrafs per al lector de pantalla i trenquen el reflow en canviar l'amplada de pantalla.
• Text alineat a l'esquerra; el justificat crea «rius» d'espai en blanc que dificulten la lectura a les persones amb dislèxia (el criteri 1.4.8 Presentació visual, AAA, el desaconsella de manera explícita).
• Fes servir <strong> per destacar alguna cosa important, amb moderació. Si destaques mitja pàgina, no destaques res.

Llistes: quan i com

Les llistes són el recurs més infrautilitzat de la redacció web. Un lector de pantalla anuncia «llista de 4 elements» i permet saltar-la o recórrer-la, cosa que dona a la persona una idea immediata de l'extensió del contingut. Perquè això passi, la llista ha de ser una llista real (<ul> o <ol>), no línies que comencen amb un guionet o un asterisc escrit a mà.

• Llista numerada (<ol>): quan l'ordre importa: passos d'un procés, classificació.
• Llista de pics (<ul>): quan l'ordre no importa: requisits, opcions, documents.
• Llista de definicions (<dl>): per a parells terme-definició, com un glossari.

Mantén els elements d'una llista gramaticalment paral·lels (tots comencen amb un verb, o tots amb un nom) i evita les llistes d'un sol element o de més de 8-10 elements sense agrupar.

Com comprovar-ho

No cal ser tècnic per verificar l'estructura d'una pàgina:

• Extensions com HeadingsMap (Firefox i Chrome) o la pestanya «Structure» de WAVE mostren l'esquema d'encapçalaments. Si l'esquema no té sentit llegit tot sol, la pàgina no té estructura.
• Desactiva els estils (al Firefox: Visualitza > Estil de la pàgina > Sense estil). El que queda és el que «veu» un lector de pantalla: es distingeixen els títols i les llistes?
• A l'NVDA o al VoiceOver, obre la llista d'encapçalaments (Insert+F7 a l'NVDA) i comprova que pots anar a qualsevol secció en un parell de pulsacions.

Resum

• 1.3.1 Informació i relacions exigeix que els títols, les llistes i les taules estiguin codificats semànticament, no només amb aparença visual.
• Jerarquia d'encapçalaments: un h1, sense salts de nivell cap avall, i cada encapçalament descriu la seva secció (2.4.6).
• Paràgrafs de 40-70 paraules, alineats a l'esquerra, amb la idea principal al principi.
• Fes servir llistes reals (ul, ol, dl) per a passos, requisits i glossaris; mai guionets escrits a mà.
• Comprova-ho amb HeadingsMap, WAVE o la llista d'encapçalaments del lector de pantalla.