Skapa en flexibel layout som fungerar vid förstoring eller liten skärm

Om riktlinjen

Innehåller lagkrav
EN 9.1.4.10
WCAG 1.4.10 (AA)

Område

Genom att göra layouten flexibel och responsiv kan du säkerställa att ditt innehåll blir tillgängligt för alla, oavsett om de använder datorer, surfplattor, smartphones eller förstorar innehållet med zoom.

Därför ska layouten gå att förstora eller fungera på liten skärm

Många använder små skärmar och personer som på grund av nedsatt syn förstorar innehållet har liknande behov.

För att inte skapa besvär för den som använder en liten skärm eller förstoring behöver layouten anpassas så att den inte behöver skrollas i mer än en dimension. Att behöva skrolla en vertikal layout i sidled är besvärligt och försämrar upplevelsen.

Vad kräver lagen?

Skapa en layout som fungerar på en 320 CSS-pixlar bred skärm utan att information eller funktionalitet går förlorad, och som inte kräver skrollning i mer än en riktning.

Skrolla horisontellt och/eller vertikalt

För horisontella skriftspråk som svenska innebär detta att vanlig vertikal skrollning får användas, men inte om användaren även måste skrolla horisontellt.

För vertikalt skrollande layouter, exempelvis sidor med vertikala skriftspråk (till exempel japanska), gäller att enbart horisontell skrollning ska behövas i fönsterhöjder ner till 256 pixlar.

Riktlinjen använder CSS-pixlar. Ett webbläsarfönster som är 1280 pixlar brett och zoomas 400 % motsvarar en skärmbredd/fönsterbredd på 320 CSS-pixlar.

Undantag från lagkraven

Riktlinjen gäller inte för de delar av innehåll som kräver en tvådimensionell layout.

Viss grafik och video är till sin natur tvådimensionell och det finns fall där innehållet förlorar sin mening om en bild delas upp och innehållet staplas ovanpå varandra.

Exempel: karta eller planlösning

Exempelvis skulle en karta eller planlösning kunna bli mycket svårläst om den delades upp i olika delar eller förminskades till 320 pixlars bredd.

Undantaget gäller även för komplexa datatabeller som har ett tvådimensionellt förhållande mellan tabellrubriker och dataceller. Men ofta fungerar det ganska bra att låta kolumner “falla in” som rader när det horisontella utrymmet minskar.

Rekommendationer utöver lagkrav

Förutom lagkraven finns det rekommendationer som kan förbättra den digitala tillgängligheten:

Arbeta med responsiv design

Genom att arbeta med responsiv design kan innehållet flöda om och presenteras på olika sätt baserat på skärmstorlek. Det betyder att samma webbplats har olika design beroende på vilken enhet webbplatsen visas i. Layouten kan skilja sig mycket mellan en större datorskärm och en mindre mobilskärm eftersom man nyttjar skärmstorlekarna olika.

Det finns olika tekniker och ramverk för att arbeta med responsiv design. Ofta kombinerar man olika tekniker för att skapa en layout som är anpassad utifrån respektive skärmbredds förutsättningar.

Lägg det viktigaste ovanför ”the fold”

Inom både tidningslayout och interaktionsdesign förekommer begreppet “the fold”. En tidning viks ofta på mitten och det innehåll som visas på ovansidan (“above the fold”) får allra mest exponering.

På motsvarande sätt får det innehåll som presenteras innan användaren skrollat överhuvudtaget mest exponering på en webbsida. För användare som förstorar innehållet eller har en liten skärm kommer “vecket” tidigare, vilket innebär att de användarna riskerar att få en sämre upplevelse och en stor del av innehållet får minskad exponering om riktlinjen inte följs.

Så testar du flexibel layout

Kontrollera layouten i olika webbläsare, i stora och små fönster (åtminstone ner till 320 pixlars bredd), på olika enheter (bärbar dator, surfplatta, smartphone och så vidare) och säkerställ att innehållet inte överlappar eller blir helt eller delvis oåtkomligt. Testa också med olika inställningar för zoom.