Uudelleenvuoto

Mitä kriteeri vaatii

Kun näkymä on 320 CSS-pikseliä leveä — mikä vastaa 1 280 pikselin työpöytänäyttöä 400 %:n zoomilla tai pientä mobiililaitetta — sisällön täytyy virrata yhteen sarakkeeseen ilman vaakasuuntaista vieritystä. Käyttäjän ei koskaan pidä joutua vierittämään sekä pysty- että vaakasuunnassa lukeakseen jatkuvaa sisältöä. Välttämättömät poikkeukset ovat sallittuja: datataulukot, monimutkaiset kartat, koodinäytteet sekä esitykset, joissa kaksiulotteinen vieritys on sisällön olennainen osa.

Miten vaatimus täytetään

• Rakennetaan asettelu mobile-first flexbox- tai CSS grid -tekniikalla, joka tiivistyy yhteen sarakkeeseen pienissä leveyksistä.
• Testataan tasan 320 px:n näkymäleveydellä — tai 400 %:n selainzoomilla 1 280 pikselin ikkunassa — ja tarkistetaan jokainen sivu.
• Käytetään max-width: 100% kuvissa, videoissa ja upotetuissa medioissa, jotta ne pienenevät näkymän mukana.
• Navigaatio tiivistetään mobiilissa pystysuoraan valikkoon oikeassa katkaisukohdan kohdalla.
• Datataulukoille sallitaan vaakasuuntainen vieritys overflow-x: auto -kääreen sisällä — taulukko itse on poikkeuksen piirissä, mutta se ei saa työntää koko sivua sivuttain.
• Ei käytetä kiinteitä pikselilevyksiä sivun säiliöissä tai modaali-ikkunoissa.

Yleisiä epäonnistumisia

• Kiinteän leveyden hero-osiot (width: 1200px), jotka ylittävät näkymän 320 px:ssä ja pakottavat vaakasuuntaiseen vieritykseen.
• Modaali-ikkunat, jotka on mitoitettu vw- tai px-yksiköissä, ylittävät 320 px:n leveyden ja leikkaantuvat pienillä näytöillä.
• Koodinäytteet <pre>-lohkoissa ilman rivikatkoja tai vierityssäilöä, jotka levittävät sivua leveämmäksi.
• Markkinointisivuilla absoluuttisesti sijoitetut koristeet, jotka eivät huomioi kapeita näkymiä.
• Kiinteät elementit, jotka peittävät sisältöä 400 %:n zoomilla, koska ne on mitoitettu täysleveälle näkymälle.
• Taulukot ilman vierityssäilöä, jolloin koko sivu vierittää vaakasuunnassa taulukon sijaan.

Miksi kriteeri on tärkeä

Uudelleenvuoto on kriteeri, joka paljastaa useimmat “responsiiviset mutta ei oikeasti responsiiviset” sivustot — asettelu, joka hajoaa 320 CSS-pikselin levyisenä, hajoaa myös 400 %:n zoomilla heikkonäköisen työpöytäkäyttäjän näytöllä. Nämä kaksi tapausta ovat matemaattisesti sama asia. Uudelleenvuodon korjaaminen tarkoittaa tavallisesti jo lähes valmiin responsiivisen suunnittelun vahvistamista, mikä tekee siitä yhden hyödyllisimmistä WCAG-korjauksista.