Leggibilità del testo e integrità del layout a livelli di zoom elevati

Scopo #

Lo scopo principale di questo test di accessibilità manuale è valutare meticolosamente se il contenuto di una piattaforma digitale, inclusi testo e layout, rimane pienamente leggibile, funzionale e mantiene la sua integrità quando gli utenti applicano livelli di zoom più elevati, regolazioni della spaziatura del testo o impostazioni di presentazione visiva personalizzate. Questo test è progettato per essere eseguito dopo una scansione di accessibilità automatizzata e mira a scoprire complessi problemi visivi e funzionali derivanti da ridisposizione del contenuto, sovrapposizione di elementi, dimensioni di destinazione insufficienti all’ingrandimento e conflitti con le preferenze di colore definite dall’utente. Garantire che il contenuto si adatti elegantemente alle impostazioni visive controllate dall’utente è fondamentale per le persone con ipovisione, disabilità cognitive o preferenze di lettura specifiche, prevenendo la perdita di informazioni, interfacce inutilizzabili e un’esperienza utente frustrante.

Criteri WCAG coperti #

Questo test affronta specificamente i seguenti criteri di successo WCAG 2.2 relativi alla leggibilità del testo, all’integrità del layout e allo zoom:

• 1.4.4 Ridimensionare il testo – AA

Questo criterio stabilisce che il testo può essere ridimensionato senza tecnologie assistive fino al 200% senza perdita di contenuto o funzionalità. Ciò significa che gli utenti dovrebbero essere in grado di aumentare la dimensione del carattere (tramite le impostazioni del browser o controlli dedicati) fino al 200% della sua dimensione originale senza che il contenuto o la funzionalità diventino inaccessibili.

Rilevanza/Test:
Utilizzeremo la funzionalità di zoom del browser per aumentare le dimensioni del testo (o lo zoom dell’intera pagina) al 200% e osserveremo attentamente tutti gli elementi del contenuto (testo, immagini, componenti interattivi) per garantire che nessun contenuto venga tagliato, sovrapposto o scompaia e che tutte le funzionalità rimangano intatte.

• 1.4.8 Presentazione visiva – AAA

Questo criterio richiede che, per la presentazione visiva di blocchi di testo, sia disponibile un meccanismo che consenta all’utente di selezionare i colori di primo piano e di sfondo. Questo vale anche nei casi in cui l’utente modifica i colori predefiniti (ad esempio, in modalità ad alto contrasto).

Rilevanza/Test:
Testeremo i contenuti della piattaforma applicando i colori di primo piano e di sfondo selezionati dall’utente (ad esempio, tramite le impostazioni del browser, la modalità ad alto contrasto del sistema operativo o fogli di stile personalizzati). Verificheremo che tutto il testo rimanga visibile, leggibile e mantenga un contrasto sufficiente rispetto al nuovo sfondo, e che nessun contenuto o funzionalità venga perso o oscurato a causa di queste modifiche di colore. Ciò include il controllo di testo, icone ed elementi interattivi.

• 1.4.10 Riflusso – AA

Questo criterio richiede che il contenuto possa essere presentato senza perdita di informazioni o funzionalità e senza richiedere lo scorrimento bidimensionale (scorrimento orizzontale), per i contenuti a scorrimento verticale con una larghezza equivalente a 320 pixel CSS. Questo corrisponde in genere a un livello di zoom del 400% su un browser desktop standard (la larghezza effettiva di 1280 px diventa 320 px). Per i dispositivi mobili, significa che il contenuto scorre verticalmente senza scorrimento orizzontale in modalità verticale.

Rilevanza/Test:
Aumenteremo i livelli di zoom del browser fino al 400% (o simuleremo una larghezza di visualizzazione ridotta di 320px su desktop). Verificheremo quindi che tutto il contenuto venga ridistribuito in un’unica colonna (o in un layout che richieda solo lo scorrimento verticale) e che non venga visualizzata alcuna barra di scorrimento orizzontale. Verificheremo che il contenuto non si sovrapponga, si tronchi o scompaia e che tutti gli elementi interattivi rimangano utilizzabili.

• 1.4.12 Spaziatura del testo – AA

Questo criterio stabilisce che nei contenuti implementati utilizzando linguaggi di markup che supportano le seguenti proprietà di stile del testo, non si verifica alcuna perdita di contenuto o funzionalità impostando tutti i seguenti parametri: altezza della riga (interlinea) ad almeno 1,5 volte la dimensione del carattere; spaziatura tra paragrafi ad almeno 2 volte la dimensione del carattere; spaziatura tra lettere (tracking) ad almeno 0,12 volte la dimensione del carattere; e spaziatura tra parole ad almeno 0,16 volte la dimensione del carattere. Ciò garantisce agli utenti la possibilità di ignorare la spaziatura predefinita del testo per una migliore leggibilità.

