WCAG 1.3.4 Orientering

Innehållet får inte vara låst till ett läge på skärmen, stående eller liggande, om inte just det läget är nödvändigt. Den som har mobilen eller surfplattan fäst i en hållare, till exempel på en rullstol, kan inte vända den. I en webbutik gäller det hela köpet: produktlistan, produktsidan, varukorgen och kassan ska fungera i båda lägena.

• En ruta som ber kunden vrida telefonen täcker sidan när den hålls liggande.
• Stilmallen vrider sidan 90 grader med transform när skärmen är liggande, så att innehållet hamnar på tvären.
• Kassan i en app eller inbäddad vy låser skärmen i stående läge med screen.orientation.lock.
• Menyn eller filterpanelen går inte att stänga i liggande läge, eftersom knappen hamnar utanför skärmen.
• Produktbilder och knappen Lägg i varukorgen döljs med en media query för liggande läge.

Ta bort lås och regler som döljer eller vrider sidan i ett visst läge. Anpassa i stället layouten till skärmens bredd och höjd, så att samma innehåll finns i båda lägena.

/* Låser sidan till stående läge */
@media (orientation: landscape) {
  body { transform: rotate(-90deg); }
  .vrid-telefonen { display: block; }
}

/* Anpassa layouten efter bredden i stället */
@media (min-width: 40rem) {
  .produkt { display: grid; grid-template-columns: 1fr 1fr; }
}

Kontrollera själv

Månadsgranskningen kör axe-core, som larmar när stilmallen låser sidan till ett läge med en media query. Lås som görs med skript, och rutor som ber kunden vrida telefonen, hittar den inte. Vänd mobilen till liggande på produktsidan, i varukorgen och i kassan och kontrollera att allt finns kvar och går att använda.

• Understanding 1.3.4 Orientation hos W3C (på engelska)
• Kravet i Diggs webbriktlinjer

Kravet 1.3.4 ä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.