Iniziamo subito dicendo che la leggibilità è molto importante. Esistono dei font che sono più o meno leggibili, come possiamo facilmente immaginare. Ad esempio, la Pubblica Amministrazione italiana ha scelto Titillium come famiglia di caratteri standard per i suoi siti web.
Altre famiglie di font note per la loro leggibilità sono OpenDyslexic, Lexend, Lora, Roboto. Personalmente suggerisco di considerare anche Arial, Lato e Montserrat.
In CSS esiste una proprietà chiamata text-rendering che può essere impostata su optimizeLegibility, molto probabilmente non noteremo grandi differenze ma è bene conoscerla e possibilmente impostarla come default.
Grandezza dei caratteri
Per quanto riguarda la grandezza dei caratteri, le linee guida WCAG non indicano dei criteri specifici, quindi quello che possiamo tenere a mente è che l’unica indicazione riguarda ciò che viene considerato “large scale text”, ad esempio nei criteri sul contrasto colore.
Il testo di almeno 18pt senza grassetto (generalmente 20px) oppure 14pt con il grassetto, si può considerare abbastanza grande come valore di default.
Un suggerimento utile nello sviluppo di un sito web è quello di abituarsi ad usare le unità “rem” oppure “em”. La prima fa riferimento al font-size dell’elemento root (generalmente il tag <html> o <body>) mentre la seconda fa riferimento all’elemento parent.
Quindi, se definiamo in CSS ad esempio:
html, body { font-size:16px; } article { font-size:1.5rem; } header { font-size:1.1rem; } header nav a { font-size:1.2em; }
Avremo una situazione in cui l’article avrà un font size di 16 * 1,5 = 24px, che viene definito moltiplicando il font size dell’elemento root (16px) con il valore in “rem” (1.5), mentre i link della navigazione nella testata avranno un font size di 16 * 1.1 * 1.2 = 21,12px, perché viene moltiplicato prima il valore dell’elemento root (16px) per il valore assegnato all’header (1.1) e poi per il valore (1,2) assegnato al link (tag <a>) che si riferisce al parent più vicino, in questo caso <header>.
Se invece avessimo usato i rem anche per il tag <a>, il valore finale sarebbe stato di 16 * 1,2 = 19,2px.
Criteri di riferimento
Queste unità di misura sono molto utili per l’accessibilità perché aiutano a rispettare alcuni criteri del livello AA:
1.4.4 Resize Text che richiede che il testo possa essere zoomato fino al 200% (da browser si può impostare lo zoom del solo testo) senza perdite di contenuto e funzionalità
1.4.10 Reflowche il contenuto sia correttamente visualizzabile senza richiedere di scrollare in entrambe le dimensioni(altezza e larghezza) ad una viewport di 320x256px, che corrisponde a uno zoom 400% con viewport di 1280x1024px
1.4.12 Text Spacing che richiede che non vi siano perdite di contenuto o funzionalità impostando dei parametri specifici come:
line-height:1.5
margin-bottom:2em (per i paragrafi di testo)
letter-spacing:0.12
word-spacing:0.16
I criteri riportati vanno letti con maggiore attenzione per identificare eventuali casi eccezionali, ma in generale è quantomeno opportuno fare delle verifiche su quanto indicato per controllare che non vi siano grossi errori di visualizzazione.
