Semàntica del text: èmfasi, cites, abreviatures, dates i figures

Els landmarks i els encapçalaments que vam veure a la lliçó anterior organitzen la pàgina en grans blocs. Dins d'aquests blocs hi ha el text, i l'HTML també té elements per descriure'l: èmfasi, cites, abreviatures, dates, codi, figures, canvis en un document. Alguns arriben a la persona usuària de lector de pantalla i d'altres, a la pràctica, no. Aquesta lliçó explica què aporta cadascun, què s'anuncia de debò i quan cal reforçar el marcatge amb text per no incomplir l'1.3.1 Informació i relacions.

Què arriba i què no arriba al lector de pantalla

El navegador exposa gairebé tots aquests elements a l'arbre d'accessibilitat. WAI-ARIA 1.2 (s'obre en una finestra nova) fins i tot va afegir rols específics per representar-los (emphasis, strong, blockquote, code, deletion, insertion, time, subscript, superscript). Però que una cosa sigui a l'arbre no vol dir que s'anunciï. Els lectors de pantalla decideixen què verbalitzen i, amb la configuració per defecte, els més utilitzats (NVDA, JAWS, VoiceOver) normalment no anuncien l'èmfasi, els ratllats ni el text ressaltat. Sí que solen anunciar les llistes, els encapçalaments, els enllaços, les taules i, segons la configuració, les cites en bloc i les figures.

D'aquí surt la regla pràctica de tota la lliçó: fes servir l'element semàntic correcte, perquè és el que demana l'HTML i el que aprofiten els navegadors, els lectors que sí que l'anuncien, els modes de lectura i els traductors; però si un significat és imprescindible per entendre el contingut, expressa'l també amb paraules.

Èmfasi: strong, em, b i i

L'HTML distingeix quatre elements que sovint es confonen. <strong> indica importància («No enviïs l'original»). <em> indica èmfasi que canvia el sentit («Jo no vaig dir això»). <b> crida l'atenció sobre un text sense donar-li més importància (paraules clau d'un resum, el nom d'un producte en una ressenya). <i> marca una veu o un mode diferent: termes tècnics, noms científics, pensaments d'un personatge o expressions en un altre idioma (que a més porten lang, com veuràs a la lliçó sobre títol i idioma).

Triar bé importa per als programes que processen el text i per a qui configura el seu lector perquè anunciï l'èmfasi. Però el decisiu és no dependre'n només. Si la negreta transmet informació que la persona necessita, aquesta informació ha de ser al text.

<p>Els camps en negreta són obligatoris.</p>
<label for="dni"><b>DNI</b></label>

Cites, abreviatures i dates

Cites

<blockquote> marca una cita llarga en bloc; NVDA i JAWS poden anunciar «cita» en entrar-hi i «fora de cita» en sortir-ne, de manera que la persona sap on acaba la veu de l'autor citat. <q> marca una cita breu dins d'una frase i el navegador hi afegeix les cometes amb CSS: no escriguis cometes a mà dins de <q> o apareixeran duplicades. <cite> serveix per al títol d'una obra (un llibre, una llei, una pel·lícula), no per al nom de la persona citada. No facis servir <blockquote> per sagnar text que no és una cita: el lector anunciarà una cita que no existeix.

Abreviatures i sigles

<abbr title="…"> permet associar el desenvolupament d'una sigla, però el title no apareix amb el teclat ni a les pantalles tàctils, i els lectors de pantalla no el llegeixen de manera fiable. La tècnica robusta és la que ja coneixes del curs de redacció: desenvolupar la sigla al text la primera vegada («el Servei Públic d'Ocupació Estatal (SEPE)») i, si vols, embolcallar-la a més en <abbr>. El criteri específic és el 3.1.4 Abreviatures (AAA), però una sigla que ningú no entén afecta qualsevol persona.

Dates i hores

