Composició tipogràfica: jerarquia, alineació i presentació visual (1.4.8)

A la lliçó anterior vas veure què fa llegible una lletra (forma, gruix, mida, interlineat) i com garantir que la persona la pugui ampliar i espaiar. Però un text amb bona tipografia pot continuar sent difícil de llegir si està mal compost: justificat amb buits enormes, centrat en paràgrafs llargs, tot en majúscules, amb una jerarquia visual que no coincideix amb l'estructura o amb icones que desapareixen en canviar la font. Aquesta lliçó tracta la composició tipogràfica: com s'organitza el text a la pàgina, què demana el criteri 1.4.8 Presentació visual i com evitar els problemes de les fonts web i les fonts d'icones.

Jerarquia visual coherent amb l'estructura

Una escala tipogràfica clara ajuda tothom a escanejar una pàgina: el títol principal destaca, els encapçalaments de secció es distingeixen del text i els de subsecció, dels de secció. Una progressió de mides amb una proporció constant (per exemple, multiplicar per 1,25 a cada nivell) dona coherència sense salts bruscos.

Però la jerarquia visual s'ha de correspondre amb la jerarquia real de l'HTML. Qui fa servir lector de pantalla navega per encapçalaments, i per a aquesta persona només existeix el que està marcat com a <h2>, <h3>, etc. Si un text sembla un encapçalament però és un paràgraf en negreta, incompleix 1.3.1 Informació i relacions; si un encapçalament es tria per la mida i no pel nivell, l'estructura es trenca. La redacció d'encapçalaments la vas veure al curs de redacció accessible i el seu marcatge el veuràs al nivell 3.

<!-- Incorrecte: sembla un encapçalament, però no ho és -->
<p class="titulo-grande"><strong>Requisits de l'ajut</strong></p>

<!-- Incorrecte: es tria h4 perquè «és més petit» -->
<h4>Requisits de l'ajut</h4>

<!-- Correcte: el nivell el dona l'estructura i la mida la dona el CSS -->
<h2 class="titulo-seccion">Requisits de l'ajut</h2>

Alineació, justificació i partició de paraules

• Alinea a l'esquerra el text de lectura en idiomes que s'escriuen d'esquerra a dreta. La vora esquerra recta ajuda a trobar el començament de cada línia.
• Evita el text justificat en pantalla. Per igualar l'amplada de les línies, el navegador estira els espais entre paraules i crea buits irregulars que formen «rius» blancs verticals. Molesten moltes persones amb dislèxia i empitjoren amb el zoom i en columnes estretes o al mòbil.
• Centra només textos molt curts: un títol o un botó. Un paràgraf centrat obliga a buscar el començament de cada línia en un lloc diferent.
• Partició de paraules: si necessites columnes estretes, la propietat hyphens: auto millora el repartiment de les línies, però només funciona si l'idioma de la pàgina està ben declarat (lang="ca"), una altra raó per complir 3.1.1 Idioma de la pàgina.

Èmfasi, majúscules i subratllat

• Negreta per destacar, amb moderació. La cursiva serveix per a títols d'obres o termes estrangers, però no per a passatges llargs.
• Majúscules seguides només en paraules soltes (etiquetes, botons curts). Si les fas servir, aplica-les amb CSS (text-transform: uppercase) i escriu el text en minúscules a l'HTML: així qui canviï l'estil recupera l'escriptura normal, i es redueix el risc que alguns lectors de pantalla lletregin paraules curtes en majúscules com si fossin sigles. Una mica d'espaiat entre lletres en millora la lectura.
• Reserva el subratllat per als enllaços. Si subratlles textos que no són enllaços, la gent intentarà prémer-los, i si treus el subratllat als enllaços, dependràs del color (recorda 1.4.1).
• No confiïs el significat només al format. La majoria dels lectors de pantalla no anuncien per defecte la negreta ni la cursiva. Si una cosa és important («El termini acaba avui»), digues-ho amb paraules.

1.4.8 Presentació visual (AAA) en detall

