Tipografia web: dall’accessibilità alla leggibilità

Rispettare le linee guida per l’accessibilità è un buon inizio, ma i fattori che condizionano l’esperienza di lettura dei testi sono numerosi e intrecciati fra loro: dai meccanismi fisici della lettura, a quelli cognitivi di elaborazione, all’attenzione. Progettare oggi siti con testi facilmente (e piacevolmente) leggibili sui vari tipi di schermi, che funzionino bene per ciascun lettore e in situazioni varie è una sfida contemporanea che si sta affinando. E con essa anche gli strumenti a nostra disposizione: proprietà CSS più aggiornate, unità di misura più appropriate, la tecnologia dei font variabili, soluzioni varie per il dimensionamento dinamico: dalla tipografia responsiva a quella fluida fino a quella intrinseca. È bene usare questi strumenti avendo in mente che l’ultima parola va comunque lasciata all’utente. 2023 © Giulia Laco ABSTRACT

WCAG 2.1 E IL TESTO PRINCIPI LINEE GUIDA CRITERI DI SUCCESSO (TESTO) 1 PERCEPIBILE 1.1 Alternative testuali 1.2 Media temporizzati 1.3 Adattabile 1.4 Distinguibile 1.3.1 Informazioni e correlazioni 2 UTILIZZABILE 3 COMPRENSIBILE 4 ROBUSTO CONFORMITÀ LIVELLO A LIVELLO AA LIVELLO AAA 2.1 Accessibile da tastiera 2.2 Adeguata disponibilità di tempo 2.3 Convulsioni e reazioni fisiche 2.4 Navigabile 2.5 Modalità di input 3.1 Leggibile 3.2 Prevedibile 3.3 Assistenza nell’inserimento 4.1 Compatibile 1.4.3 Contrasto (minimo) 1.4.4 Ridimensionamento del testo 1.4.5 Immagini di testo 1.4.6 Contrasto (avanzato) 1.4.8 Presentazione visiva 1.4.9 Immagini di testo (senza eccezioni) 1.4.10 Ricalcolo del flusso 1.4.12 Spaziatura del testo 2.4.6 Intestazioni ed etichette 3.1.1 Lingua della pagina 3.1.5 Livello di lettura 2023 © Giulia Laco WCAG 2.1 W3C Recommendation ACCESSIBILITÀ WEB

Caratteri con almeno 18 punti o 14 punti grassetto o una dimensione equivalente del carattere per i caratteri del Cinese, Giapponese e Coreano (CJK) 4. 1. Caratteri con linee straordinariamente sottili o caratteristiche inusuali che riducono la riconoscibilità delle loro lettere sono più difficili da leggere, specialmente con bassi livelli di contrasto. 2. La dimensione del carattere è la dimensione originale con cui viene predisposto il contenuto. Non include il ridimensionamento che può essere fatto da un utente. 3. La dimensione corrente di un carattere che un utente vede dipende sia dalla dimensione 5. definita dall’autore sia dalle impostazioni del monitor dell’utente o dalle impostazioni del programma utente. Per la maggior parte dei caratteri più usati, 14 o 18 punti sono equivalenti a 1.2 e 1.5 em oppure a 120% o 150% delle dimensioni predefinite del carattere per il corpo di pagina (assumendo che il carattere del corpo sia il 100%), ma gli autori dovrebbero verificarlo per lo specifico tipo di carattere che usano. Quando i caratteri sono definiti in unità relative, la dimensione attuale in punti per la visualizzazione è calcolata dal programma utente. La dimensione in punti si dovrebbe ottenere dal programma utente, o calcolare sulla base dei parametri come fa il programma utente, al momento di valutare il criterio di successo. Gli utenti ipovedenti sono responsabili della scelta di impostazioni appropriate. Quando si usa un testo senza specificare la dimensione del carattere, è ragionevole usare la dimensione più piccola usata dai principali browser per testi non specificati. Se una intestazione di livello 1 viene mostrata con un carattere in 14 punti grassetto o più grande sui principali browser, sarebbe ragionevole considerarlo testo di grandi dimensioni. Le altre dimensioni, a scalare, possono essere calcolate in modo simile partendo dalle misure predefinite. Le dimensioni di 18 e 14 punti per i caratteri latini sono definiti come la minima dimensione per considerarli testo stampato grande (14pt) e la più grande dimensione standard (18pt). Per gli altri caratteri, come quelli delle lingue CJK, le dimensioni “equivalenti” dovrebbero corrispondere alla dimensione minima del testo stampato grande in quelle lingue e alla successiva misura standard usata nella stampa grande. 2023 © Giulia Laco WCAG 2.1 W3C Recommendation *CARATTERI GRANDI

