Creare risorse accessibili: Tipografia

Un testo chiaro e leggibile è essenziale per un sito web accessibile. La tipografia influisce sulla facilità con cui gli utenti possono scansionare, comprendere e interagire con i tuoi contenuti. In questo articolo scoprirai come scegliere i font accessibili, impostare dimensioni e interlinee adeguate e strutturare il testo in modo che sia leggibile. Segui queste linee guida per assicurarti che la tua tipografia supporti un’esperienza inclusiva per tutti i visitatori.

Requisiti

• Quando si utilizzano linguaggi di markup che supportano determinate proprietà di stile del testo, regolare queste proprietà come segue non causerà alcuna perdita di contenuto o di funzionalità:
  • Imposta l’altezza delle righe (interlinea) ad almeno 1,5 volte la dimensione del carattere;
  • Imposta l’interlinea dopo i paragrafi ad almeno 2 volte la dimensione del carattere;
  • Imposta l’interlinea (tracciamento) ad almeno 0,12 volte la dimensione del carattere;
  • Imposta la spaziatura delle parole ad almeno 0,16 volte la dimensione del carattere.
• Il testo può essere ridimensionato fino al 200% senza perdita di contenuto o funzionalità senza tecnologie assistive.
• La pagina deve essere comunque funzionale.
• La pagina deve consentire agli utenti di zoomare sui dispositivi mobili. Quanto segue NON è consentito:
  <meta name="viewport" content="user-scalable=no">.
• Il contenuto può essere presentato senza perdita di informazioni o funzionalità e senza richiedere lo scorrimento in due dimensioni per:
  • Contenuti a scorrimento verticale con una larghezza equivalente a 320 pixel CSS;
  • Contenuti a scorrimento orizzontale con un’altezza equivalente a 256 pixel CSS.
• Fornisci un’alternativa di testo per i contenuti informativi generati dai CSS e considera di impostare il testo generato dai CSS con aria-hidden="true".
• Non usare il testo nelle immagini se puoi usare un testo vero e proprio, a meno che non sia essenziale (come un logo) o che non siano necessari font, dimensioni, colori o sfondi specifici.
• Se è necessario utilizzare un’immagine di testo, segui le linee guida per il colore e il contrasto.
• Il testo deve seguire le linee guida per il colore e il contrasto.

Eccezioni

Scorrimento in due dimensioni

È consentito per le sezioni del contenuto che necessitano di un layout bidimensionale per la comprensione o l’usabilità, ad esempio le tabelle di grandi dimensioni.

Spaziatura del testo per lingue specifiche

Alcune proprietà dello stile del testo possono non essere applicate a tutte le lingue e gli script. Ad esempio, la spaziatura delle lettere potrebbe non essere applicata alle lingue che utilizzano i logogrammi come il cinese. Tuttavia, l’interlinea e l’altezza delle linee sono comunque rilevanti in questi casi.

Esempi

	DO: Quando si utilizza lo zoom generale in Chrome, la pagina non perde la sua funzionalità e il layout rimane utile e ininterrotto. Inoltre, l’ordine degli elementi rimane invariato.
	NON: In questo esempio, il div contenente il testo è impostato in pixel (px), quindi non si espande con il contenuto. Impostando l’altezza del div in relazione all’altezza del carattere utilizzando ’em’ o non impostando affatto l’altezza del div, si eviterebbe che il testo trabocchi il div.