Enllaços amb sentit, abreviatures i idioma del contingut

Tres detalls de redacció que passen desapercebuts a la majoria dels lectors tenen un impacte enorme en les persones que fan servir tecnologies de suport: el text dels enllaços, les abreviatures i l'idioma declarat del contingut. Tots tres depenen del redactor o del gestor de continguts, no de l'equip de desenvolupament, i tots tres tenen criteris WCAG concrets al darrere: 2.4.4 Propòsit dels enllaços (en context), 3.1.1 Idioma de la pàgina i 3.1.2 Idioma de les parts.

Enllaços amb sentit (2.4.4)

Les persones que fan servir un lector de pantalla sovint naveguen per la llista d'enllaços de la pàgina, fora de context. Si aquesta llista diu «llegir més, llegir més, aquí, clica aquí, més informació», no serveix de res. El criteri 2.4.4 Propòsit dels enllaços (en context), de nivell A, exigeix que el propòsit de cada enllaç es pugui determinar a partir del seu text, o del text juntament amb el seu context immediat (la mateixa frase, el mateix paràgraf, la mateixa cel·la de taula o l'element de llista que el conté). El criteri 2.4.9 Propòsit dels enllaços (només enllaços), de nivell AAA, va més enllà i demana que el text de l'enllaç sigui suficient per si mateix.

Regles pràctiques:

• El text de l'enllaç descriu la destinació o l'acció: «Descarregar el formulari de sol·licitud (PDF, 230 KB)», «Consultar el calendari fiscal».
• Evita «aquí», «aquest enllaç», «prem», «més informació» com a únic text.
• No facis servir l'URL com a text tret que sigui molt curt i reconeixible; un lector de pantalla llegirà «hac te te pe dos punts barra barra…».
• Els enllaços amb el mateix text haurien de portar a la mateixa destinació; si tens deu «Veure detall», inclou el títol de cada notícia a l'enllaç (pot anar ocult visualment).
• Avisa si l'enllaç s'obre en una finestra nova o descarrega un fitxer, i indica'n el format i la mida.
• Els enllaços s'han de distingir del text normal per alguna cosa més que el color: el subratllat, per exemple. Ho veurem en el criteri 1.4.1 Ús del color al curs de color i contrast.

<!-- Incorrecte -->
<p>Per sol·licitar la beca, prem <a href="/becas/solicitud">aquí</a>.</p>

<!-- Correcte -->
<p>Pots <a href="/becas/solicitud">sol·licitar la beca a la seu electrònica</a>.</p>

<!-- Correcte: document descarregable -->
<a href="/docs/bases.pdf">Bases de la convocatòria (PDF, 1,2 MB)</a>

Abreviatures i sigles

Les abreviatures són un obstacle doble: de comprensió (no tothom sap què és l'«AEAT» o l'«IRPF») i de lectura per veu (un sintetitzador pot llegir «BOE» com a paraula o lletra per lletra segons el context). El criteri 3.1.4 Abreviatures (AAA) demana un mecanisme per conèixer la forma expandida, però, tot i que sigui AAA, la bona pràctica és senzilla i gratuïta:

• Escriu la forma completa la primera vegada que apareix a la pàgina, seguida de la sigla entre parèntesis: «Agència Estatal d'Administració Tributària (AEAT)». A partir d'aquí ja pots fer servir la sigla.
• Pots marcar la sigla amb <abbr title="Agència Estatal d'Administració Tributària">AEAT</abbr>. Tingues en compte que l'atribut title no és accessible amb el teclat ni en pantalla tàctil, de manera que no substitueix l'expansió en el text; és un complement.
• Evita les abreviatures innecessàries en text corregut: «p. ex.», «etc.», «aprox.» s'escriuen millor completes.
• Les sigles molt conegudes (ONU, DNI, IVA) no necessiten expansió, però, en cas de dubte, expandeix-les.

Idioma de la pàgina i de les parts (3.1.1 i 3.1.2)

Un lector de pantalla canvia de sintetitzador de veu segons l'idioma declarat. Si una pàgina en castellà no el declara, o el declara malament, es llegirà amb pronúncia anglesa i serà gairebé inintel·ligible. El criteri 3.1.1 Idioma de la pàgina (nivell A) exigeix que l'idioma principal estigui indicat mitjançant programació: en HTML, l'atribut lang de l'element <html>. El criteri 3.1.2 Idioma de les parts (nivell AA) exigeix el mateix per a qualsevol fragment en un altre idioma, excepte noms propis, termes tècnics, paraules d'idioma indeterminat i expressions que ja formen part de l'idioma del voltant.

<html lang="ca">
...
<p>La Comissió va publicar l'informe <span lang="en">Web Accessibility
in Europe: state of play</span> al març.</p>

<p>Página en español: <a href="/es/" lang="es" hreflang="es">Inicio</a></p>

Què vol dir això per a qui redacta:

• Comprova que la plantilla del lloc declara lang="es" (o ca, eu, gl; per al valencià, ca o la variant ca-valencia). Moltes plantilles comprades vénen amb lang="en" i ningú no ho canvia.
• En llocs multilingües, cada versió declara el seu idioma, i el selector d'idioma mostra cada opció escrita en el seu propi idioma («Català», «English») amb l'atribut lang corresponent.
• Quan incloguis una cita o un títol en un altre idioma dins d'un paràgraf, demana a l'editor que el marqui amb lang. Alguns editors (TinyMCE, CKEditor, Gutenberg amb els blocs adequats) ho permeten; si el teu no, és una petició raonable a l'equip tècnic.
• Els anglicismes ja assimilats («software», «màrqueting», «web») no necessiten marcatge.

Com comprovar-ho

• Enllaços: a l'NVDA, Insert+F7 mostra la llista d'enllaços. Llegeix-la sense mirar la pàgina: saps on porta cadascun?
• Idioma: axe DevTools i WAVE detecten l'absència de l'atribut lang o un valor no vàlid.
• Abreviatures: busca grups de majúscules i comprova que la primera aparició estigui expandida.

Resum

• 2.4.4 Propòsit dels enllaços (A): el text de l'enllaç, amb el seu context immediat, ha d'indicar on porta. Res de «aquí» ni «llegir més» sense res més.
• Indica el format i la mida en els enllaços a documents i avisa de les obertures en una finestra nova.
• Expandeix les sigles la primera vegada; <abbr> és un complement, no un substitut.
• 3.1.1 Idioma de la pàgina (A) i 3.1.2 Idioma de les parts (AA): atribut lang a <html> i als fragments en un altre idioma.
• Comprova la llista d'enllaços del lector de pantalla i l'atribut lang amb WAVE o axe.