Scegliere il font giusto e la sua presentazione: A Key to ADA Accessible Websites

Il web è un luogo di alloggio pubblico in cui tutti hanno lo stesso diritto di partecipare, accedere, presentare e recuperare le informazioni nonostante qualsiasi disabilità. L’Americans with Disability Act (ADA) è stato approvato per garantire pari opportunità agli individui con disabilità. Mentre all’epoca internet era ancora agli inizi, la realtà è che ora si applica a tutti i luoghi virtuali, compresi i servizi digitali e i contenuti online.

Per adempiere ai loro obblighi legali e morali, tutte le organizzazioni e le imprese sono tenute a rendere i loro siti e canali online accessibili alle persone disabili. Uno dei pilastri chiave della progettazione di un sito web accessibile risiede nella leggibilità e leggibilità del suo contenuto testuale. Questo è possibile solo utilizzando font accessibili.

Abbiamo organizzato questa guida per aiutare i nostri lettori a rispondere a domande come Cosa sono i font accessibili e qual è il miglior font da utilizzare per un sito web? Continuate a leggere per scoprire i dettagli dei font approvati dall’ADA e le loro caratteristiche. Tratteremo anche alcune delle caratteristiche necessarie per rendere un sito web accessibile alle persone con problemi di vista, dislessia e disturbi di lettura.

Una panoramica delle famiglie di font

I font e le diverse famiglie di font occupano un posto importante nella tipografia digitale. Una famiglia di font è costituita da un insieme di font diversi che condividono caratteristiche simili e attributi relativi agli stili di design. Comprendere le loro proprietà può aiutare i web designer a scegliere i font più accessibili per i loro siti web. Mentre ci sono molte famiglie di font, qui ne elenchiamo quattro, che possono anche essere configurate da un utente in un browser web:

• Serif: i font Serif hanno decorazioni o ornamenti alla fine di un tratto in una lettera o simbolo.
• Sans-Serif: Sans è la parola francese per “senza”. I font sans-serif sono più semplici e non hanno linee estese o caratteristiche alla fine di ogni tratto in una lettera o simbolo.
• Monospace: I font monospace hanno la stessa larghezza per ogni lettera o simbolo. Sono anche chiamati font a larghezza fissa o non proporzionali.
• Corsivo: I font corsivi sono scritti in un modo fluente che assomiglia alle parole scritte a mano. Le singole lettere possono essere unite insieme per dare un’impressione artistica.

Unità di misura

Ci sono varie unità per definire le dimensioni dei caratteri:

• Ems (em): Questa unità definisce una dimensione del carattere relativa alla dimensione dell’elemento padre in una pagina HTML. Per esempio, se l’elemento padre in HTML è 14 px, allora 2 em lo renderebbero 28 px.
• Rems (root ems): Quando si usano unità rem, tutti i caratteri sono definiti relativamente alla dimensione del carattere dell’elemento radice in HTML. Quindi, tutto il testo nell’HTML è specificato relativamente ad un font di base e non dipende da dove il testo è posizionato nella gerarchia HTML delle pagine web.
• Pixel (px): Questa è un’unità di misura assoluta e non è basata sulla misurazione rispetto a un elemento di base.
• Punti (pt): Anche i punti sono una metrica assoluta. WCAG usa i valori CSS3, dove 1pt è 1,333 px. Quindi, 14pt e 18pt si traducono rispettivamente in 18,5px e 24px.

Cosa rende un font inaccessibile?

I font inaccessibili esclusi dalla lista dei font conformi all’ADA sono quelli che:

• Rendono il testo più difficile da leggere
• Rendono difficile distinguere tra le forme delle diverse lettere e caratteri
• Riducono la velocità di lettura dell’utente
• Hanno lettere o caratteri sovrapposti, che rendono difficile distinguere una lettera dall’altra.

