Microtextos: títols de pàgina, botons, etiquetes i missatges

Els textos més curts d'un web són els que més es llegeixen: el títol de la pestanya, el text d'un botó, l'etiqueta d'un camp, un missatge d'error. S'anomenen microtextos (en anglès, microcopy, i la disciplina que en té cura, UX writing) i, encara que els dibuixi l'equip de disseny i els programi el de desenvolupament, les paraules són responsabilitat de qui redacta. Aquesta lliçó se centra en els criteris WCAG que depenen directament d'aquestes paraules. La part visual dels formularis (on va cada etiqueta, com es mostren els errors) la veuràs al curs N2-C4 «Disseny d'interfícies accessibles», i el codi, al N3-C2 «Formularis accessibles».

Títols de pàgina (2.4.2)

El criteri 2.4.2 Pàgina titulada (nivell A) exigeix que cada pàgina tingui un títol que en descrigui el tema o el propòsit. És el text de l'element <title>: el primer que anuncia el lector de pantalla en carregar la pàgina i el que apareix a la pestanya del navegador, a l'historial, a les adreces d'interès i als resultats dels cercadors. Pautes de redacció:

• El més específic primer: el tema de la pàgina i després el nom del lloc. Així s'identifica abans a les pestanyes i en sentir-lo amb el lector de pantalla.
• Un títol diferent per a cada pàgina. Si totes es diuen igual, l'historial i les pestanyes no serveixen per orientar-se.
• En els processos per passos, indica el pas: «Pas 2 de 4: dades personals». Algunes administracions afegeixen a més «Error:» al principi del títol quan el formulari es torna a carregar amb errors, perquè la persona ho sàpiga tan bon punt s'anuncia la pàgina.

<!-- Incorrecte: genèric i igual a totes les pàgines -->
<title>Ajuntament - Inici</title>

<!-- Correcte: el més específic primer, el lloc després -->
<title>Demanar cita per al padró - Ajuntament de Vilanova</title>

<!-- Correcte: pas d'un procés -->
<title>Pas 2 de 4: dades personals - Sol·licitud de beca - Seu electrònica</title>

En la majoria dels gestors de continguts el títol s'emplena en un camp propi, sovint anomenat «títol SEO» per les extensions de posicionament. Aquest camp és el que es converteix en el <title>: no l'omplis de paraules clau repetides, perquè el lector de pantalla les llegirà totes.

Botons i enllaços d'acció

