Questa traduzione non è ancora stata rivista dalla redazione. Fa fede la versione tedesca. Deutsche Fassung →
Barrierefreiheit
Come un sito web rimane leggibile su cellulare senza scorrimento orizzontale?
Un sito web rimane leggibile senza scorrimento orizzontale se i suoi contenuti con una visualizzazione stretta — lo standard prevede una larghezza di 320 pixel — vanno automaticamente a capo in una singola colonna. Questa larghezza corrisponde a un telefono stretto o a una visualizzazione molto ingrandita al computer. Chi deve scorrere avanti e indietro per ogni riga perde il filo della lettura.
Riflusso: i contenuti si adattano alla larghezza
Riflusso significa: quando l'area di visualizzazione si restringe, i contenuti si riorganizzano — le colonne affiancate scorrono una sotto l'altra, le immagini si rimpiccioliscono, le righe vanno a capo prima. Questo riguarda contemporaneamente due gruppi. In primo luogo, gli utenti di dispositivi mobili, che su molti siti rappresentano la maggior parte dei visitatori. In secondo luogo, le persone ipovedenti al computer che ingrandiscono molto le pagine: con un forte ingrandimento, la porzione visibile corrisponde esattamente a una visualizzazione stretta. Se la pagina non va a capo, devono scorrere a destra e poi indietro per ogni singola riga — la lettura diventa una prova di pazienza. Le cause tipiche sono tabelle a larghezza fissa, mappe incorporate troppo grandi e immagini con dimensioni pixel fisse.
Come il nostro motore di misura verifica lo scorrimento orizzontale
Il nostro motore di misura esegue il rendering della vostra pagina in un vero browser con diverse larghezze di schermo — inclusa la visualizzazione stretta di 320 pixel — e misura se compare una barra di scorrimento orizzontale e di quanti pixel il contenuto si estende oltre. Solo la scorrevolezza effettiva e misurata conta come rilievo; per escludere falsi positivi dovuti a ritardi di caricamento, il test misura due volte se necessario e segnala onestamente i risultati instabili come „verificare su dispositivo reale”. Ogni rilievo indica la larghezza di schermo interessata e è accompagnato da uno screenshot. I risultati confluiscono sia nell'area di verifica accessibilità che nell'area di verifica responsività — è la stessa misurazione.
Beispiele
Feste Breite auf dem Handy
.inhalt { width: 1100px; }
.tabelle { min-width: 900px; }.inhalt { max-width: 1100px; width: 100%; }
.tabelle-huelle { overflow-x: auto; }Bei 320 Pixel Breite (400 Prozent Zoom) fließt der Inhalt um; nur Tabellen und Karten dürfen einen eigenen Scrollbereich haben.
- Rimpicciolite gradualmente la finestra del browser sul computer fino a una colonna stretta — se compare una barra di scorrimento orizzontale, c'è un problema.
- Controllate prima le tabelle: le grandi tabelle di dati richiedono una soluzione speciale sui telefoni, ad esempio contenitori scorrevoli con un'indicazione visibile.
- Chiedete alla vostra agenzia di sostituire le larghezze pixel fisse su immagini e contenitori con specifiche adattabili.
- Testate i contenuti incorporati come mappe e video nella visualizzazione stretta — i componenti di terze parti sfondano il frame più spesso.
- Controllate la visualizzazione mobile dopo ogni aggiornamento di contenuto importante prima che la pagina vada online.