Se un font è decorato con ornamenti, diventa difficile da leggere. Tutti i font con decorazioni alla fine di un tratto possono essere più difficili da leggere per alcuni utenti. Anche i font in stile corsivo o di scrittura a mano rendono il testo inaccessibile, e quindi non sono i migliori font da usare per un sito web.

Cosa sono i font accessibili?

Quando si progetta un sito web, uno degli aspetti più importanti è la selezione del font giusto e la sua presentazione. La stragrande maggioranza dei siti web richiede molto contenuto testuale, che dovrebbe essere percepibile e visualizzabile. La chiave per un sito web accessibile è quindi la leggibilità del testo al suo interno, che viene espressa utilizzando diversi stili di caratteri e colori.

Quali caratteri standard sono accessibili?

Purtroppo, l’opinione degli esperti differisce sul carattere più leggibile per il web, e quale carattere dovrebbe essere usato, poiché diversi utenti hanno diversi set di requisiti. Per esempio, un pubblico con problemi di vista avrebbe un bisogno maggiore di un testo più grande. Le persone con un campo visivo basso ma una maggiore chiarezza di visione avrebbero bisogno di più caratteri per adattarsi al loro campo visivo, mantenendo le dimensioni del testo piccole. Anche le persone con dislessia o disturbi della lettura hanno le loro esigenze.

È meglio che i progettisti web offrano flessibilità in modo che gli utenti possano scegliere i propri font. Se una pagina web usa il font predefinito del browser web, allora un lettore non dovrà passare a un font diverso ogni volta che la pagina web viene caricata.

Sebbene non ci sia un requisito fisso di dimensione del font ADA, i font accessibili conformi all’ADA sono chiari, puliti e distinguibili rispetto agli stili di scrittura corsiva o manuale. È generalmente riconosciuto che i font sans-serif sono più facili da leggere e più accessibili delle loro controparti serif. La lista dei font conformi all’ADA include, ma non si limita a Arial, Calibri, Century Gothic, Helvetica, Tahoma e Verdana.

L’importanza dei font accessibili

La maggior parte delle informazioni sul web è trasmessa e diffusa attraverso contenuti testuali. Un metodo di presentazione del testo è tramite immagini .png o .bmp del testo. Tuttavia, questa non è un’opzione praticabile per molte ragioni. Per esempio, quando le immagini vengono scalate, la loro leggibilità si deteriora. Inoltre, il testo all’interno delle immagini non può essere letto ad alta voce dai lettori di schermo. Quindi, tutto il testo su un sito web dovrebbe essere composto da caratteri accessibili, che sono leggibili e visualizzabili.

Progettare un sito web accessibile utilizzando caratteri accessibili non è più solo una raccomandazione o una caratteristica opzionale. È obbligatorio; se un sito web viola i principi di accessibilità, la società o l’azienda che lo ospita corre il rischio di affrontare pesanti sanzioni, multe o azioni legali. Questa multa può arrivare fino a 75.000 dollari per la prima violazione e più per le successive non conformità.

Secondo i dati del National Health Interview Survey (NHIS), ci sono circa 32,2 milioni di adulti con problemi di vista. Questo include non solo i ciechi, ma anche le persone che hanno la vista bassa nonostante indossino gli occhiali. Il CDC prevede che questo numero sta crescendo rapidamente a causa di menomazioni visive legate all’età o a malattie.

Quando si progettano siti web, le aziende e le imprese che si rivolgono a questa grande minoranza della popolazione godranno naturalmente di un pubblico più ampio. È un fatto noto che se il testo è più difficile da leggere su un sito web, avrà un minor numero di lettori e un numero limitato di visite alla pagina. Quindi, l’aggiunta di font approvati dall’ADA a un sito web è un aspetto essenziale per gestire un business di successo.

Font speciali

La British Dyslexia Association (BDA) sottolinea i seguenti aspetti importanti da tenere a mente quando si progettano siti web e si selezionano font accessibili per persone con dislessia:

