Omflöde

Vad kriteriet kräver

När visningsporten är 320 CSS-pixlar bred — vilket motsvarar ett 1280px-skrivbord vid 400 % zoom, eller en liten mobil enhet — måste innehållet flöda om till en enda kolumn utan att horisontell rullning krävs. Användaren ska aldrig behöva rulla både vertikalt och horisontellt för att läsa sammanhängande innehåll. Nödvändiga undantag tillåts: datatabeller, komplexa kartor, kodexempel och presentationer där tvådimensionell rullning är grundläggande för innehållet.

Hur du uppfyller det

• Bygg layouten mobile-first med flexbox eller CSS grid som kollapsar till en enda kolumn vid smala bredder.
• Testa vid exakt 320 px visningsportbredd — eller vid 400 % webbläsarzoom på ett 1280px-fönster — och kontrollera varje sida.
• Använd max-width: 100% på bilder, videor och inbäddat media så att de krymper med visningsporten.
• Fäll ihop den horisontella skrivbordsnavigeringen till en vertikal mobilmeny vid rätt brytpunkt.
• För datatabeller, tillåt horisontell rullning inuti ett overflow-x: auto-skal — tabellen själv är undantagen, men behållaren ska inte trycka ut sidan åt sidan.
• Undvik fasta pixelbredder på sidcontainrar och modala dialoger.

Vanliga fel

• Hero-sektioner med fast bredd (width: 1200px) som spiller ut ur visningsporten vid 320 px och tvingar fram horisontell rullning.
• Modala dialoger som anges i vw/px och överstiger 320 px bred, vilket klipper innehållet på smala skärmar.
• Kodexempel i <pre>-block utan radbrytning eller rullningsbehållare, som trycker ut sidan åt sidan.
• Marknadsföringssidor med absolut positionerade dekorativa element som inte tar hänsyn till smala visningsporter.
• Fästa element som täcker innehåll vid 400 % zoom eftersom de dimensionerades för den fullbreda visningsporten.
• Tabeller utan rullningsbehållare, så att hela sidan rullar horisontellt istället för enbart tabellen.

Varför det spelar roll

Omflöde är det framgångskriterium som fångar de flesta “responsiva men egentligen inte responsiva” webbplatser — en layout som går sönder vid 320 CSS-pixlar är en layout som går sönder vid 400 % zoom för en synskadad användare på skrivbordet. De två fallen är matematiskt identiska. Att åtgärda omflöde innebär vanligtvis att man förstärker den responsiva design som redan är nästan klar, vilket gör det till en av de mest lönsamma WCAG-åtgärderna.