Il business informatico è l’ambito ad oggi in maggiore espansione, come tutti notano con più o meno piacere. Dopo aver fornito tecnologia alle aziende il mercato si è rivolto verso la quotidianità della gente comune. Prima i pc sono entrati nelle case di ogni famiglia, poi si è giunti a “vestire” le proprie mani con gli smartphone quanto con gli orologi da polso. Infine, una volta conquistati i target più facilmente abbordabili, le imprese hanno rivolto il proprio sguardo verso le quote di popolazione che ancora non potevano o non riuscivano ad utilizzare hardware e software già in commercio. Per questo nasce e viene dato ampio spazio all’accessibilità web.
In questo articolo si illustrerà come realizzare siti web con stili di testo efficaci, facendo semplicemente uso della più comune tecnologia web: il CSS. Questo permetterà di soddisfare anche gli utenti con le più comuni problematiche: motorie, visive o circostanziali. Secondo quanto spiegato più in dettaglio nel primo articolo, la maggior parte delle persone non necessita di hardware e software ad-hoc ma richiede un buon uso degli strumenti in possesso di ogni sviluppatore.
Font size
La dimensione del testo è importante per garantire una corretta lettura, questo è chiaro… Ma se ogni browser ha già un valore di font-size predefinito, come si può migliorare?
Valori statici
Una nozione importante da sapere è che sia Chrome che Firefox usano il valore font-size: 16px di default, valore che ogni utente può personalizzare in base alle proprie preferenze e necessità dalle configurazioni del browser. Ma è anche vero che ogni sito, in base allo scopo per cui viene implementato (applicazione web, sito di presentazione, etc.), avrà necessità differenti al momento di scelta della dimensione del testo. Molto spesso (se non sempre) il valore predefinito del browser deve essere quindi modificato e adattato dal tema scelto.
Se un sito imposta un proprio font-size usando i classici px o pt sovrascrive la personalizzazione dell’utente, che potrebbe non ricevere l’esperienza che si aspetta! Questo perchè entrambi i valori vengono specificati in modo statico.
Valori dinamici
Fortunatamente ci sono delle alternative dinamiche: %, em e rem. Rispetto ai precedenti valori statici, ora possiamo personalizzare lo stile del nostro sito rispettando il nostro utente. Ad oggi tutte e tre queste unità di misura vengono utilizzate ampiamente in base alle preferenze degli sviluppatori, ma è importante sapere la differenza principale che li distingue: il valore al quale sono relativi.
- %, relativo al valore della stessa proprietà nell’elemento padre
- em, relativo al valore della proprietà font-size nell’elemento corrente
- rem, sempre relativo al valore della proprietà font-size predefinito
Ecco un esempio che mette a confronto tutte le principali alternative.
<html>
<head>
<style>
.text-px { font-size: 16px; }
.text-pt { font-size: 12pt; }
.text-percent { font-size: 100%; }
.text-em { font-size: 1em; }
.text-rem { font-size: 1rem; }
</style>
</head>
<body>
<div>font-size predefinito</div>
<div class="text-px">font-size: 16px</div>
<div class="text-pt">font-size: 12pt</div>
<div class="text-percent">font-size: 100%</div>
<div class="text-em">font-size: 1em</div>
<div class="text-rem">font-size: 1rem</div>
</body>
</html>
Di seguito il risultato, che mette a confronto la visualizzazione di default, lo zoom al 200% e la configurazione del browser con la dimensione del font a 32px.
Quando si deve impostare il font-size il valore di riferimento è più semplice: le prime due unità di misura fanno riferimento al font-size del padre e rem fa riferimento al valore predefinito. Tutti e tre sono valori relativi quindi in un sito semplice è piuttosto indifferente scegliere uno o l’altro. In una webapp complessa invece il consiglio è di usare rem nella maggioranza dei casi, in quanto il risultato è il meno dinamico e quindi il più prevedibile.
Le stesse unità di misura possono essere usate anche in altri attributi CSS, e in tal caso è molto utile tenere a mente la prima definizione.
Contrasto
I colori
Il contrasto tra sfondo e testo è molto importante. Le linee guida del WCAG contengono due differenti livelli: minimo (livello AA) e ottimale (livello AAA). Nel primo caso il testo semplice deve avere un contrasto 4.5:1, che si riduce a 3:1 per il testo “grande” (con maggior font-size e/o font-weight). Per un risultato ottimale il contrasto dev’essere ancora maggiore: 7:1 per il testo normale e 4.5:1 per il testo grande.
Di seguito una serie di esempi, ognuno con il relativo link al tool online contrastchecker.com.
Il contrasto del secondo esempio, nonostante a molti lettori risulterà leggibile, è ancora altamente sconsigliato in quanto basta un leggero problema visivo di daltonia o di diottrie per renderlo difficilmente interpretabile. Può capitare di dover utilizzare due precise tonalità perchè rappresentative di un logo o perchè colori aziendali o societari. In tal caso se ne consiglia l’accostamento solo in un titolo o immagine di testa di ampie dimensioni, applicando invece un buon contrasto sul resto del sito.
Bianco, nero… e grigio
Aggiungo infine una nota interessante: il contrasto tra bianco e nero è generalmente considerato troppo elevato e pesante per gli occhi quindi, soprattutto per testi lunghi, è una scelta condivisa dalla maggior parte dei designer usare un grigio molto scuro al posto del nero o un grigio molto chiaro al posto del bianco.
I seguenti due esempi evidenziano come una leggera variazione di luminosità provoca un’importante riduzione del contrasto, rimanendo ancora largamento all’interno delle linee guida WGAC. Nello specifico nel primo caso si usa il nero (#000) e nel secondo caso un grigio scuro (#333), ma un risultato simile si può ottenere mantenendo il testo nero e scurendo lo sfondo.
Fonti e approfondimenti
CSS values and units, MDN
Making text legible, Aries Arditi
Contrast and color accessibility, WebAIM