Rilevanza/Test:
Utilizzeremo estensioni del browser o CSS personalizzati per applicare queste specifiche sovrapposizioni di spaziatura del testo. Esamineremo quindi tutto il contenuto testuale per garantire che l’aumento dell’altezza delle righe, della spaziatura dei paragrafi, della spaziatura delle lettere e della spaziatura delle parole non provochi sovrapposizioni, tagli o interruzioni del testo nel layout, con conseguente perdita di contenuto o funzionalità.

• 2.5.8 Dimensione del bersaglio (minima) – AA

Questo criterio richiede che la dimensione del target per gli input del puntatore sia di almeno 24px per 24px CSS pixel, salvo alcune eccezioni (ad esempio, se è disponibile un collegamento equivalente in dimensioni adeguate, se è solo testo o se è limitato dal browser). Ciò garantisce che gli elementi interattivi siano sufficientemente grandi per gli utenti con disabilità motorie o che utilizzano puntatori non di precisione (ad esempio, touchscreen).

Rilevanza/Test:
Durante i test ad alti livelli di zoom, gli elementi interattivi (pulsanti, link, campi dei moduli) aumenteranno naturalmente di dimensioni. Verificheremo visivamente che tutti i target interattivi raggiungano o superino il minimo di 24px × 24px quando visualizzati a scala standard, assicurandoci che mantengano dimensioni adeguate anche se la scala dello zoom del browser non è perfettamente proporzionale. Per i dispositivi mobili, verificheremo questo aspetto tramite touch.

Ambiente di prova #

Questo test si concentra principalmente sullo zoom e sulla reattività a livello di browser, richiedendo sia ambienti desktop che mobili/tablet.

Desktop #

• Sistemi operativi: Windows (ultime due versioni), macOS (ultime due versioni).
• Browser: ultime versioni stabili di Chrome, Firefox, Edge, Safari (con funzionalità di zoom integrata e strumenti per sviluppatori).
• Metodi di input:
  • Mouse standard (per l’ispezione visiva), tastiera (per la navigazione).
• Strumenti: estensioni del browser per applicare CSS personalizzati (ad esempio, “Stylebot”, “CSS utente”) o sovrascritture specifiche della spaziatura del testo, se non direttamente disponibili tramite le impostazioni del browser.

Cellulari e tablet #

• Sistemi operativi: iOS (ultime due versioni), Android (ultime due versioni).
• Browser: browser predefiniti (Safari su iOS, Chrome su Android) con funzionalità di pinch-to-zoom.
• Metodi di input:
  • Touchscreen (per lo zoom tramite pizzico, interazione con elementi in scala).
• Strumenti per sviluppatori: funzionalità di debug remoto (ad esempio, Chrome DevTools per Android, Safari Web Inspector per iOS) per simulare le larghezze delle finestre o ispezionare le dimensioni degli elementi.
• Orientamento: modalità verticale e orizzontale (per valutare il comportamento di riflusso).
• Impostazioni: impostazioni di accessibilità a livello di dispositivo per colori ad alto contrasto o personalizzati.

Preparazione al test #

Prima di iniziare il test manuale, assicurarsi di aver completato i seguenti passaggi:

1. Identificare tutte le aree di contenuto:
   Elencare sistematicamente tutte le pagine, i componenti e gli elementi interattivi specifici sulla piattaforma che contengono testo o elementi interattivi. Questo include:
   • Testo standard, titoli, paragrafi.
   • Menu di navigazione, link, pulsanti.
   • Campi del modulo, etichette, istruzioni, messaggi di errore.
   • Tabelle, griglie di dati.
   • Modali, pop-up, avvisi.
   • Immagini con testo o didascalie sovrapposti.
   • Tutte le aree con layout complessi o informazioni dense.
2. Comprendere il design reattivo:
   Familiarizza con il modo in cui la piattaforma dovrebbe adattarsi a schermi di dimensioni ridotte o a livelli di zoom più elevati.
3. Stabilire la funzionalità di base:
   Interagisci brevemente con le varie aree di contenuto con lo zoom predefinito per comprenderne l’aspetto e il comportamento normali.
4. Familiarizzare con i criteri WCAG:
   Rileggere e assimilare i requisiti specifici delle WCAG 1.4.4, 1.4.8, 1.4.10, 1.4.12 e 2.5.8. Comprendere i valori numerici per la spaziatura del testo (1,5, 2, 0,12, 0,16).