El criteri 1.4.8 Presentació visual, de nivell AAA, reuneix en un de sol les principals recomanacions de composició. Per als blocs de text exigeix que hi hagi un mecanisme, que pot ser el mateix navegador, per aconseguir el següent:

1. La persona pot triar els colors del text i del fons.
2. L'amplada no supera els 80 caràcters (40 en xinès, japonès o coreà).
3. El text no està justificat (alineat alhora a l'esquerra i a la dreta).
4. L'interlineat és d'almenys 1,5 dins dels paràgrafs, i l'espai entre paràgrafs és almenys 1,5 vegades l'interlineat.
5. El text es pot ampliar fins al 200 % sense tecnologies de suport i sense haver de desplaçar-se en horitzontal per llegir una línia en una finestra a pantalla completa.

No l'exigeixen ni el RD 1112/2018 (PDF, s'obre en una finestra nova) ni l'EN 301 549 (PDF, s'obre en una finestra nova), que es queden al nivell AA. Però és una llista de disseny excel·lent per a continguts de lectura llarga: normativa, notícies, informació sanitària, cursos. Convé no confondre'l amb 1.4.12, que ja coneixes:

Aspecte	1.4.12 Espaiat del text (AA)	1.4.8 Presentació visual (AAA)
Què demana	Que la pàgina aguanti sense trencar-se l'espaiat que apliqui la persona	Que la presentació sigui llegible per defecte o mitjançant un mecanisme
Interlineat	Ha de tolerar 1,5	Almenys 1,5
Espai entre paràgrafs	Ha de tolerar 2 vegades la mida de lletra	Almenys 1,5 vegades l'interlineat
Amplada, justificació i colors	No els regula	Màxim 80 caràcters, sense justificar, colors que es poden triar

Fonts web, fonts d'icones i text real

Fonts web

Les fonts que es descarreguen amb la pàgina triguen a arribar. Mentrestant, el navegador pot mostrar el text invisible o amb una font de reserva. Fes servir font-display: swap perquè el text es vegi des del primer moment i defineix una pila de reserva amb fonts de proporcions semblants, perquè el canvi no desplaci el contingut. Comprova també que tingui tots els caràcters del català (accents, ç, l·l, «») i de les altres llengües que facis servir.

Fonts d'icones

Les fonts d'icones assignen pictogrames a caràcters. Tenen dos problemes: si la persona aplica la seva pròpia font (ho fan moltes extensions per a la dislèxia o els modes de lectura), les icones es converteixen en quadrats o lletres sense sentit; i els lectors de pantalla poden llegir el caràcter o no anunciar res. Fes servir SVG en lloc seu, amb el tractament de text alternatiu que vas veure al curs d'imatges.

<!-- Incorrecte: icona de font sense alternativa -->
<button><i class="icon-search"></i></button>

<!-- Correcte: SVG decoratiu i nom accessible al botó -->
<button aria-label="Cerca">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

Text real, no imatges de text

Tot el que has vist en aquest curs (ampliar, reflow, espaiat, mode fosc, contrast forçat, elecció de font) només funciona amb text real. Un cartell convertit en imatge no s'adapta a res. El criteri 1.4.5 Imatges de text el vas tractar al curs d'imatges; des del punt de vista tipogràfic, la conclusió és la mateixa: maqueta el text amb HTML i CSS.

Més detall a Understanding 1.4.8 Visual Presentation (W3C).

Resum

• La jerarquia visual ha de coincidir amb l'estructura HTML: el nivell d'encapçalament el dona l'estructura i la mida, el CSS.
• Alinea a l'esquerra, no justifiquis, centra només textos molt curts i fes servir hyphens: auto amb l'idioma ben declarat.
• Negreta amb moderació, majúscules només en paraules soltes i aplicades amb CSS, subratllat només als enllaços i mai el significat confiat només al format.
• 1.4.8 Presentació visual (AAA): colors que es poden triar, màxim 80 caràcters, sense justificar, interlineat 1,5 i ampliació al 200 % sense desplaçament horitzontal.
• Fonts web amb font-display: swap, SVG en lloc de fonts d'icones i text real en lloc d'imatges de text.