Zoom e scorrimento sui dispositivi mobili

Silktide controlla che le tue pagine funzionino su schermi piccoli senza costringere i visitatori a ingrandire e trascinare la pagina in entrambe le direzioni per poterla leggere. Le pagine che non superano questo controllo di solito non sono state progettate affatto per i dispositivi mobili.

Perché è importante

Leggere su un telefono una pagina progettata solo per computer significa usare lo zoom con due dita su una colonna di testo e poi scorrere sia orizzontalmente sia verticalmente per ogni singola riga: è scomodo per tutti e impossibile per molte persone con problemi di vista o difficoltà motorie. Oggi i dispositivi mobili rappresentano la maggior parte del traffico web, quindi una pagina di questo tipo non è accessibile alla maggior parte dei visitatori e viene penalizzata nei risultati dei motori di ricerca. Il criterio di successo WCAG 1.4.10 (Ridisposizione, livello AA delle WCAG) richiede che i contenuti si ridispongano per adattarsi a uno schermo largo 320 pixel senza necessità di scorrimento bidimensionale.

Come risolvere il problema

1. Usa un design web responsivo, in modo che la pagina si disponga su un'unica colonna sugli schermi stretti. Il layout CSS moderno (media query, flexbox, griglia) rende questa una pratica standard; la maggior parte dei temi dei siti lo supporta immediatamente.
2. Inserisci un tag viewport corretto nel modello della pagina:

<!-- Indica ai browser mobili di eseguire il rendering alla larghezza del dispositivo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Verifica la pagina a una larghezza di 320 pixel (la larghezza minima comune degli smartphone) e controlla che nulla forzi lo scorrimento orizzontale: tabelle larghe, immagini con larghezza fissa e stringhe lunghe senza possibilità di andare a capo sono cause frequenti.

Se non è possibile rendere una pagina responsiva in modo pratico, puoi approvare la rilevazione.

Come Silktide esegue questo controllo

1. Carica la pagina come se fosse visualizzata su un dispositivo mobile.
2. Valuta se la pagina sembra progettata per i dispositivi mobili. Una pagina non supera il controllo quando si verifica una delle seguenti condizioni:
   • Non dispone di un tag viewport utilizzabile oppure il viewport dichiara una larghezza fissa superiore a 480 pixel.
   • Più del 35% del testo viene visualizzato con dimensioni troppo piccole per essere letto (meno di 10 pixel).
   • La pagina scorre orizzontalmente per più del 40% della larghezza dello schermo.
   • Il browser deve ridurre lo zoom al di sotto del 60% per adattare la pagina allo schermo.
3. Segnala la pagina quando non supera il controllo, una volta per pagina.

Risoluzione dei problemi

Il controllo correlato dello scorrimento orizzontale

Scorrimento orizzontale sui dispositivi mobili segnala quantità inferiori di contenuto che fuoriesce orizzontalmente nelle pagine che sono altrimenti compatibili con i dispositivi mobili. Questo controllo rileva il caso estremo in cui la pagina non cerca affatto di supportare i dispositivi mobili, quindi la soluzione consiste in una riprogettazione responsiva, non nella modifica di un singolo elemento che fuoriesce dai limiti.

Alcune parti della mia pagina hanno davvero bisogno di un layout bidimensionale

Le WCAG consentono eccezioni per i contenuti che, per essere utilizzabili, richiedono un layout bidimensionale, come mappe, tabelle di dati e diagrammi. La pagina che li circonda dovrebbe comunque ridisporsi; se una pagina segnalata rientra in una di queste eccezioni, approva la rilevazione.

Per saperne di più

• Comprendere il criterio di successo 1.4.10: Ridisposizione (WCAG 2.1)
• Perché Silktide esegue i controlli con un iPhone 5?
• Scorrimento orizzontale sui dispositivi mobili
• Progettato per i dispositivi mobili