5. Preparazione per lo zoom del browser/ridimensionamento del testo:
   Impara a usare le funzioni di zoom del browser che hai scelto (Ctrl/Cmd + Più/Meno o impostazioni del browser).
6. Preparati per la sostituzione della spaziatura del testo:
   Se si utilizza un’estensione del browser per la spaziatura del testo, tenerla a portata di mano e sapere come applicare le sostituzioni specificate.
7. Prepararsi per il test del colore personalizzato:
   Scopri come attivare le modalità ad alto contrasto del sistema operativo o utilizzare le estensioni del browser per applicare colori di primo piano e di sfondo personalizzati.
8. Cancella cache/cookie del browser:
   Per garantire un ambiente di test pulito, cancellare la cache e i cookie del browser secondo necessità.

Processo di test passo dopo passo #

Eseguire i seguenti passaggi per ciascuna area di contenuto identificata, sia su desktop che su dispositivi mobili/tablet. Documentare meticolosamente le osservazioni.

PASSO 1 – Procedura generale per la funzionalità Zoom (WCAG 1.4.4, 1.4.10) #

Prova Zoom al 200% (WCAG 1.4.4): #

• Carica la pagina con uno zoom del 100%.
• Aumenta lo zoom del browser al 200%.
• Caso di prova:
  tutto il contenuto (testo, immagini, elementi interattivi) rimane completamente visibile e leggibile?
• Caso di prova:
  il layout si adatta senza scorrimento orizzontale?
• Caso di prova:
  tutte le funzionalità sono ancora presenti e utilizzabili? È possibile utilizzare tutti i link, i pulsanti e i campi dei moduli?
• Caso di prova:
  gli elementi si sovrappongono o vengono troncati?
• Caso di prova:
  il testo si ridispone elegantemente nei suoi contenitori senza spezzare parole o caratteri?
• Caso di prova:
  se sono presenti intestazioni, piè di pagina o barre laterali permanenti, nascondono il contenuto o gli elementi evidenziati quando vengono ingranditi?

Test Zoom/Reflow al 400% (WCAG 1.4.10): #

• Carica la pagina con uno zoom del 100%.
• Aumentare lo zoom del browser al 400% (o simulare una larghezza effettiva della finestra di visualizzazione di 320 px, se più preciso).
• Caso di prova:
  il contenuto viene ridistribuito in una singola colonna (o in un layout che richiede solo lo scorrimento verticale)? Non è presente una barra di scorrimento orizzontale?
• Caso di prova:
  tutte le informazioni sono ancora presenti? C’è qualcosa nascosto, troncato o rimosso?
• Caso di prova:
  tutte le funzionalità sono ancora presenti e utilizzabili? Tutti gli elementi interattivi possono essere utilizzati senza scorrimento orizzontale?
• Caso di prova:
  ci sono casi di contenuti sovrapposti o layout distorti?
• Caso di prova (ridimensionamento delle immagini):
• le immagini vengono ridimensionate in modo appropriato senza interrompere il layout o diventare eccessivamente grandi/piccole?

Zoom specifico per dispositivi mobili/tablet (pizzica per ingrandire): #

• Su un dispositivo mobile o tablet, carica la pagina.
• Utilizzare il pinch-to-zoom per ingrandire in modo significativo (ad esempio, per ottenere un ingrandimento equivalente a 200 o 400).
• Caso di prova:
  lo zoom tramite pizzico funziona in modo fluido e uniforme su tutta la pagina?
• Caso di prova:
  il contenuto si adatta in modo reattivo, ridisponendosi in base al livello di zoom, in modo simile allo zoom del browser desktop?
• Caso di prova:
  gli elementi interattivi sono ancora toccabili e la funzionalità complessiva viene mantenuta?

PASSO 2 – Procedura generale per la presentazione visiva (WCAG 1.4.8 AAA) #

Applica colori selezionati dall’utente: #

• Attiva la modalità ad alto contrasto di un sistema operativo (ad esempio, Modalità ad alto contrasto di Windows, Inverti colori/Inverti intelligente di macOS).
• In alternativa, puoi utilizzare un’estensione del browser per applicare colori di primo piano e di sfondo personalizzati (ad esempio, testo chiaro su uno sfondo scuro o viceversa) all’intera pagina.

Rispettare l’integrità del testo e del layout: #

• Esamina attentamente tutto il contenuto della pagina, inclusi testo, immagini, icone ed elementi interattivi, con queste impostazioni di colore personalizzate.
• Caso di prova:
  tutto il testo rimane visibile e leggibile? Mantiene un contrasto sufficiente con i nuovi colori di sfondo?
