Accessibilità Web:
Larghezza del testo per
Migliorare la leggibilità

Vai all'archivio: #MartedìAccessibile

Numero del post: Settimana 17

Data di pubblicazione: 19 Luglio 2022

Buona leggibilità come elemento di Web Accessibility

I siti web sono fatti da testi in forma di titoli, paragrafi, e così via. Un sito web che ha testi facili da leggere offre quindi un’ottima esperienza d’uso ed è accessibile. In questo caso parlo dell’aspetto visivo, senza l’uso di Screen Reader. Alcuni riferimenti sono tratti dal libro Inclusive Design Patterns di Heydon Pickering.

A chi può servire un sito facile da leggere?

  • Persone con vista ridotta: ad esempio gli anziani;
  • Persone che usano schermi grandi: ad esempio in ufficio;
  • Chi fa una ricerca web e ha poco tempo: quindi chiunque.

Caratteristiche di un testo facile da leggere

  • Scelta del font: da cui dipendono lettere e spazi;
  • Lunghezza delle frasi / paragrafi;
  • Allineamento: meglio a sinistra rispetto al giustificato;
  • Interlinea: deve permettere la distinzione tra le righe;
  • Contrasto: non deve essere eccessivo (esempio nei commenti).

Lunghezza dei paragrafi: cioè?

È la lunghezza, in caratteri, di una singola riga. Se il testo è allineato a sinistra, la lunghezza può variare, quindi bisogna misurare la riga più lunga.

Righe troppo lunghe = Bassa leggibilità

Se le righe sono troppo lunghe, i testi sono difficili da leggere perché l’occhio deve scansionare la riga avanti e indietro per trovare l’inizio della riga successiva. Questo è molto frustrante.

Righe troppo corte = Anche questo è un problema

Anche questo è stancante perché l’occhio deve muoversi continuamente avanti e indietro. Bisogna trovare una media.

Lunghezza ideale dei paragrafi

Nel libro The Elements of Typographic Style, Robert Bringhurst consiglia righe con un numero tra 45 e 75 caratteri. Se la dimensione del testo è di circa 18 px vuol dire che la lunghezza del paragrafo dovrebbe essere di circa 600px o 700px.

Larghezza responsive

Usa la proprietà max-width per adattare il testo sugli schermi più piccoli. È un consiglio banale ma importante.

NHS: un esempio di ottima leggibilità

Il sito NHS (Servizio Sanitario Nazionale Inglese) è un ottimo esempio che mette in pratica tutti questi consigli. Faccio notare anche che il contrasto non è eccessivo:

  • I testi neri non sono completamente neri;
  • Lo sfondo bianco non è completamente bianco;
  • I testi si alternano su sfondi grigi per riposare l’occhio.