“Un sito accessibile non sarà tanto bello”… davvero?!
Fortunatamente negli ultimi tempi si parla molto di accessibilità, e ma, evidentemente, alcuni pregiudizi e miti sono ancora da sfatare.
“Un sito accessibile non sarà tanto bello”. Ho sentito questa frase dal vivo. Nel 2023. Durante una riunione. Con dei consulenti. Designer.
Mi auguro che chi l’ha pronunciata intendesse solo chiarire che non sarebbero state proposte palette dai mille colori, elementi non standard, animazioni e interazioni a profusione, ecc. Ma il compiaciuto assenso di alcune persone in riunione mi ha comunque generato un brivido lungo la schiena e la coscienza che, condividere alcune riflessioni, non potesse che fare bene.
Iniziamo con qualche (teoricamente inutile) premessa:
1- Un sito è accessibile non solo perché possono fruirne senza problemi coloro che hanno in qualche modo una visione limitata*. Chi necessita di un sito accessibile potrebbe avere una disabilità uditiva o non essere in grado di compiere alcuni movimenti o azioni, o ancora potrebbe avere una disabilità cognitiva. L’accessibilità quindi è data da sottotitoli, trascrizioni audio, tempi adeguati per portare a termine un’azione, testi chiari ed esplicativi con frasi corte e prive di termini tecnici, possibilità per chi usa il sito di controllare le animazioni, esistenza di feedback alle azioni… e molti altri dettagli che poco hanno a che fare con l’aspetto estetico di un sito.
*Una disabilità visiva può essere una cecità totale, ma anche parziale (ad esempio una visione tunnel, una degenerazione maculare o anche una più diffusa cataratta). Da tenere in conto anche che circa il 75% degli adulti utilizza una correzione visiva (fonte: World report on vision, WHO).
2- Un sito accessibile non è “meglio” solo per le persone che hanno qualche forma di disabilità, ma lo è anche per chiunque usa il sito, considerando sia momentanee inabilità degli utenti (una degenza da un intervento agli occhi, una mano fasciata) che situazioni poco favorevoli (un ambiente rumoroso o troppo soleggiato, una connettività scarsa). In generale, comunque, un sito accessibile è più usabile e più facile da navigare per tutte le persone (perché ha testi più chiari, informazioni organizzate in maniera gerarchica, feedback più specifici, ecc…).
3- Garantire che un sito sia accessibile non è un optional, ma una questione di empatia e di rispetto verso i propri utenti (e per molti settori è previsto a livello normativo). Ed è persino una buona strategia di marketing: se un sito non è accessibile, a beneficiarne sarà chi tra i competitor ha un sito accessibile!
4- In che senso ‘bello’? Come si misura la bellezza? Non necessariamente le nostre scelte estestiche saranno universali e condivise da tutti gli utenti.
Ma quindi un sito accessibile può essere anche interessante e visivamente piacevole?
Inutile dire che la risposta è sicuramente sì e senza nemmeno particolari vincoli e compromessi (che poi, anche se ci fossero, non dovrebbero essere un ostacolo alla creatività, ma solo dei confini all’interno dei quali manifestarla!).
Ecco alcuni aspetti su cui ci si può concentrare per progettare un sito “bello e accessibile”:
- Colore;
- Tipografia;
- Titolazioni (Heading);
- Immagini, icone e multimedia;
- Focus;
- Posizione in pagina e prossimità.
Alcuni sono ovvi, altri meno. A seguire trovate qualche approfondimento su ognuno di questi aspetti, qualche tool o lettura utile. In nessun caso l’argomento è esauribile in poche parole, ma spero che possano essere un utile punto di partenza. Vi invito a leggere quelli che vi sembrano più interessanti, nell’ordine che desiderate (alla fine di ogni sezione trovate il modo di tornare all’elenco).
Belli e accessibili
Se non conoscete Stephanie Walter cogliete l’occasione per rimediare: sul suo sito condivide costantemente spunti interessanti a tema accessibilità e il suo sito è un vero esempio di “bello e accessibile”:
E se non bastasse, ecco un paio di raccolte di siti accessibili:
1. Colore
Ovviamente. La prima cosa che ci viene in mente quando pensiamo all’aspetto estetico di un sito e all’accessibilità è una palette accessibile, ovvero che garantisca un contrasto sufficiente tra testo (o altri elementi grafici) e lo sfondo, ma che sia anche adatta alle esigenze delle persone daltoniche.
Per quanto riguarda il contrasto, l’obiettivo secondo le linee guida ufficiali (WCAG 2.2) è raggiungere un contrasto minimo (AA) con lo sfondo: ovvero 4.5:1 per un testo sotto ai 24px, 3:1 per testo maggiore ai 24px, testo in grassetto sopra ai 19px, icone ed altri elementi UI. Esistono (innumerevoli) tool che aiutano nella scelta di abbinamenti con sufficiente contrasto (vedi sotto) o che ci aiutano a capire se il contrasto è rispettato tra gli elementi di una pagina web (ad esempio Wave).
Semplice? Non proprio in realtà. Il contrasto WCAG 2.2 viene calcolato secondo un modello matematico che analizza il rapporto tra la luminanza (in brevissimo: l’ intensità della luce emessa) del colore del testo e quello di sfondo, senza considerare la complessità della visione umana. Con la conseguenza che alcuni abbinamenti considerati “accessibili” dai tool basati su questo modello, in realtà non lo sono davvero.
Nell’attesa di un nuovo aggiornamento delle linee guida (WCAG 3.0?) sono in fase di discussione altri modelli, tra cui il modello APCA (Accessible Perceptual Contrast Algorithm), proposto da Andrew Somers.
Ecco qualche esempio della differenza tra i due modelli:
Il consiglio insomma è quello di andare oltre al primo controllo e possibilmente testare con gli utenti.
Potrebbe non essere immediato, ma trovare una palette piacevole ed accessibile non dovrebbe essere troppo difficile (anche perché tutto dipende dall’uso che si fa di ogni colore!).
Alcuni strumenti utili
- Randoma11y genera coppie di colori accessibili (WCAG).
- Contrast-grid permette di vedere tutti gli incroci possibili di una palette che garantiscono un buon contrasto (WCAG). Esiste anche il plugin per Figma.
- Contrast finder trova delle alternative accessibili dati dei colori di partenza non accessibili (WCAG).
- Colorsafe permette, una volta scelto il colore di background e uno stile del testo, di scegliere un colore per il testo che garantisce un buon contrasto (WCAG).
- Venngage propone un tool che consente di creare palette accessibili generate da un colore di partenza (WCAG).
- Whocanuse mostra come un abbinamento testo-sfondo è visto da persone affette da daltonismo. Per lo stesso controllo è molto comoda anche l’estensione per Chrome Web Disability Simulator.
- APCA Contrast Calculator tiene conto della percezione visiva umana per stabilire se una coppia di colori è accessibile.
Qualcosa di interessante
2. Tipografia
Tra le persone che maggiormente beneficiano di un uso accorto della tipografia ci sono le persone ipovedenti ma anche quelle con alcune disabilità cognitive legate all’apprendimento (come ad esempio la dislessia).
Alcune accortezze sono:
- impostare la grandezza del testo idealmente a 16px, (e a non meno di 12px);
- scegliere un’interlinea minima di 1,5 volte la grandezza del testo;
- evitare colonne strette, ma anche le linee di testo troppo lunghe (l’ideale è una linea di circa 70–80 caratteri);
- evitare il testo giustificato;
- scrivere paragrafi corti;
- evitare testi in corsivo, sottolineati, tutto maiuscolo;
- permettere all’utente di fare uno zoom della pagina (fino al 200%) per poter leggere meglio il testo.
Niente di diverso dalle buone prassi che aumentano la leggibilità di un testo su una pagina web per ogni tipologia di utente, insomma.
Un ulteriore consiglio è quello di usare font che con lettere chiare che non possono essere facilmente confuse tra loro. Queste sono alcune coppie di caratteri da controllare e verificare:
- qp
- db
- 0O
- il1I
- rn, m
Alcuni font con queste caratteristiche sono:
- sans-serif : Arial, Helvetica, Lucida Sans, Verdana, Tahoma, Comic Sans, Andika, Atkinson-Hyperlegible, Lexend;
- graziati: Times New Roman, Georgia, Book Antiqua;
- ibridi, creati apposta per gli utenti dislessici: Dyslexia Font, EasyReading, Read Regular.
Approfondimenti interessanti
- Accessibilità e leggibilità di un font
- Guida di stile redatta dalla British Dislexia Association
Anche in questo caso la “ricetta perfetta” non esiste, ma né le buone prassi di scrittura né le tipologie di font dovrebbero essere un’ostacolo ad un design visivamente appagante.
3. Titolazioni (Heading)
La titolazione delle sezioni (heading) aiuta a comprendere la struttura della pagina.
L’aspetto visivo delle diverse tipologie di titolazione aiuta a comprendere la gerarchia delle informazioni e, parallelamente, a livello semantico (da H1 a H6) aiuta chi utilizza uno screen reader a comprendere l’ordine logico delle informazioni in pagina.
Tuttavia non manca un po’ di confusione e quache mito. Ad esempio, nonostante sia una buona prassi, le WCAG non suggeriscono espressamente che debba sempre esserci un H1 e che debba essere uno e uno solo. Le linee guida non sono rispettate se:
- un testo che sembra un titolo non è stato taggato come tale;
- non è rispettato l’ordine logico delle titolazioni;
- le titolazioni non sono descrittive della sezione.
Per approfondire
- Questo articolo cerca di fare un po’ di chiarezza.
4a. Immagini
Un altro importante elemento della gradevolezza visiva di una pagina sono le immagini, inaccessibili a chi ha una disabilità visiva, ma critiche anche per chi naviga la pagina con una connessione scarsa. Qui la soluzione tecnica è semplice, un <alt-text>: una descrizione delle immagini (che sarà letta dagli screen reader o visibile prima che l’immagine sia completamente caricata).
La parte complessa in questo caso è scrivere una buona descrizione. Qualche breve suggerimento:
- Se l’immagine è solo decorativa e non veicola informazioni importanti, lasciate vuoto l’alt-text;
- Siate brevi: descrivete il soggetto raffigurato, cosa sta accadendo e in quale contesto sta accadendo.
- Non date un’informazione estetica, ma funzionale: ad esempio se l’immagine è un logo va indicato e non va fatta una descrizione minuziosa tralasciando il fatto che sia un logo.
- Potete omettere “immagine di” ad inizio descrizione (lo screen reader stesso interpreta il codice e lo nofica a chi lo sta usando).
- Scrivete una descrizione adatta al vostro contesto (una foto di Piazza San Pietro deve essere probabilmente descritta in maniera differente se il punto di vista è religioso o architettonico!).
Altri suggerimenti utili
- Come decidere se e come scrivere un alt-text: (An alt Decision Tree)
- Come scrivere una descrizione immagine (How to write an image description)
- Come scrivere gli alt-text (How to write alt-text descriptions for image accessibility)
4b. Icone
Un buon alt-text è fondamentale anche per le icone.
Le icone, però, devono essere accessibili non solo da punto di vista visivo (non troppo piccole o con tratto troppo sottile, con un giusto contrasto con lo sfondo), ma soprattutto dal punto di vista comunicativo. Per alcune tipologie di utenti (chi ha disabilità cognitive o anche solo utenti molto giovani o anziani) le icone potrebbero non essere chiare e facilmente comprensibili.
Anche in questo caso non ci sono ricette (ma potrebbe essere una buona prassi affiancarle ad un‘etichetta che ne indica la funzione) e l’ideale è un confronto con gli utenti .
4c. Multimedia
Un design accessibile può comprendere video, audio, oggetti complessi come grafici o mappe.
In generale abbiate l’accortezza di non far riprodurre in automatico nessuno di questi oggetti (fate in modo che sia sempre l’utente a gestire lo stop and play).
Anche in questo caso le guideline WCAG 2.2. ci vengono in aiuto: per riassumere molto grossolanamente ricordatevi sottotitoli e audiodescrizioni per i video e le trascrizioni per i contenuti audio.
Se invece avete a che fare con immagini complesse (grafici, diagrammi, flowchart, mappe) dovrete scrivere un alt-text (qui trovate qualche suggerimento utile su come farlo).
5. Focus
Per chi naviga il sito via tastiera è essenziale poter capire dove si “trova”: lo stato di :focus ne è l’indicatore.
È una di quelle piccole cose meno ovvie in cui si può progettare un intervento a livello visivo: bordi, sfondi, ombre o sottolineature possono essere ideati in linea con lo stile del sito (o del design system).
Le linee guida su come deve apparire il focus di un elemento sono di livello AAA (il più inclusivo) e ci suggeriscono di usare un bordo più spesso di almeno 2 pixel CSS rispetto agli elementi non in focus e che il contrasto sia almeno 3:1 tra ciò che è in focus e ciò che non lo è.
Per approfondire
- In questo articolo viene approfondito come possa essere progettato lo stato di focus.
Design dell’interazione via tastiera
Un aspetto meno visivo ma estremamente rilevante a livello di design, riguarda la progettazione di come deve essere l’esperienza di chi utilizza una tastiera e in quale ordine gli elementi devono essere in focus.
L’implementazione vera e propria spetta a chi si occupa dello sviluppo, ma possono essere fornite linee guida su come farlo.
Due annotation kit in Figma già pronti e utilizzabili per (tra le altre cose) progettare l’ordine degli elementi:
- A11y Annotation Kit, By Indeed and Stephanie Hagadorn
- Intopia’s accessibility annotation kit, By Intopia
6. Posizioni in pagina e prossimità
Questo aspetto prende in considerazione più la chiarezza di un sito che l’estetica in quanto tale.
Alcune persone hanno una visione molto limitata dello schermo: perché hanno una visione tunnel e vedono sono una piccola parte del campo visivo o perché utilizzano una lente di ingrandimento per poter vedere meglio la pagina. In entrambi i casi la visione d’insieme viene a mancare.
Se quindi progettiamo delle microinterazioni in pagina sarebbe buona norma far sì che si svolgano contestualmente alla sezione che l’utente sta guardando. Ad esempio: l’aggiunta in carrello di un oggetto dovrebbe produrre un cambiamento di stato nel bottone appena utilizzato e non solo nell’icona dedicata al carrello in altro a destra.