• Caso di prova:
  le icone e gli elementi grafici (ad esempio, grafici, barre di avanzamento) rimangono visibili e trasmettono il loro significato? Adattano i colori o i contorni per garantire il contrasto?
• Caso di prova:
  c’è del contenuto (testo, immagini o parti del layout) nascosto o reso invisibile a causa di conflitti di colore con il tema scelto dall’utente (ad esempio, testo impostato sul colore: bianco; su uno sfondo: bianco; in una modalità ad alto contrasto)?
• Caso di test:
  tutte le funzionalità rimangono presenti e operative? È possibile utilizzare tutti i link, i pulsanti e i campi dei moduli e i loro stati (ad esempio, passaggio del mouse, focus, selezionato) sono ancora percepibili?
• Caso di prova:
  ci sono casi in cui le proprietà background-image o border-image impediscono che il testo sia visibile o leggibile nelle modalità colore personalizzate?

PASSO 3 – Procedura generale per la spaziatura del testo (WCAG 1.4.12) #

Applica sostituzioni di spaziatura del testo: #

Utilizza un’estensione del browser o un CSS personalizzato per applicare i seguenti stili a tutto il testo della pagina:

• altezza della riga: 1,5;
• spaziatura tra le parole: 0,16em;
• spaziatura tra le lettere: 0,12em;
• margin-bottom (per paragrafi ed elementi di blocco, simulando una spaziatura di paragrafo di 2em).
• Nota: assicurarsi che l’override venga applicato globalmente e in modo coerente.

Rispettare l’integrità del testo e del layout:

• Caso di prova:
  ci sono dichiarazioni !important o larghezze/altezze in pixel fisse sui contenitori di testo che impediscono la corretta applicazione della spaziatura del testo?

Esaminare attentamente tutto il contenuto testuale, inclusi titoli, paragrafi, voci di elenco, etichette e testo all’interno di pulsanti/link.

• Caso di prova:
  c’è del testo che si sovrappone ad altro testo, immagini o elementi interattivi?
• Caso di prova:
  il testo viene troncato o tagliato (ad esempio, il testo trabocca dal suo contenitore)?
• Caso di prova:
  l’aumento della spaziatura del testo causa la rottura, la sovrapposizione o l’inutilizzabilità di elementi interattivi (pulsanti, link)?
• Caso di prova:
  il layout generale della pagina rimane funzionale e utilizzabile oppure si interrompe in modo significativo a causa dell’aumento della spaziatura?

PASSO 4 – Procedura generale per la dimensione del target (WCAG 2.5.8) #

Ispeziona gli elementi interattivi con lo zoom predefinito: #

• Con uno zoom del 100% sulla visualizzazione desktop o standard su dispositivi mobili, esamina visivamente tutti gli elementi interattivi (pulsanti, link, campi modulo, icone utilizzate come pulsanti).
• Caso di test:
  stimare le dimensioni di ciascun target interattivo. Sembra essere almeno 24px per 24px? (Per misurazioni precise, utilizzare gli strumenti di sviluppo per ispezionare gli stili elaborati).
• Caso di prova (dispositivi mobili/tablet):
  sui dispositivi touch, verificare che i target touch siano sufficientemente grandi e abbiano una spaziatura sufficiente per essere toccati facilmente senza attivare accidentalmente gli elementi adiacenti.
• Nota:
  i collegamenti di testo vengono spesso esclusi se sono costituiti esclusivamente da testo, ma ciò vale anche se sono elementi grafici o icone.

Rivalutare le dimensioni del bersaglio a livelli ingranditi: #

• Rivedere le aree problematiche con uno zoom del 200% e del 400%.
• Caso di prova:
  i livelli di zoom aumentati garantiscono che i target diventino ancora più grandi e più facilmente cliccabili oppure eventuali problemi di ridimensionamento riducono inavvertitamente le dimensioni effettive del target?

Identificazione dei problemi #

Durante il processo di test, identificare e documentare eventuali deviazioni dal comportamento previsto in base alle WCAG 1.4.4, 1.4.8, 1.4.10, 1.4.12 e 2.5.8. Esempi di problemi comuni includono:

• Perdita/troncamento di contenuto durante lo zoom (errore WCAG 1.4.4, 1.4.10):
  il testo o le immagini vengono tagliati, nascosti o sovrapposti ad altri contenuti quando si esegue lo zoom al 200% o al 400%.
• Scorrimento orizzontale con zoom (errore WCAG 1.4.10):
  con uno zoom del 400% (o larghezza equivalente a 320 px) viene visualizzata una barra di scorrimento orizzontale, che richiede agli utenti di scorrere sia orizzontalmente che verticalmente.
