Landmarks, encapçalaments, llistes i regions

Una persona que veu la pantalla capta l'estructura d'una pàgina en un segon: on és el menú, quin és el contingut principal, què és un títol i què és una llista. Una persona que fa servir un lector de pantalla només pot captar aquesta estructura si és al codi. Aquesta lliçó tracta de les tres eines que la fan explícita: les regions o landmarks, els encapçalaments i les llistes. Són al darrere de quatre criteris: 1.3.1 Informació i relacions (A), 2.4.1 Evitar blocs (A), 2.4.6 Encapçalaments i etiquetes (AA) i 2.4.10 Encapçalaments de secció (AAA).

Landmarks: el mapa de la pàgina

Els landmarks són regions amb un rol reconegut que permeten saltar directament d'una zona a una altra. A NVDA es recorren amb la tecla D; a VoiceOver, amb el rotor. L'HTML5 els crea de manera implícita amb aquests elements:

Dues regles d'or. Primera: hi ha d'haver un únic <main> visible i convé que tot el contingut visible sigui dins d'algun landmark; el contingut «orfe» fora d'ells és difícil de trobar. Segona: si hi ha diversos landmarks del mateix tipus, dona'ls un nom que els distingeixi amb aria-label o aria-labelledby.

<header>
  <nav aria-label="Principal">…</nav>
</header>
<main id="contenido">
  <h1>Sol·licitud de certificat d'empadronament</h1>
  <nav aria-label="Passos del tràmit">…</nav>
  …
</main>
<aside aria-labelledby="t-rel">
  <h2 id="t-rel">Tràmits relacionats</h2>…
</aside>
<footer>…</footer>

Els landmarks són una de les tècniques acceptades per complir 2.4.1 Evitar blocs, juntament amb els enllaços de salt (skip links) que veurem al curs de teclat. Convé oferir-los tots dos: els landmarks serveixen a qui fa servir lector de pantalla; l'enllaç de salt serveix també a qui navega amb teclat sense lector.

Encapçalaments: l'índex del contingut

Els encapçalaments <h1>…<h6> són el mètode de navegació més utilitzat per les persones usuàries de lectors de pantalla, segons les enquestes periòdiques de WebAIM. Amb la tecla H salten d'un al següent; amb 1…6 van a un nivell concret; i poden obrir la llista completa d'encapçalaments com si fos l'índex d'un llibre.

Perquè aquest índex funcioni:

• Un sol <h1> per pàgina, que coincideixi amb el tema de la pàgina (normalment igual o semblant al <title>). L'HTML en permet diversos i les WCAG no ho prohibeixen, però amb un de sol l'índex sol ser més clar.
• No saltis nivells cap avall: d'<h2> es passa a <h3>, no a <h4>. En pujar sí que se'n poden saltar (d'<h4> tornar a <h2> quan canvies de secció).
• El nivell reflecteix la jerarquia del contingut, no la mida visual. Si el disseny demana un <h3> gran, canvia-ho amb CSS.
• Els encapçalaments descriuen el contingut que segueix (2.4.6). «Informació» no descriu res; «Documentació que has d'aportar» sí.
• No facis servir encapçalaments per donar format a text que no encapçala res (un preu destacat, un eslògan), ni text en negreta i gran per al que sí que és un encapçalament.

<p class="titulo-seccion">Horaris d'atenció</p>
<div class="h2">Cita prèvia</div>

El criteri 2.4.10 Encapçalaments de secció és AAA i demana que cada secció de contingut tingui el seu encapçalament. No és obligatori en el nivell AA que exigeix la normativa espanyola, però a la pràctica és la manera natural d'organitzar un text llarg i convé seguir-lo.

Llistes: quants elements i quins

Quan una llista està marcada amb <ul>, <ol> o <dl>, el lector anuncia «llista de 5 elements» i permet saltar-la sencera o recórrer-la element per element. Si en lloc d'això hi ha paràgrafs separats per guions o <br>, la persona no sap quants elements hi ha ni on acaba l'enumeració. Regles:

• <ul> per a conjunts sense ordre (menús, requisits, etiquetes); <ol> quan l'ordre importa (passos d'un procés, classificació).
• <dl>, <dt>, <dd> per a parells terme-definició, com fitxes de dades (Expedient: 2024/0123; Estat: en tramitació).
• Els únics fills directes d'<ul> i <ol> han de ser <li>. Un <div> intermedi trenca la llista en molts lectors.
• Compte amb list-style: none: Safari amb VoiceOver pot deixar d'anunciar com a llista les que no tenen pics. Si la semàntica de llista importa (un menú de navegació), afegeix role="list" a l'<ul> per recuperar-la.
• No facis servir llistes per maquetar en columnes coses que no són llistes.

Regions i agrupacions

Per a blocs que no encaixen en un landmark estàndard però tenen entitat pròpia (un tauler de filtres, un mapa interactiu, un bloc d'estadístiques), fes servir <section> amb nom accessible, que es converteix en role="region". Sense nom, <section> és semànticament un <div>. No converteixis cada targeta o cada paràgraf en regió: deu regions en una pàgina són soroll i deixen de servir per orientar-se. Com a orientació, entre tres i vuit landmarks per pàgina sol ser un interval raonable. A la lliçó «Patrons d'estructura per a pàgines reals» veuràs com es combinen landmarks, regions, encapçalaments i llistes a les plantilles de portada, llistat, fitxa i article.

Resum

• Els landmarks (header, nav, main, aside, footer, search, section amb nom) creen el mapa de la pàgina; un sol main i noms diferents quan es repeteix un tipus.
• Els encapçalaments formen l'índex: un h1, sense salts de nivell cap avall, amb textos que descriguin el contingut (2.4.6).
• Un text que sembla un títol però no és hN, o a l'inrevés, incompleix l'1.3.1.
• Les llistes reals es marquen amb ul, ol o dl; només li com a fills directes.
• Comprova-ho sempre amb la llista d'encapçalaments i de landmarks d'un lector de pantalla o d'una extensió d'inspecció.