WCAG 1.4.10 Flexibel layout

Innehållet ska gå att läsa och använda i en bredd av 320 CSS-pixlar utan att man behöver scrolla i sidled. Det motsvarar en datorskärm på 1280 pixlar som är förstorad till 400 procent, och det är så många med nedsatt syn använder en butik. Undantag gäller innehåll som behöver två dimensioner, som kartor och breda tabeller, men inte sidan runt omkring.

• Produktlistan har ett fast antal kolumner, så att produktkorten trycks ut utanför skärmen.
• Filterpanelen har en fast bredd bredvid produktlistan och fälls inte ihop på en smal skärm.
• Storlekstabellen gör att hela sidan scrollar i sidled, i stället för att tabellen scrollar i sin egen ruta.
• Långa ord, artikelnummer och e-postadresser bryts inte och trycker ut innehållet.
• Ett fast sidhuvud eller cookierutan tar så mycket av skärmen vid förstoring att innehållet inte går att nå.
• Fälten i kassan har en fast bredd i pixlar, till exempel för adress och kortnummer.

Bygg layouten med flexibla bredder och låt kolumnerna bryta om. Breda tabeller får scrolla i en egen ruta, och långa ord får brytas.

.produkter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.tabell-ruta { overflow-x: auto; }

.produktnamn { overflow-wrap: anywhere; }

Månadsgranskningen

Månadsgranskningen öppnar sidorna i 320 pixlars bredd och larmar när sidan går att scrolla i sidled. Element i egna rullbara rutor räknas inte. Om något döljs eller slutar fungera utan att sidan blir bredare, till exempel en meny som inte går att öppna, ser du bara genom att prova själv.

• Understanding 1.4.10 Reflow hos W3C (på engelska)
• Kravet i Diggs webbriktlinjer

Kravet 1.4.10 är nytt i WCAG 2.1 och finns inte i W3C:s svenska översättning, som gäller WCAG 2.0. Det svenska namnet kommer därför från Diggs webbriktlinjer.