| La newsletter per chi ha sete di comunicare |
|
|
|
| WCAG non è una parolaccia |
|
|
|
|
Ciao ,
mentre ottobre sta per terminare, con un susseguirsi di notizie sempre meno tranquillizzanti anche a livello mondiale, noi siamo arrivate alla quinta Spuma. Ci stiamo avviando verso un inverno complesso, e anche il tema di questa nostra newsletter lo è, però almeno è utile e stimolante. 😊
Vogliamo riprendere il tema dell’inclusività introdotto con Spuma#3. Questa volta dedichiamo un focus specifico alla progettazione dei siti web e alla loro accessibilità. Dunque la parola spetta a Elisa, graphic e web designer.
|
|
|
|
|
L’occasione arriva dalla richiesta di una mia cliente. Vuole che la sua comunicazione sia il più accessibile possibile e proprio lei mi ha condiviso molti dei link di riferimento utilizzati per questa Spuma. Grazie, Elena! Non potrei essere più felice.
|
|
|
|
|
Le attenzioni necessarie per rendere un sito web accessibile a più persone possibili sono davvero tante e non riguardano solo il lato estetico delle pagine. Coinvolgono anche il loro funzionamento e la loro compatibilità con tecnologie attuali e future, come pure quelle assistive.
In questo numero, dunque, approfondisco i colori, o meglio i contrasti di colore, i dettagli tipografici, i caratteri da preferire e le dimensioni più leggibili, ma anche cosa è bene evitare.
In Italia, al momento, a dover rispettare le regole di accessibilità sono i siti delle Pubbliche Amministrazioni e dei soggetti che offrono servizi al pubblico e hanno un fatturato medio superiore a 500 milioni di euro negli ultimi tre anni.
Se vuoi, puoi approfondire l’argomento sul sito dell’AGID (Agenzia per l’Italia digitale).
Anche l’Unione Europea si è dotata di una direttiva sull’accessibilità del Web (direttiva (UE) 2016/2102), così come altri Stati membri.
Per tutti gli altri soggetti non esistono obblighi da rispettare, ma iniziare a pensare in quest’ottica per progettare siti web il più possibile accessibili è una nostra responsabilità, non credi ?
|
|
|
|
Come rendere un sito accessibile,
o il più accessibile possibile |
|
|
|
|
L’organizzazione non governativa internazionale W3C (World Wide Web Consortium) ha sviluppato nel corso degli anni delle linee guida per l’accessibilità, le WCAG, cito direttamente dal loro sito, “con l'obiettivo di fornire uno standard condiviso per l'accessibilità dei contenuti Web che soddisfi le esigenze di individui, organizzazioni e governi a livello internazionale”.
|
|
|
|
|
|
|
Queste linee guida sono fondamentali per progettare il web in maniera inclusiva, perché tengono in considerazione una grande varietà di disabilità, ma non tutte le diverse tipologie e combinazioni possibili.
Nelle WCAG 2.1 ( la versione 2.2, ora in bozza, dovrebbe essere pubblicata a dicembre di quest’anno) si analizzano le disabilità visive, uditive, fisiche, vocali, cognitive, di linguaggio, di apprendimento e neurologiche.
Esistono quattro principi fondamentali per determinare l’accessibilità di un sito web, che deve essere:
- percepibile - tutte le informazioni che contiene devono essere disponibili e percepibili da chiunque e non nascoste ai diversi sensi;
- utilizzabile - le persone devono essere in grado di usare l’interfaccia, anche con l’ausilio di tecnologie assistive (es. tastiera braille);
- comprensibile - il contenuto e l’interfaccia devono essere comprese da tutti gli utenti;
- robusto - le persone devono essere in grado di accedere al contenuto con i programmi e le tecnologie, attuali o future, considerato il veloce progresso e sviluppo delle tecnologie informatiche.
Puoi approfondire i vari principi delle WCAG 2.1 sul sito del World Wide Web Consortium.
L’accessibilità di un sito web è legata quindi alla necessità di rendere fruibile a chiunque il suo contenuto, di qualsiasi natura esso sia: testi, immagini, video, audio.
|
|
|
|
|
Vediamo 15 migliorie, alla portata di ciascuna persona, per aumentare l’accessibilità dei nostri siti web.
- Utilizza un solo font o al massimo due e preferisci caratteri accessibili.
Sono raccomandati i font Sans-serif per la loro leggibilità, leggermente superiore rispetto ai font serif, più decorativi, ma ciò non li esclude a priori dai caratteri considerati inclusivi. In ogni caso, i font scelti devono avere le giuste proporzioni tra altezza, larghezza e spessore.
Tra i fattori da considerare per la scelta non bisogna sottovalutare la popolarità e la disponibilità dei font da parte degli utenti.
L’argomento font accessibili è molto interessante e meriterebbe un post dedicato ma non trovo mai il tempo da dedicarmi al blog, in ogni caso in questo articolo trovi tante informazioni che possono esserti utili nella scelta del font giusto. Il sito è in lingua inglese ma puoi facilmente farlo tradurre dal tuo browser;
- usa l’allineamento a sinistra per i tuoi blocchi di testo. Evita il giustificato o il testo centrato, a meno che non sia per un titolo o una singola frase che deve essere messa in risalto (ma non abusarne);
- evita interi blocchi di testo in corsivo, perché risultano difficili da leggere. Inoltre non utilizzare insieme grassetto e corsivo;
- il testo sottolineato deve essere utilizzato solo per evidenziare un link;
- usa la lettera maiuscola all’inizio di ogni frase ed evita, invece, le intere frasi in maiuscolo;
- consenti l’ingrandimento del contenuto senza perdita di qualità, i browser permettono un ingrandimento fino al 200%. Per questo motivo evita di inserire testi all’interno delle immagini;
- traduci i contenuti visivi - immagini, audio e video - in testi descrittivi e alternativi (alt text);
Nei video e negli audio, oltre ai dialoghi, includi anche le descrizioni degli effetti sonori, se sono presenti;
- utilizza contrasti di colore accessibili per testi e sfondi. Le WCAG indicano le giuste proporzioni da rispettare: puoi aiutarti con applicazioni apposite per valutare questo aspetto. Ad esempio con color.adobe.com, già citato per i disturbi legati al daltonismo, l’estensione per Google Chrome e il Color Contrast Checker.
Se possibile, preferisci un colore scuro per il testo e un colore chiaro per lo sfondo, invece del contrario;
- non abusare né utilizzare erroneamente i tag html, come le intestazioni, ecc. Non servono per avere un testo più grande ma per determinare la gerarchia degli argomenti all’interno della pagina web;
- scegli la dimensione giusta del font o dei font.
Generalmente per il body (corpo di testo) si seleziona una dimensione uguale o inferiore ai 17 pt, mentre per le intestazioni una dimensione uguale o superiore ai 18 pt; se il testo è regular, altrimenti ai 14 pt se in grassetto. Considerando che i 17 pt di Verdana non risultano uguali ai 17 pt di Arial, prendi queste indicazioni solo come un riferimento e utilizza la tua sensibilità per scegliere la dimensione adeguata per i tuoi contenuti;
- utilizza il colore per distinguere diverse sezioni o argomenti, ma prevedi di accompagnare questa scelta con un altro elemento visivo di distinzione (es. pattern o icona distintiva);
- progetta aree cliccabili abbastanza grandi ma non affidarti ai soli colori, utilizza anche il testo;
- evita, se possibile, il linguaggio complesso e cerca di strutturare il contenuto in maniera logica. Se puoi, suddividi il contenuto in sezioni più piccole e metti a disposizione delle persone un modo di tornare al contenuto principale con facilità;
- evita le azioni temporizzate che scadono entro un certo limite di tempo (ad esempio, l’inserimento della password o la conclusione di un acquisto);
- evita l’inserimento di effetti visivi intermittenti, come i banner o i pop-up che lampeggiano o altri elementi.
|
|
|
|
|
Come vedi, l’argomento è davvero vasto e complesso e questi sono solo alcuni degli aspetti da tenere in considerazione per avere un sito web inclusivo e accessibile.
Ho cercato di darti i riferimenti che ritengo importanti e le indicazioni per approfondire i diversi temi.
Se conosci fonti che ritieni fondamentali, e vuoi condividerle con noi, puoi scriverci rispondendo come sempre a questa email. Grazie!
P.S. Per addolcire il periodo che stiamo vivendo, e per ringraziarti di essere tra le persone iscritte a Spuma, alleghiamo una ricetta “vintage” della nostra regione di origine e tipica di questo periodo. Abbiamo pensato anche alla sua versione vegana.
Scaricala in allegato e, se provi la ricetta, facci sapere il risultato.
A cura di Elisa
|
|
|
|
|
Better Call Saul (Netflix, 6 stagioni, 63 episodi)
|
|
|
|
|
Dopo aver terminato questa serie crime e drammatica mi è preso un senso di vuoto, come accade solo quando finisci un libro che è diventato il tuo preferito o sei consapevole di aver appena visto una delle migliori serie tv mai prodotte finora.
Tant’è che poi, per colmare questo vuoto, mi sono lanciata sul rewatch di Breaking Bad, serie tv precedente e collegata a Better Call Saul, suo spin-off.
Ho capito che quest’ultima, per me, è ancora migliore della precedente. È perfetta. I personaggi sono scritti benissimo, ad alcuni - come Kim (figura femminile straordinaria e tratteggiata senza sessismi), Nacho, Mike e Saul stesso - ci si affeziona proprio. La regia e la fotografia sono di livello stellare e il cast è fotonico. Può bastare?
L’avvocato di Albuquerque, Saul Goodman (ovvero Jimmy McGill), che difende pericolosi criminali del cartello della metanfetamina, qui diventa un protagonista complesso e sfaccettato e abbandona quel suo essere una macchietta in Breaking Bad. Proprio come in BB, però, si assiste alle metamorfosi dei personaggi, che si evolvono e mutano, in un continuo susseguirsi di stravolgimenti e colpi di scena in bilico tra il bene e il male.
Dire che consiglio BCS è pleonastico. Da ve-de-re.
A cura di Silvia
|
|
|
|
|
Jost Hochuli “Il dettaglio in tipografia. Un’analisi breve e concisa delle questioni che riguardano la leggibilità dei testi”
Ed. Lazy Dog Press
|
|
|
|
|
Non so dirti quanti magazine ho acquistato solo perché attratta dalla loro impaginazione grafica, probabilmente tutti! 😄
Molti di loro però li ho letti a fatica, altri li ho abbandonati per le difficoltà che ho riscontrato nel leggerli, e non ho disturbi visivi.
Il dettaglio tipografico, infatti, è importante perché determina l’esperienza di lettura, che si tratti di un libro, una rivista o di un sito web.
Contrasti sbagliati, testi troppo piccoli, lettere troppo vicine tra loro, o al contrario troppo lontane, font illeggibili, poco spazio per l’interlinea, ecc. sono un fatto serio da tenere in considerazione.
“Il dettaglio in tipografia” analizza proprio questi aspetti attraverso esempi e casistiche, segnalando problemi e indicando soluzioni e lo fa davvero in maniera chiara e precisa.
Un manuale pensato per la carta stampata, ma che ritengo essenziale per progettare bene, in maniera inclusiva, anche sul web.
A cura di Elisa
|
|
|
|
|
|
Grazie per averci lette fino a qui!
|
|
|
|
|
|
|
Ti salutiamo con due canzoni
|
|
|
|
|
Hai perso Spuma#4? Puoi leggerla qui
|
|
|
|
|