Un botó diu què passa quan el prems. La fórmula més fiable és verb + objecte: «Enviar la sol·licitud», «Descarregar el justificant», «Afegir a la cistella», «Demanar cita». Evita els textos que només tenen sentit mirant el context visual («Acceptar», «D'acord», «Següent» en un diàleg amb diverses opcions) i els que canvien de nom d'una pàgina a una altra.

Això últim ho exigeix el criteri 3.2.4 Identificació coherent (nivell AA): els components amb la mateixa funció dins d'un conjunt de pàgines s'identifiquen de la mateixa manera. Si el cercador es diu «Cercar» a la portada, no es pot dir «Trobar» a la seu electrònica ni ser només una lupa sense nom a les fitxes.

El que es veu i el que se sent: 2.5.3 Etiqueta en el nom

El criteri 2.5.3 Etiqueta en el nom (nivell A) exigeix que, quan un control té un text visible, el seu nom accessible (el que anuncia el lector de pantalla) contingui aquest text; la bona pràctica és que comenci per ell. El motiu són les persones que fan servir el control per veu: diuen el que veuen («prémer Llegir més») i, si el nom intern és un altre, el programa no troba el control.

Afecta directament qui redacta quan s'afegeix text ocult per donar context a un enllaç, com recomanàvem a la lliçó d'enllaços. Aquest text ha de completar el visible, mai substituir-lo:

<!-- Incorrecte: el nom accessible no conté «Llegir més» -->
<a href="/becas" aria-label="Obrir la notícia sobre beques">Llegir més</a>

<!-- Correcte: el nom comença pel text visible -->
<a href="/becas" aria-label="Llegir més sobre la convocatòria de beques">Llegir més</a>

El teu paper: proposar aquest text i revisar que comenci per les paraules visibles.

Etiquetes, instruccions i camps obligatoris (3.3.2)

El criteri 3.3.2 Etiquetes o instruccions (nivell A) demana que hi hagi etiquetes o instruccions quan el contingut requereix que la persona introdueixi dades. A la pràctica, això vol dir triar bé les paraules:

• Etiquetes breus i concretes: «Correu electrònic», no «Contacte»; «Número d'expedient», no «Referència».
• El format, a l'etiqueta o just a sota: «Data de naixement (per exemple, 15/03/1985)». Aquí sí que s'escriu la data amb números, perquè és el format que el camp espera.
• Els obligatoris, amb paraules: «(obligatori)» a cada camp o, si gairebé tots ho són, una frase al principi: «Tots els camps són obligatoris excepte els marcats com a (opcional)».
• Les instruccions generals, abans del formulari: quins documents hauràs d'adjuntar, quant es triga («uns 10 minuts») i si es pot desar i continuar més tard.

Missatges d'error (3.3.1 i 3.3.3)

El criteri 3.3.1 Identificació d'errors (nivell A) exigeix que, quan es detecta un error automàticament, s'identifiqui el camp i es descrigui l'error en text. El 3.3.3 Suggeriments davant d'errors (nivell AA) afegeix que, si se sap com corregir-lo, se li digui a la persona, tret que això posi en risc la seguretat (per això és correcte un missatge com «L'usuari o la contrasenya no són correctes», sense dir quin dels dos falla). Un bon missatge d'error respon a tres preguntes: on és el problema, què passa i com s'arregla. I ho fa sense culpar ni espantar.

Missatge que no ajuda	Missatge que ajuda
Error 422: entrada no vàlida.	El DNI ha de tenir 8 números i una lletra. Per exemple: 12345678Z.
Camp obligatori.	Escriu la teva data de naixement.
Format incorrecte.	Escriu la data amb números: dia, mes i any. Per exemple: 15/03/1985.
Ha introduït dades errònies.	El codi postal ha de tenir 5 números.

Quan l'acció té efectes legals o econòmics (signar, pagar, presentar una sol·licitud), el criteri 3.3.4 Prevenció d'errors (legals, financers, dades), de nivell AA, exigeix com a mínim una d'aquestes garanties: que l'enviament es pugui anul·lar, que es comprovin les dades introduïdes o que la persona les pugui revisar, corregir i confirmar abans d'enviar-les. El text d'aquesta pantalla de revisió també és teu: «Revisa les teves dades. Quan premis Presentar la sol·licitud, ja no les podràs canviar».

Missatges d'estat i altres textos breus

El criteri 4.1.3 Missatges d'estat (nivell AA) exigeix que els avisos que apareixen sense tornar a carregar la pàgina («producte afegit», «12 resultats») s'anunciïn al lector de pantalla sense moure-li el focus. Que s'anunciïn és tasca de desenvolupament; que s'entenguin, de redacció. Com que la persona els sent una sola vegada i fora de context, han de ser complets:

• «Producte afegit a la cistella. Tens 3 productes.» millor que «Fet!».
• «12 resultats per a beques de menjador» millor que «12».
• «Desant…» i després «Canvis desats», no una icona que gira sense text.
• Per als temps límit (2.2.1 Temps ajustable, nivell A): «La teva sessió es tancarà d'aquí a 2 minuts per inactivitat», amb un botó «Continuar connectat».
• Per als estats buits: «No hi ha cites lliures en aquesta oficina aquest mes. Prova-ho en una altra oficina o demana cita per telèfon», en lloc d'una pantalla en blanc.

Un glossari d'interfície

La coherència que demana 3.2.4 és molt més fàcil amb un glossari compartit entre redacció, disseny i desenvolupament: una llista de termes amb la paraula triada per a cada concepte («cita prèvia», mai «cita» en unes pàgines i «torn» en unes altres), els textos dels botons més habituals i plantilles per als missatges d'error. Cap en un full de càlcul i evita desenes d'incoherències.

Resum

• 2.4.2 Pàgina titulada (A): títols únics, amb el més específic primer i el pas actual en els processos.
• Botons amb verb i objecte, i el mateix nom per a la mateixa funció en tot el lloc (3.2.4).
• 2.5.3 Etiqueta en el nom (A): el nom accessible conté, i millor si hi comença, el text visible.
• Etiquetes concretes, format indicat i obligatoris amb paraules; el placeholder no és una etiqueta (3.3.2).
• Errors que diuen on, què i com arreglar-ho (3.3.1 i 3.3.3), i missatges d'estat complets (4.1.3).