AA Il contenuto può essere ripresentato senza perdita di informazioni o funzionalità e senza richiedere lo scorrimento in due dimensioni per: • • Contenuto a scorrimento verticale con una larghezza equivalente a 320 CSS pixel; Contenuto a scorrimento orizzontale ad un’altezza equivalente a 256 CSS pixel. Tranne per le parti del contenuto che richiedono layout bidimensionale per l’utilizzo o per comprenderne il senso. NOTA 320 CSS pixel equivalgono a una finestra iniziale di larghezza 1280 CSS pixel al 400% di ingrandimento. Per i contenuti Web progettati per lo scorrimento orizzontale (ad esempio con testo verticale), i 256 CSS pixel equivalgono a una finestra iniziale di altezza 1024 pixel al 400% di ingrandimento. NOTA Esempi di contenuti che richiedono un layout bidimensionale sono immagini, mappe, diagrammi, video, giochi, presentazioni, tabelle di dati e interfacce in cui è necessario tenere in vista le barre degli strumenti mentre si gestisce il contenuto. 2023 © Giulia Laco WCAG 2.1 llo W3C Recommendation e Liv 1.4.10 RICALCOLO DEL FLUSSO

AA A Per la presentazione visiva di blocchi di testo, è disponibile una modalità per conseguire i seguenti obiettivi: 1. I colori del testo in primo piano e dello sfondo possono essere scelti dall’utente. 2. La larghezza non supera gli 80 caratteri o glifi (40 se CJK). 3. Il testo non è giustificato (allineato sia al margine destro che al sinistro). 4. Lo spazio tra righe (interlinea) è almeno di uno spazio e mezzo all’interno del paragrafo e lo spazio tra paragrafi, è almeno una volta e mezzo l’interlinea. 5. Il testo può essere ridimensionato fino al 200 percento senza il supporto di tecnologie assistive in modo da non richiedere all’utente di dover scorrere orizzontalmente per leggere una riga di testo in una finestra a tutto schermo. 2023 © Giulia Laco WCAG 2.1 llo W3C Recommendation e Liv 1.4.8 PRESENTAZIONE VISIVA

AA Nei contenuti implementati utilizzando linguaggi di markup che supportano le seguenti proprietà di stile per il testo, non si verifica alcuna perdita di contenuto o funzionalità impostando quanto segue senza modificare altre proprietà di stile: • Altezza della linea (interlinea) di almeno 1,5 volte la dimensione del carattere; • Spaziatura dopo i paragrafi di almeno 2 volte la dimensione del carattere; • Spaziatura tra le lettere di almeno 0,12 volte la dimensione del carattere; • Spaziatura tra le parole di almeno 0,16 volte la dimensione del carattere. Eccezione: le lingue e le scritture che non utilizzano una o più di queste proprietà nel testo scritto sono conformi quando si può applicare il criterio alle sole proprietà esistenti per quella combinazione di lingua e scrittura. 2023 © Giulia Laco WCAG 2.1 llo W3C Recommendation e Liv 1.4.12 SPAZIATURA DEL TESTO