• Il font selezionato dovrebbe essere progettato in modo che gli utenti possano facilmente distinguere la differenza tra varie lettere e numeri. Per esempio, l (L piccola), 1, e I (i maiuscola), possono sembrare tutti uguali.
• Le lettere b e d, e p e q, sono immagini speculari le une delle altre. Gli individui dislessici possono trovare difficile distinguerle. Le lettere dovrebbero essere rese in modo che non siano più immagini speculari.
• La maggior parte degli individui intervistati dal BDA preferisce una “g” arrotondata e una “a” arrotondata. Tuttavia, l’arrotondamento di queste lettere non dovrebbe portare a confonderle con una “o”.
• La spaziatura delle lettere dovrebbe essere sufficiente per distinguere tra i vari caratteri, ad esempio, “rn” insieme può essere scambiato per la lettera “m”, così “learn” può essere confuso con “leam”.

I font specializzati sono stati progettati per persone con dislessia, ad esempio, Dyslexie e OpenDyslexic. Entrambi questi font sono disponibili gratuitamente e possono essere scaricati senza costi. Sono tra i migliori font da usare per un sito web quando ci si rivolge a persone dislessiche. Allo stesso modo, il font Fs Me è per le persone con disabilità di apprendimento ed è supportato dall’ente di beneficenza britannico per le disabilità di apprendimento Mencap.

Conforme alle linee guida di accessibilità dei contenuti web

Le linee guida per l’accessibilità dei contenuti web (WCAG) sono state sviluppate e pubblicate dal World Wide Web Consortium (W3C). Queste raccomandazioni costituiscono lo standard ampiamente accettato per la progettazione di siti web e contenuti online accessibili. Negli Stati Uniti, la regola finale della Sezione 508 richiede direttamente di seguire le WCAG con almeno il livello AA di conformità. Per le cause legali relative all’ADA, il Dipartimento di Giustizia e i tribunali statunitensi hanno spesso fatto riferimento a queste linee guida per valutare l’accessibilità dei siti web pubblici.

WCAG ha una chiara guida sui caratteri accessibili per gli utenti con problemi di vista, compresi gli attributi e le caratteristiche di progettazione come il colore, il contrasto, le dimensioni e le proporzioni del testo. Ci sono anche raccomandazioni per il layout e la struttura del contenuto testuale che rende una pagina web più leggibile e accessibile. È essenziale incorporare queste caratteristiche in un sito web per accogliere gli utenti con problemi di vista, dislessia, disturbi di lettura o altre disabilità cognitive.

Questa guida discute le varie raccomandazioni del W3C per scegliere i migliori font per l’accessibilità, il mantenimento dei font conformi all’ADA e le loro importanti caratteristiche.

Dimensioni e proporzioni del font: lasciate che sia l’utente a controllarle

Quando si scrive un testo, la forma varia, e questo dipende anche dalla lingua. Alcune forme dell’alfabeto sono complesse mentre altre sono più semplici e più facili da leggere anche a dimensioni ridotte. Questo è il motivo principale per cui una dimensione minima dei caratteri non è definita nelle WCAG. I seguenti sono aspetti importanti da considerare quando si scelgono i migliori font per l’accessibilità e il miglior font per la lettura su schermo:

• Dimensioni dei font e unità: Secondo WCAG le dimensioni dei font dovrebbero essere specificate usando ems e rems, cioè la linea guida favorisce le unità relative dei font piuttosto che le unità assolute. I web designer dovrebbero evitare di impostare una dimensione di base dei caratteri nell’elemento radice. Invece, può essere usata la dimensione predefinita dei caratteri del browser, che può servire come punto di riferimento per definire tutte le altre dimensioni dei caratteri. Se l’utente cambia la dimensione di base del carattere, l’intera pagina cambia di conseguenza.
• Funzione di zoom: Gli utenti dovrebbero avere il controllo sulla dimensione dei caratteri, incluso lo zoom del testo fino al 200%. Il testo dovrebbe rimanere leggibile quando viene ingrandito senza essere sovraffollato o avere sovrapposizioni. Questo ingrandimento dovrebbe essere possibile senza l’uso di tecnologia assistiva, per esempio, un semplice controller come un cursore può essere aggiunto al sito web per aumentare o diminuire la dimensione del testo. Questa funzione dovrebbe essere accessibile su tutti i dispositivi, ad es,

