Scorrimento orizzontale su dispositivi mobili

Silktide controlla se le tue pagine scorrono lateralmente sui telefoni cellulari. I contenuti dovrebbero adattarsi alla larghezza di uno schermo piccolo, così i visitatori devono solo scorrere verso il basso.

Perché è importante

Quando una pagina è più larga dello schermo, parte di ogni riga di testo rimane fuori dalla visualizzazione e il lettore deve trascinare avanti e indietro per seguire il contenuto. Questo è faticoso per tutti e costituisce una vera barriera per le persone ipovedenti (che spesso ingrandiscono anche la pagina) e per le persone con disabilità motorie. Il criterio di successo WCAG 1.4.10 (Ridisposizione, di ) richiede che i contenuti si adattino a uno schermo largo 320 pixel senza dover scorrere in due dimensioni.

Di solito la pagina nel suo complesso è corretta e un singolo elemento causa l'overflow: una tabella larga, un'immagine con larghezza fissa, un video incorporato o una stringa lunga senza possibilità di interruzione, come un URL.

Come risolvere il problema

Apri la pagina su un telefono (oppure restringi la finestra del browser a 320 pixel) e trova ciò che sporge dal bordo destro.
Correggi l'elemento problematico con responsive:

/* L'elemento con larghezza fissa rende la pagina più larga dello schermo */
img.hero { width: 600px; }

/* Corretto: si ridimensiona per adattarsi agli schermi stretti */
img.hero { max-width: 100%; height: auto; }

Per le tabelle di dati larghe, consenti alla tabella di scorrere all'interno del proprio contenitore (overflow-x: auto), così il resto della pagina continua ad adattarsi allo schermo.
I contenuti che richiedono effettivamente un layout a due dimensioni, come mappe e diagrammi, possono scorrere: se questo è tutto ciò che mostra il risultato, puoi .

Come esegue il controllo Silktide

Carica la pagina come dispositivo mobile.
Misura di quanto la pagina si estende oltre il bordo destro dello schermo. Un overflow inferiore a 10 pixel viene ignorato come errore di arrotondamento.
Classifica l'overflow in base al numero di dispositivi interessati, da un leggero overflow che riguarda solo i telefoni più piccoli (larghi 320 pixel, come un iPhone 5) fino a un overflow abbastanza ampio da interessare i telefoni grandi (larghi 414 pixel, come un iPhone 7 Plus).

Risoluzione dei problemi

Il controllo relativo al design per dispositivi mobili

Questo controllo segnala l'overflow orizzontale sulle pagine che per il resto sono compatibili con i dispositivi mobili. Le pagine che non cercano affatto di supportare i dispositivi mobili — nessun , testo minuscolo, overflow estremo — vengono segnalate invece da Zoom e scorrimento su dispositivi mobili, dove la soluzione è una riprogettazione responsive.

Non riesco a vedere alcuno scorrimento

Gli overflow ridotti possono essere invisibili sui telefoni più grandi. Esegui il test a 320 pixel di larghezza: gli strumenti per sviluppatori del browser consentono di impostare la larghezza esatta — e cerca qualsiasi elemento che oltrepassi il bordo destro.