• Layout non funzionante con Zoom (WCAG 1.4.4, 1.4.10 Failure):
  gli elementi si sovrappongono, vengono distorti o vengono visualizzati in modo errato, rendendo la pagina inutilizzabile o illeggibile a livelli di zoom elevati.
• Perdita di funzionalità durante lo zoom (WCAG 1.4.4, 1.4.10 Errore):
  gli elementi interattivi (pulsanti, collegamenti, campi dei moduli) diventano non cliccabili, scompaiono o non funzionano in altro modo quando si esegue lo zoom.
• Contenuto invisibile/illeggibile con colori personalizzati (errore WCAG 1.4.8 AAA):
  il testo, le icone o altri contenuti essenziali diventano invisibili, perdono contrasto o sono illeggibili quando vengono applicati colori di primo piano/sfondo selezionati dall’utente (ad esempio, in modalità ad alto contrasto).
• Funzionalità persa con i colori personalizzati (errore WCAG 1.4.8 AAA):
  gli elementi interattivi diventano inutilizzabili o i loro stati non sono percepibili quando vengono applicati i colori selezionati dall’utente.
• Sovrapposizione/troncamento del testo con spaziatura del testo (errore WCAG 1.4.12):
  l’applicazione di override della spaziatura del testo causa la sovrapposizione, il taglio o la fuoriuscita del testo dai contenitori.
• Interruzione del layout con spaziatura del testo (errore WCAG 1.4.12):
  l’intero layout della pagina o componenti specifici (ad esempio, pulsanti con testo, elementi di navigazione) si interrompono quando si aumenta la spaziatura del testo.
• Dimensioni fisse che impediscono il riflusso (correlato a WCAG 1.4.10, 1.4.12):
  l’uso di larghezze/altezze in pixel fisse su contenitori o elementi impedisce il riflusso del contenuto o l’applicazione della spaziatura del testo.
• Target interattivi di piccole dimensioni (errore WCAG 2.5.8):
  gli elementi interattivi sono più piccoli di 24px×24px pixel CSS, il che li rende difficili da attivare, soprattutto sui dispositivi touch o per gli utenti con disabilità motorie.
• Elementi fissi che oscurano il contenuto (WCAG 2.4.11 – correlati):
  intestazioni, piè di pagina o barre laterali fissi oscurano il contenuto o gli elementi evidenziati quando vengono ingranditi.
• Immagini di testo:
  sebbene trattate in un altro test, le immagini di testo diventano pixelate o illeggibili se ingrandite, aggravando i problemi (correlati a WCAG 1.4.5).

Classificazione di gravità #

Assegnare un livello di gravità a ciascun problema identificato in base al suo impatto sull’accessibilità dell’utente:

• Critico:
  comporta la perdita completa di contenuti o funzionalità essenziali se si esegue uno zoom del 200% o del 400%. Richiede lo scorrimento orizzontale con uno zoom del 400% o rende impossibili le attività principali.
• Alto:
  impedisce significativamente agli utenti di accedere o utilizzare i contenuti in modo efficace a livelli di zoom elevati o con sovrapposizioni di spaziatura del testo. Causa gravi interruzioni del layout, sovrapposizioni estese o rende molto difficile l’utilizzo delle funzionalità chiave.
• Medio:
  causa disagi o frustrazioni moderati. Si verificano piccole sovrapposizioni o troncamenti di contenuto, oppure la spaziatura del testo causa piccoli problemi di layout, ma non compromette completamente la funzionalità.
• Basso:
  Piccoli problemi estetici o lievi inefficienze. Impatto minimo sull’usabilità o sulla leggibilità a livelli di zoom elevati o con spaziatura del testo.

Nota finale #

Garantire la leggibilità del testo e l’integrità del layout a livelli di zoom elevati, insieme all’adattabilità alle preferenze di presentazione visiva definite dall’utente, è fondamentale per offrire un’esperienza utente inclusiva e adattabile, in particolare per le persone ipovedenti. Questo test manuale consente ai team di valutare attentamente il modo in cui i contenuti rispondono al ridimensionamento, alle regolazioni della spaziatura e alle sostituzioni di colore impostate dall’utente, andando oltre i controlli automatici per individuare eventuali problemi specifici che incidono direttamente sulla leggibilità e sull’usabilità. Affrontando meticolosamente queste problematiche, le piattaforme possono garantire che i loro contenuti rimangano pienamente accessibili e funzionali indipendentemente dalle esigenze o dalle preferenze visive dell’utente.