Correu electrònic i butlletins accessibles

El correu electrònic és el canal digital més utilitzat per qualsevol organització i un dels menys cuidats pel que fa a l'accessibilitat. Els butlletins es maqueten com una sola imatge, els correus interns porten captures de pantalla en lloc de text i els enllaços diuen «feu clic aquí». I, a diferència del web, al correu no hi ha un equip tècnic que corregeixi després: el que s'envia, s'envia. Aquesta lliçó cobreix els correus quotidians, els butlletins en HTML i com comprovar-los abans de prémer «Envia».

Correus quotidians

No cal un HTML sofisticat perquè un correu sigui accessible o inaccessible. El que importa:

• Assumpte clar i concret: «Acta de la reunió del 12 de març i tasques pendents», no «Reunió». És el primer que llegeix tothom i l'únic que llegeix qui rep cent correus al dia.
• El més important a les primeres línies: què es demana, a qui i per a quan.
• Estructura: paràgrafs curts, llistes reals (amb l'eina de llista del client de correu, no amb guions), i si el correu és llarg, títols fent servir els estils de l'editor (Outlook i Gmail permeten encapçalaments en alguns casos; si no, com a mínim paràgrafs curts amb una frase destacada en negreta a l'inici).
• Text, no captures: si copies una dada d'un web o d'un document, enganxa-la com a text. Una captura de pantalla d'una taula és il·legible per a un lector de pantalla i per a qui amplia el text.
• Enllaços amb sentit: «Consulta el calendari de formació» en lloc de l'URL crua o «aquí».
• Adjunts accessibles: si adjuntes un document, que sigui accessible (lliçó següent) i esmenta al text què és i què conté.
• Signatura sòbria: text, no imatge; si inclou logotip, amb alt; sense bàners amb text en imatge.
• Font de 16 píxels (14 com a mínim), color negre o molt fosc sobre blanc, sense fons de color ni paper pintat.

Butlletins en HTML

Els butlletins (newsletters) s'envien a milers de persones i es construeixen amb eines com Mailchimp, Brevo, Acumbamail o plantilles pròpies. L'HTML de correu és tècnicament arcaic (taules per maquetar, CSS en línia) perquè els clients de correu, especialment Outlook, en suporten molt poc. Tot i així, es pot fer accessible:

Estructura i semàntica

• Declara l'idioma: <html lang="ca"> (i, a les eines, l'ajust d'idioma de la campanya).
• Fes servir encapçalaments reals (<h1>, <h2>) per als títols de les seccions, no paràgrafs en negreta.
• Les taules de maquetació han de portar role="presentation" perquè el lector de pantalla no anunciï «taula de 3 files i 1 columna» a cada bloc. Les eines serioses ho fan per defecte; comprova-ho en una visualització prèvia del codi.
• Una sola columna: funciona al mòbil, amb zoom i en lectura lineal.

Imatges

• Text alternatiu a totes: molts clients i servidors corporatius (l'Outlook d'escriptori, per exemple) bloquegen les imatges per defecte, així que l'alt és també el que veuen moltes persones sense discapacitat fins que les descarreguen.
• Mai el butlletí sencer com una imatge. És la pràctica més excloent: sense imatges carregades no hi ha res, i amb imatges tampoc per a qui no hi veu.
• Res de text en imatges per a titulars o botons (1.4.5). Els botons «a prova de bales» es construeixen amb cel·les de taula i text real.

Text i enllaços

• Mida mínima de 16 px al cos, interlineat d'1,5, contrast de 4,5:1 com a mínim. Evita el text gris clar sobre blanc, el pecat capital dels butlletins «elegants».
• Enllaços subratllats i amb text descriptiu. En molts butlletins tots els enllaços són «Llegeix-ne més»; inclou-hi el títol de la notícia.
• Enllaç de «mostra al navegador» al principi i de baixa al final, en text.
• Versió en text pla: gairebé totes les eines la generen; revisa-la, perquè és la que llegeixen alguns clients i la que serveix de reserva.

Mode fosc

Els clients de correu apliquen el seu propi mode fosc, de vegades invertint colors de manera imprevisible. Prova el butlletí en mode fosc a Gmail, Outlook i Apple Mail: logotips negres que desapareixen, textos que perden contrast. Els logotips en PNG amb transparència i un traç clar, i els colors de text definits explícitament, redueixen els problemes.

<!-- Bloc de butlletí accessible (simplificat) -->
<table role="presentation" width="100%">
  <tr><td>
    <h2 style="font-size:22px;color:#1A1A1A;">Nova convocatòria d'ajuts</h2>
    <p style="font-size:16px;line-height:1.5;color:#1A1A1A;">Termini obert fins al 30 de juny.</p>
    <a href="https://ejemplo.es/ayudas" style="color:#0B3D91;text-decoration:underline;">Consulta les bases de la convocatòria</a>
  </td></tr>
</table>

Com comprovar-ho abans d'enviar

• Envia't una prova i llegeix-la amb les imatges bloquejades: s'entén tot?
• Obre-la al mòbil amb la mida de lletra del sistema augmentada: hi ha desplaçament horitzontal o text tallat?
• Activa-la en mode fosc: es veu el logotip? El text manté el contrast?
• Recorre els enllaços amb Tab: tenen sentit llegits sols?
• Passa l'HTML per un comprovador (les eines d'enviament solen incloure'n un de bàsic; també pots enganxar el codi en un validador o a la pestanya d'accessibilitat del navegador).

Resum

• Correus quotidians: assumpte concret, el més important primer, llistes reals, text en lloc de captures, enllaços amb sentit, adjunts accessibles.
• Butlletins: idioma declarat, encapçalaments reals, taules de maquetació amb role="presentation", una columna.
• Alt a totes les imatges, mai el butlletí com a imatge, botons amb text real, 16 px i contrast 4,5:1.
• Enllaços subratllats i descriptius, versió en text pla revisada, prova en mode fosc.
• Abans d'enviar: prova amb imatges bloquejades, al mòbil amb lletra gran, en mode fosc i recorrent els enllaços.