<time> aporta una versió llegible per màquines mitjançant datetime, útil per a cercadors, calendaris i extensions. El lector de pantalla llegeix el text visible, així que aquest text ha de ser inequívoc:

<p>Termini de presentació: fins al
  <time datetime="2025-06-30">30 de juny de 2025</time>.</p>

Escriure «30/06/25» dins de <time> no ho fa més clar: el lector dirà «30 barra 06 barra 25».

Canvis, ressaltats, índexs i notes

<del> i <ins> representen text eliminat i afegit (per exemple, en una versió revisada d'unes bases o en un preu rebaixat) i <mark> ressalta text rellevant en un context, com els termes cercats en una pàgina de resultats. Tots tres es veuen amb claredat a la pantalla i, amb la configuració habitual, no s'anuncien. El cas típic en comerç electrònic:

<!-- Incorrecte: se sent «30 € 20 €» -->
<p><del>30 €</del> 20 €</p>

<!-- Correcte: el significat és al text -->
<p><del>Abans: 30 €</del> <ins>Ara: 20 €</ins></p>

Si el disseny no admet les paraules visibles, afegeix-les amb un text ocult visualment mitjançant la classe CSS adequada (ho veuràs al curs de CSS) i comprova el resultat amb un lector.

<sup> i <sub> tampoc no s'anuncien: m<sup>2</sup> es pot llegir «m 2». Per a unitats, fes servir el caràcter tipogràfic («m²») o el text («metres quadrats»). Per a les crides a notes a peu de pàgina, fes servir un enllaç amb un nom que s'entengui fora de context:

<p>La taxa es redueix un 50 %<sup><a href="#nota1" id="ref1" aria-label="Nota 1">1</a></sup>.</p>
…
<p id="nota1">1. Per a famílies nombroses. <a href="#ref1">Torna al text</a></p>

El nom «Nota 1» conté el text visible «1», així que compleix el 2.5.3 Etiqueta en el nom, i l'enllaç de tornada evita que la persona perdi la seva posició.

Figures, codi i separadors

<figure> agrupa un contingut autònom (una imatge, un gràfic, un fragment de codi, una cita destacada) amb el seu peu a <figcaption>. El navegador fa servir el <figcaption> com a nom de la figura i els lectors anuncien «figura» en entrar-hi. El peu no substitueix l'alt de la imatge: l'alt diu què mostra la imatge i el peu la contextualitza («Figura 3. Evolució de les sol·licituds, 2020-2024»). Si tots dos diuen el mateix, la persona ho sent dues vegades; com escriure cadascun ho vas veure al curs d'imatges.

Per al codi, <code> marca fragments, <pre> conserva espais i salts, <kbd> indica tecles que cal prémer i <samp>, la sortida d'un programa. Compte amb l'art ASCII o els diagrames fets amb caràcters dins de <pre>: el lector els lletreja símbol per símbol. Si és un dibuix, tracta'l com una imatge amb la seva alternativa textual.

Finalment, els separadors. <hr> representa un canvi de tema i s'exposa com a separador. En canvi, els caràcters utilitzats com a separadors visuals («Inici | Tràmits | Contacte») es llegeixen tal qual: «barra vertical». Si els enllaços formen un grup, són una llista; el separador va en CSS. I <br> serveix per a salts de línia amb significat (una adreça postal, els versos d'un poema), no per crear espai ni per simular llistes.

Resum

• Fes servir cada element de text pel seu significat (strong, em, blockquote, q, cite, abbr, time, figure), no pel seu aspecte.
• Amb la configuració habitual, els lectors de pantalla no anuncien èmfasi, ratllats, ressaltats ni superíndexs: si el significat és imprescindible, posa'l en paraules (1.3.1).
• Desenvolupa les sigles al text i escriu dates inequívoques; title i datetime no es llegeixen.
• figcaption dona nom a la figura, però no substitueix l'alt de la imatge.
• Res de separadors amb caràcters, blockquote per sagnar ni br per maquetar.