Lesson learned: Newsletter e DEM accessibili per persone ipo- e non vedenti

Nelle scorse settimane abbiamo raccontato l'analisi puntuale e le lessons learned acquisite testando un data report contente diverse tipologie di dati e grafici ed alcuni aspetti dell'attività di test di accessibilità che abbiamo condotto su diverse tipologie di prodotti digitali con la collaborazione di Michele Landolfi e con il supporto dell’Unione Ciechi di Bologna.

Oggi vi raccontiamo i risultati dell'analisi effettuata su una newsletter commerciale DEM (Direct Email Marketing) che pubblicizza prodotti in ambito fashion, composta principalmente da alcune grandi foto emozionali, e una piccola vetrina di prodotti direttamente collegati all’e-commerce.

La newsletter in questione è stata costruita all’interno di Stripo (un builder di template web-based) e successivamente inviata tramite Mailchimp.

Come anticipato, il template che abbiamo sottoposto al test è composto prevalentemente di immagini, con pochissimo testo descrittivo, concentrato soprattutto su una serie di brevi frasi che accompagnano i prodotti esposti.

Errori più comuni all'interno di Newsletter e DEM

Leggendo la newsletter tramite screen reader ci siamo immediatamente accorti di una serie di problemi facilmente risolvibili.

• Microcopy ripetitivo: tutte le call to action relative ai prodotti in evidenza riportano lo stesso copy, ad esempio shop now.
  Se in una pagina ci sono più CTA, è bene che ciascuna riporti nel suo testo un’azione specifica e non ripetuta.
• Il testo alternativo delle immagini, quando inserito, è poco descrittivo, e non restituisce informazioni cruciali per l’utente quali il colore e il modello del prodotto (informazioni utili non solo agli ipovedenti, ma anche a chi soffre di daltonismo).
  Consigliamo di inserire sempre il testo alternativo, ed elaborare un testo che sia realmente informativo per chi lo legge.
• Assenza di testi descrittivi: una lacuna ancora più importante riguarda gli alt-text non compilati in maniera corretta.
  E' bene quindi cercare di inserire all’interno della mail anche blocchi di testo descrittivo, non solo immagini, anche a discapito del layout generale della pagina.
• L’inserimento di divisori per spaziare i componenti tra loro rende la lettura tramite screen reader frammentata e di difficile comprensione.
  Suggeriamo, quando possibile, di utilizzare padding e margini per ottenere lo stesso risultato.

Banner accessibili

Una piccola riflessione a parte merita la questione “banner”: in questo genere di editor online, normalmente viene data la possibilità di assemblare dei banner composti da testi e immagini, che al momento dell’invio vengono rasterizzati assieme come unico elemento immagine. 

Va da sé che la lettura da parte degli screen reader avverrà come semplice immagine, ignorando eventuali testi sovrascritti, link o bottoni.

Nel caso si decida di utilizzare l’elemento banner, è buona norma compilare il campo alt-text in maniera estremamente esaustiva. Se ad esempio il banner riporta titoli, blocchi di testo o bottoni, è bene riportare all’interno dell’alt-text non solo la pura descrizione dell’immagine, ma anche questi ultimi.

Infine, un’ultima considerazione riguarda la “qualità” del codice che viene esportato da questo genere di strumentiviene esportato da questo genere di strumenti che purtroppo è molto ridondante e rende difficile la lettura da parte degli screen reader.