1.4.10 Responsiivisuus
Onnistumiskriteerin virallinen kuvaus
Sisältö voidaan esittää ilman sisällön tai toiminnallisuuden menettämistä ja ilman kahdensuuntaista vierittämistä, kun
- pystysuuntaan vieritettävän sisällön leveys on 320 CSS-pikseliä.
- vaakasuuntaan vieritettävän sisällön korkeus on 256 CSS-pikseliä.
Lukuun ottamatta sisällön osia, jotka vaativat kahdensuuntaista esitystapaa käytön tai merkityksen vuoksi.
Mitä pitää tehdä?
Varmista, että sisältö mukautuu katselualueelle ilman vaakasuuntaista vieritystä.
Miksi tämä on tärkeää?
Parantaa luettavuutta pienillä näytöillä ja heikkonäköisille käyttäjille.
Yleisiä sudenkuoppia
320 CSS-pikselin leveys alkaa olla hieman kapea. Hyvin usein ulkoasuja luodaan 375 pikselin tai vielä leveämpiä mobiilileveyksiä varten.
Jos kehittäjä ei ole perillä saavutettavuudesta, hän ei ehkä salli sisällön jakautumista useammalle riville esimerkiksi otsikkoelementissä.
Miten testata?
Pystysuoraan vierittyvän sisällön tulisi toimia 320 CSS-pikselin leveydessä. Voit aloittaa testaamalla sitä ilman zoomausta. Kun alat testata zoomausta, käytä selaimen leveytenä 1280 CSS-pikseliä ja zoomaa sitten 400 %:iin. Tämä vastaa 320 CSS-pikselin leveyttä.
Vaakasuoraan vierittyvän sisällön pitäisi toimia 256 CSS-pikselin korkeudessa. Voit taas aloittaa testaamalla tätä korkeutta ilman zoomausta. Kun alat testata zoomausta, käytä selaimen korkeutta 1024 CSS-pikseliä ja zoomaa 400 %:iin. Tämä vastaa 256 CSS-pikselin korkeutta.
Joidenkin sisältöjen on sallittua vaatia kaksiulotteista vieritystä. Esimerkkejä: kartat ja kaaviot sekä datataulukot.