Spaziatura del testo: renderla relativa alla dimensione del carattere

WCAG 2.1 ha le seguenti raccomandazioni per la spaziatura del testo:

• L’interlinea dovrebbe essere impostata ad almeno 1,5 volte la dimensione del carattere.
• Lo spazio dopo un paragrafo dovrebbe essere almeno 2 volte la dimensione del carattere.
• L’interlinea dovrebbe essere almeno 0,2 volte la dimensione del carattere.
• L’interlinea delle parole dovrebbe essere almeno 0,16 volte la dimensione del carattere.

Larghezza della linea: permettere l’avvolgimento del testo

Generalmente, il numero di caratteri è usato come unità di misura della lunghezza della linea. Nonostante qualsiasi disabilità, è più difficile per le persone leggere righe più lunghe che righe più corte, poiché le interruzioni di riga permettono agli occhi di riposare. In definitiva, la lunghezza della riga non dovrebbe superare gli 80 caratteri.

Le persone che hanno un campo visivo ridotto richiedono aree di testo più strette, dove possono facilmente distinguere la fine di una riga e l’inizio della successiva. Quindi, la lunghezza della linea dovrebbe essere controllabile dall’utente. Se regolano il viewport, le linee di testo dovrebbero automaticamente avvolgersi e rifluire, permettendo all’utente di leggere il testo senza scorrimento orizzontale.

Paragrafi: allineare i paragrafi a sinistra o a destra

Tutti i contenuti web dovrebbero essere strutturati e organizzati in paragrafi brevi, e si dovrebbero evitare frasi lunghe. I paragrafi dovrebbero essere allineati a sinistra o a destra. Anche se il testo giustificato può sembrare più attraente visivamente, dovrebbe essere evitato perché gli spazi extra all’interno delle linee lo rendono inaccessibile. Lo stesso vale per gli stili di paragrafo centrati, che possono rendere difficile per un lettore trovare l’inizio della riga successiva.

Il saggio approccio al colore dei caratteri

Un uso efficace del colore è importante per trasmettere informazioni significative all’utente. Per esempio, i campi obbligatori nei moduli possono essere evidenziati da colori, gli errori possono essere mostrati in rosso, il testo sottolineato in blu di solito indica i collegamenti ipertestuali, e il grigio può essere applicato per mostrare i campi disabilitati del modulo.

Anche se i colori aumentano l’appeal estetico di una pagina web, si dovrebbe fare attenzione a soddisfare le persone con bassa percezione dei colori, che potrebbero non essere in grado di distinguere le differenze di colore. WCAG 2.1 afferma che dovrebbero essere usati spunti visivi alternativi per distinguere varie caratteristiche oltre al solo colore.

L’uso del colore è strettamente legato ai rapporti di contrasto. È essenziale avere un buon contrasto di colore per un testo leggibile e accessibile. I seguenti punti sono importanti quando si considerano i font accessibili per gli utenti ipovedenti:

