1.3.4 Orientacja

Strona musi działać w pionie i w poziomie i nie może blokować się na jednej orientacji, chyba że ta orientacja jest istotna.

/ Czego wymaga

Strona musi działać w orientacji pionowej i poziomej. Nie może blokować się na jednej z nich, obracać się na bok ani zasłaniać ekranu komunikatem z prośbą o obrócenie urządzenia. Niektórzy mają telefon lub tablet zamocowany na stałe, na przykład na ramieniu wózka elektrycznego, i nie mogą go obrócić. Osoby słabowidzące wybierają czasem orientację poziomą, żeby mieć większy tekst. Dla obu grup strona, która działa tylko w jednym ułożeniu, po prostu nie działa.

Wyjątkiem jest orientacja istotna, bez której treść nie działałaby albo nie miałaby sensu. Przykłady W3C to fotografowanie czeku bankowego, aplikacja pianina, slajdy do projektora lub telewizora i rzeczywistość wirtualna. Kryterium dotyczy ograniczania orientacji przez autora. Nie obejmuje użytkownika, który sam blokuje obrót swojego urządzenia, ani zmian układu wynikających z rozmiaru ekranu. Dopasowanie układu do każdej orientacji jest w porządku; udostępnienie tylko jednej już nie.

/ Jak strony go nie spełniają

W orientacji poziomej serwis mobilny zakrywa całą stronę nakładką z napisem „Obróć urządzenie”.
Reguła w @media (orientation: landscape) nadaje elementowi body transform: rotate(-90deg), więc w poziomie cała strona leży na boku.
Manifest aplikacji internetowej ustawia "orientation": "portrait", więc zainstalowana aplikacja nie obraca się razem z urządzeniem.
Strona z filmem wywołuje screen.orientation.lock("landscape") po przejściu na pełny ekran, choć treść działałaby w obu orientacjach.
Zapytanie o orientację ustawia display: none na przycisku wysyłania formularza, więc w poziomie formularz da się wypełnić, ale nie da się go wysłać.

/ Jak sprawdzić samodzielnie

Wyłącz systemową blokadę obrotu w telefonie lub tablecie i otwórz stronę w pionie. Zanotuj, co widać i co da się zrobić.
Obróć urządzenie do poziomu i powtórz. Treść powinna pozostać prosto i być czytelna, a każda kontrolka nadal działać.
Bez urządzenia otwórz pasek urządzeń w narzędziach deweloperskich Chrome, wybierz telefon i naciśnij przycisk obrotu. To przełącza zapytania o orientację.
Przeszukaj CSS pod kątem zapytań o orientację i sprawdź, co reguły w ich wnętrzu ukrywają, obracają albo podmieniają. Przeszukaj skrypty pod kątem screen.orientation.lock, a manifest pod kątem pola orientation.
Jeśli jedna orientacja jest zablokowana, oceń, czy jest istotna w rozumieniu kryterium, jak przy fotografowaniu czeku albo klawiaturze pianina, czy to tylko preferencja projektowa.

/ Jak to naprawić

Usuń nakładkę „obróć urządzenie” i ułóż treść dla obu orientacji za pomocą responsywnego CSS.
Usuń transform: rotate() i właściwość rotate z reguł w zapytaniach o orientację. Używaj tych zapytań do zmiany układu, na przykład liczby kolumn, a nie do obracania treści.
Usuń pole orientation z manifest.json albo ustaw je na "any".
Usuń wywołania screen.orientation.lock(), chyba że orientacja jest istotna. Jeśli jest, daj użytkownikowi kontrolkę do przełączania.
Zapytaniami o orientację przestawiaj treść, ale nigdy jej nie ukrywaj, żeby każda kontrolka była dostępna w obu ułożeniach.

/ Co sprawdza nasz skaner

Żaden test w naszym skanie nie obejmuje 1.3.4. Przebieg na wyrenderowanej stronie wczytuje każdą stronę w jednym stałym widoku komputerowym i nigdy go nie obraca, więc nie zobaczy komunikatu o obróceniu urządzenia, układu obróconego przez CSS ani blokady orientacji w manifeście. W audycie ręcznym strony otwiera się na telefonie lub tablecie w obu orientacjach.

/ Kto je łamie, według naszych pomiarów

Cotygodniowy indeks nie ma danych dla tego kryterium, bo żaden test uruchamiany przez skan witryny go nie sprawdza. Ocenia je człowiek i do tego służy audyt ręczny.

Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.

/ Pytania o to kryterium

Czy zablokowanie serwisu mobilnego w pionie narusza WCAG?

Tak. Kryterium sukcesu 1.3.4 na poziomie AA nie pozwala, by treść ograniczała swój widok i działanie do jednej orientacji wyświetlania, chyba że ta orientacja jest istotna. Blokada w CSS, w skrypcie albo w manifeście aplikacji, a także wyświetlanie w drugiej orientacji samego komunikatu, to wszystko ograniczenia. Kryterium dodano w WCAG 2.1.

Kiedy orientacja jest istotna?

Wtedy, gdy bez niej treść nie działałaby albo zmieniłaby znaczenie. W3C podaje czek bankowy, aplikację pianina, slajdy do projektora lub telewizora oraz treści rzeczywistości wirtualnej. Układ, który według projektanta lepiej wygląda w pionie, nie jest istotny; aplikacja fotografująca dokument dwa razy szerszy niż wyższy może być.

Czy strona nie spełnia kryterium, jeśli użytkownik zablokował telefon w pionie?

Nie. Kryterium dotyczy treści, która ogranicza orientację, a nie ustawień samego użytkownika. W3C zaznacza, że strona, która nie ogranicza orientacji, automatycznie stosuje się do blokady urządzenia. Wykrywanie orientacji i dopasowanie do niej układu też jest dozwolone. Błędem jest udostępnienie tylko jednej orientacji.

Zmierz własną stronę Wszystkie zmierzone bariery