WCAG Criterio di Successo SC 1.4.4 Ridimensionamento del testo (Livello AA)
Le Linee Guida per l’Accessibilità digitale WCAG forniscono i criteri per rendere un sito accessibile. Tra i criteri di successo più importanti c’è quello che parla dell’ingrandimento dei testi con funzione zoom. Vediamo cosa dice il Criterio di Successo SC 1.4.4:
A eccezione di caption e immagini di testi, i testi possono essere ingranditi senza tecnologie assistive fino al 200% senza perdite di contenuto o funzionalità.
Benefici per persone ipovedenti
L’ingrandimento aiuta le persone ipovedenti a leggere meglio i testi. Ne abbiamo parlato nel post 69: Percentuale di persone anziane nel mondo. L’Italia ha uno dei livelli di anzianità più alti, con il 23.95% di persone con più di 65 anni (fonte: data.oecd.org in riferimento all’anno 2022) ed è destinato a salire. I siti web accessibili che superano il Criterio di Successo SC 1.4.4 si rivolgono a una platea ogni anno più ampia.
Come ingrandire i testi nel telefono
Ci sono diversi modi per ingrandire i testi nel telefono:
- Ingrandimento del telefono. Mia mamma usa questo sistema per usare WhatsApp e navigare sui siti, però si lamenta spesso del fatto che i siti non siano facili da usare;
- Ingrandimento nel Browser. Chrome o Firefox danno la possibilità di ingrandire i testi sui siti web;
- Ingrandimento su Google. Si possono aggiustare le funzioni di accessibilità anche sul proprio profilo Gmail.
Una delle WCAG più difficili da rispettare
Ho provato anch’io ad usare lo zoom 200% per un giorno intero, per capire cosa c’è che non va e ho trovato tantissimi problemi, anche su siti considerati accessibili. Ecco perché penso che l’S.C. 1.4.4 sia una delle WCAG più difficili da rispettare.
5 errori più comuni sull'ingrandimento dei testi
Navigando su internet con l’ingrandimento al 200% ho potuto notare molti errori che normalmente passano inosservati. Alcuni errori sono così evidenti da non riuscire a garantire la completa navigazione del sito. Vediamo i 5 più comuni:
Errore 1
Cookie banner
Nel rispetto del GDPR è necessario far comparire il Cookie Banner all’apertura del sito. Il problema è che, con lo zoom attivo, molte volte è impossibile vedere i bottoni di chiusura e accettazione. Questo errore può compromettere addirittura la possibilità di iniziare la navigazione sul sito.
Errore 2
Header
La parte alta del sito comprende molto spesso il logo a sinistra e il menu a destra. Se l’header è più ampio dello schermo, il rischio è di non poter accedere al menu di navigazione o ad altri comandi utili come la barra di ricerca. In alcuni casi è possibile spostarsi fuori dalla lo schermo, mentre in altri è impossibile usare il menu.
Errore 3
Parole lunghe
Se nella navigazione standard al 100% le parole lunghe non sono un problema, nella navigazione con zoom al 200% possono diventare un problema perché escono dallo schermo. Succede soprattutto con i titoli principali che, in genere, hanno una dimensione più grande.
Errore 4
Slider e Caroselli
Le funzioni di scorrimento laterale sono utili per raggruppare foto e card ripetitive. Nel migliore dei casi sono studiati con indizi utili per il loro utilizzo. Quando si usa lo zoom, però, il rischio è di perdere questi indizi rendendo molto difficile il loro utilizzo. Le persone potrebbero saltare completamente questi elementi.
Errore 5
Elementi disposti in orizzontale
Diventano molto stretti oppure si sovrappongono. Può succede con elementi composti da icone e testi, oppure foto e testi.
Tecnica 1: GOV.UK
Il caso studio riguarda l’header, cioè la parte superiore del sito con logo, menu e ricerca. La soluzione adottata sul sito GOV.UK è molto semplice.
Per evitare la sovrapposizione degli elementi, GOV.UK ha deciso di spostare sotto al logo i bottoni per aprire menu e ricerca.
Esempio del codice della tecnica 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
@media (max-width: 18.75em) { Button-container { Position: static; } }
Tecnica 2: Axess Lab
Anche il caso di Axess Lab ha a che fare con l’header, la parte in alto con il menu. Le 4 voci di menu disposte in orizzontale vengono allineate su due colonne per evitare sovrapposizioni.
Siti web complessi e semplici
Lo zoom è legato alla complessità dei siti. In generale, più un sito è semplice più è facile gestire lo zoom, quindi meglio tenere a mente la regola “Keep it simple”.
5 suggerimenti:
- Cookie banner: meglio posizionarlo sopra al header con bottoni di accettazione e chiusura ben visibili (esempio GOV.UK);
- Header: gestibile con le tecniche viste sopra o simili per non sovrapporre gli elementi;
- Parole lunghe: meglio tagliarle con proprietà CSS word-break;
- Slider e Caroselli: meglio ridurli al minimo oppure gestirli con efficienza;
- Elementi in orizzontale: gestibili con flex-wrap e riducendo al minimo i margini laterali per dare più spazio agli elementi (esempio Axess Lab).
Zoom 200% in un sito web accessibile per persone ipovedenti
Molte persone anziane sono anche ipovedenti e usano il telefono con la funzionalità di ingrandimento del testo. In questo post vediamo alcune tecniche utili e consigli per gestire lo zoom fino al 200% nei siti web accessibili.