• Il contrasto di colore dovrebbe permettere al testo in primo piano di essere distinto dallo sfondo. Non dovrebbe essere troppo basso o troppo duro.
• Il colore del testo grigio (#777777) su uno sfondo bianco è il minimo per il livello AA WCAG. Per il testo più grande, il 52% di grigio (#828282) è accettabile.
• Il testo invertito, cioè il colore chiaro del testo in primo piano su uno sfondo scuro, dovrebbe essere evitato il più possibile perché è più difficile da leggere.

Rapporto di contrasto: rendere tutto distinguibile

Le linee guida WCAG 2.1 per il rapporto di contrasto sono elencate di seguito:

1. 1. Titoli: Il rapporto di contrasto per i titoli di testo e il testo più grande dovrebbe essere un minimo di 3:1. Un testo di 18 punti o 14 punti in grassetto è considerato testo grande e dovrebbe soddisfare questo requisito.
2. 2. Testo principale: Per il testo diverso dai titoli, dovrebbe essere mantenuto un rapporto di contrasto di almeno 4,5:1.
3. 3. Logotipo: Il testo che fa parte di un logo o marchio non ha requisiti di contrasto.
4. 4. Testo incidentale: Il testo che è parte di un’interfaccia utente inattiva, pura decorazione, invisibile, o parte di un’immagine, e non trasmette informazioni significative, non ha requisiti di contrasto.

Ci sono diversi modi raccomandati per mantenere il rapporto di contrasto consigliato. Per esempio, se una lettera o un simbolo di testo è più chiaro in basso, allora può violare il rapporto di contrasto dell’intera lettera. In questo caso, un designer può scurire lo sfondo o aggiungere un sottile contorno nero alla lettera per mantenere il rapporto di contrasto richiesto. Anche la luminanza relativa delle lettere in primo piano o dello sfondo può essere cambiata per ottenere il risultato desiderato. I vari strumenti che possono essere usati per controllare il rapporto di contrasto sono elencati sul sito web del WCAG

Presentazione del testo

Oltre a incorporare caratteri per gli utenti ipovedenti, è anche importante prestare attenzione al layout e alla struttura del testo. Quando si tratta della presentazione generale del testo su una pagina web, si dovrebbero seguire i seguenti punti chiave:

• I documenti dovrebbero essere scritti usando lo stesso font o il minor numero possibile di font. Una pagina che contiene più font, anche se sono font ADA compliant, è più difficile da leggere.
• I tag HTML di testa, per esempio <h1>, <h2>, ecc. dovrebbero essere usati per trasmettere la struttura e la gerarchia del documento e non dovrebbero essere applicati solo perché una certa dimensione del carattere era necessaria per evidenziare visivamente un elemento.
• Il testo animato e in movimento dovrebbe essere completamente evitato.
• Il contenuto testuale dovrebbe essere presentato tramite dati di testo piuttosto che con immagini o grafici. I caratteri di testo quando vengono ingranditi generalmente non perdono la loro leggibilità e mantengono la loro qualità. Le immagini di testo tendono a mostrare il comportamento opposto e la loro qualità può deteriorarsi quando vengono ingrandite.
• Si dovrebbero usare le maiuscole e le minuscole dovrebbero essere evitate.
• Il grassetto e il corsivo non dovrebbero essere combinati.
• I blocchi di testo in corsivo non sono accessibili e sono più difficili da leggere.
• Evitare di sottolineare il testo a meno che non sia un link.

Conclusione

Eliminare le barriere digitali e fornire la stessa esperienza internet per tutti gli individui, con o senza disabilità, dovrebbe essere la priorità assoluta di tutte le aziende e organizzazioni. Per raggiungere questo obiettivo, WCAG fornisce preziose raccomandazioni per scegliere i migliori font per un sito web, che rendono il testo leggibile a tutti gli utenti, compresi quelli con problemi di vista, dislessia o disturbi di lettura.

Le aziende con poca o nessuna esperienza ADA possono rivolgersi ad esperti quando progettano e creano nuovi siti web o rimediano ai loro siti esistenti. Essere proattivi per garantire l’accessibilità di tutti i contenuti web e dei servizi online aiuterà a evitare pesanti multe monetarie e danni.

È prudente acquisire l’aiuto di un team di sviluppatori, designer e ingegneri che hanno la competenza e l’esperienza di sviluppare siti web conformi all’ADA e 508. Come parte dei nostri servizi di accessibilità del web, offriamo pacchetti completi per lo sviluppo di siti web basati sugli standard WCAG, la correzione di siti web precedenti e l’esecuzione di audit regolari per garantire l’accessibilità del vostro sito web.

Si tratta di una serie di servizi di accessibilità per il web.