Postrzegalność · Poziom AA

1.3.4 Orientacja

Treść ma działać w pionie i w poziomie, chyba że konkretna orientacja jest naprawdę niezbędna.

Krótko

Strona lub aplikacja nie może wymagać wyłącznie pionowej albo poziomej orientacji ekranu. Użytkownik powinien móc korzystać z treści w orientacji, która jest dla niego dostępna.

Wyjątki są wąskie: konkretna orientacja może być wymagana tylko wtedy, gdy jest niezbędna dla sensu lub działania treści, na przykład w aplikacji fortepianu albo przy skanowaniu czeku.

Problem w praktyce

Osoba ma tablet zamocowany do wózka w orientacji poziomej. Serwis wyświetla komunikat „Obróć urządzenie do pionu” i blokuje dalsze korzystanie. Użytkownik nie może fizycznie zmienić ustawienia urządzenia, więc traci dostęp do treści.

To kryterium nie jest ogólną oceną responsywności. Jeśli strona w obu orientacjach działa, ale wymaga lepszego dopasowania do szerokości ekranu, właściwsze może być 1.4.10.

Kogo to dotyczy

  • Osób używających urządzeń zamocowanych na wózku, statywie albo uchwycie.
  • Osób z ograniczoną sprawnością rąk, które nie mogą łatwo obrócić telefonu lub tabletu.
  • Użytkowników z powiększeniem ekranu, którzy wolą orientację poziomą.
  • Osób korzystających z aplikacji na tabletach w kioskowych lub medycznych uchwytach.

Dobry przykład

  • Formularz zgłoszeniowy działa w pionie i w poziomie.
  • Panel klienta zmienia układ kolumn, ale wszystkie funkcje są dostępne.
  • Komunikat zachęca do obrócenia ekranu dla wygody, ale nie blokuje dostępu.
  • Aplikacja wymaga orientacji tylko wtedy, gdy bez niej funkcja traci sens, na przykład klawiatura fortepianu.

Zły przykład

  • Strona w pionie pokazuje tylko ekran „Obróć telefon”.
  • W poziomie formularz płatności znika albo nie da się go obsłużyć.
  • Aplikacja szkoleniowa blokuje lekcję, jeśli tablet nie jest ustawiony pionowo.
  • Orientacja jest wymuszona dla wygody projektu, a nie z powodu niezbędności treści.

Przykłady kodu

Dobry przykład: układ dopasowuje się bez blokady

Media query zmienia układ, ale nie usuwa treści.

Kod — CSS

.checkout {
  display: grid;
  gap: 1rem;
}

@media (orientation: landscape) {
  .checkout {
    grid-template-columns: 2fr 1fr;
  }
}

Zły przykład: blokada treści w jednej orientacji

Treść znika, a użytkownik dostaje tylko polecenie obrócenia urządzenia.

Kod — CSS

@media (orientation: landscape) {
  main {
    display: none;
  }

  body::before {
    content: "Obróć urządzenie do pionu";
  }
}

Przykład graficzny

Źle

Tylko pion: „Obróć urządzenie”

Dostęp do treści zależy od fizycznego obrócenia urządzenia.

Dobrze

Pion i poziom: ta sama funkcja

Układ może się zmienić, ale treść i funkcje zostają dostępne.

Statyczne demo pokazuje różnicę między dostosowaniem układu a blokadą orientacji.

Jak sprawdzić

  1. Otwórz stronę na urządzeniu mobilnym albo w narzędziach deweloperskich.
  2. Sprawdź działanie w pionie i w poziomie.
  3. Upewnij się, że treść, formularze, menu i najważniejsze akcje są dostępne w obu orientacjach.
  4. Jeśli strona wymaga jednej orientacji, ustal, czy jest to naprawdę niezbędne dla funkcji.
  5. Nie myl blokady orientacji z problemem dopasowania układu do małej szerokości.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • część reguł CSS zależnych od orientacji,
  • komunikaty typu „obróć urządzenie”,
  • ukrywanie głównej treści w jednej orientacji.

Automat nie oceni pewnie

  • czy wymagana orientacja jest niezbędna,
  • czy wszystkie funkcje są realnie dostępne w obu orientacjach,
  • czy problem należy opisać pod 1.3.4 czy pod 1.4.10.

Typowe błędy

  • Pełnoekranowy komunikat „obróć telefon” zamiast treści.
  • Blokada poziomej orientacji w formularzu zakupowym.
  • Ukrycie przycisków w jednej orientacji.
  • Uzasadnianie blokady orientacji estetyką projektu zamiast realną niezbędnością.