WCAG 1.3.4 Orientacja

Kryterium sukcesu 1.3.4 pomaga osobom, których telefon lub tablet jest zamocowany w jednej pozycji — np. na wózku inwalidzkim — oraz osobom, które nie mogą łatwo obrócić urządzenia. Muszą one móc korzystać z witryny w orientacji, którą mają. Kryterium dodano w WCAG 2.1; to poziom AA, więc należy do wymagań, na których opierają się norma EN 301 549 i Europejski akt o dostępności (punkt 9.1.3.4).

Czego wymaga kryterium

Treść nie może ograniczać swojego widoku i obsługi do jednej orientacji wyświetlania, np. pionowej lub poziomej, chyba że określona orientacja wyświetlania jest niezbędna.

Oznacza to, że:

• witryna działa i pokazuje całą treść zarówno w trybie pionowym, jak i poziomym;
• układ może się dostosowywać (jedna kolumna w pionie, dwie w poziomie) — to jest w porządku;
• komunikat w rodzaju „obróć urządzenie” lub układ, który w jednej orientacji obraca treść o 90°, nie spełnia kryterium.

Przykłady orientacji niezbędnej według WCAG: czek bankowy, aplikacja pianina, slajdy na projektor lub telewizor oraz treści wirtualnej rzeczywistości.

Typowe błędy w sklepie internetowym

• konfigurator produktu lub przeglądarka 3D, która w trybie pionowym pokazuje „obróć telefon”;
• CSS, który na małych ekranach w trybie poziomym ukrywa proces zamówienia lub treść główną;
• opakowanie aplikacji mobilnej, które blokuje cały sklep w trybie pionowym;
• galeria zdjęć, która otwiera się tylko w trybie poziomym.

Jak to sprawdzić

Automatycznie: nasz skaner wykrywa CSS, który blokuje treść w jednej orientacji, np. obracając ją lub ukrywając w zapytaniu media orientation (reguła CSS orientation lock). Blokady ustawione w JavaScripcie, w manifeście aplikacji internetowej lub w natywnym opakowaniu aplikacji nie są objęte, dlatego warto też przetestować na urządzeniu.

Ręcznie: należy otworzyć kluczowe strony — główną, kategorii, produktu, koszyk, proces zamówienia, konto — na telefonie i tablecie. Wyłączyć blokadę obrotu i obrócić urządzenie w każdym widoku. Cała treść i wszystkie funkcje muszą pozostać dostępne, a nic nie powinno prosić o obrócenie urządzenia.

Jak to naprawić

• Usunąć CSS, który obraca lub ukrywa treść w regułach @media (orientation: …); zamiast tego używać punktów przełamania opartych na szerokości.
• Usunąć nakładki „obróć urządzenie”.
• Nie ustawiać stałej wartości orientation w manifeście aplikacji internetowej, chyba że jest naprawdę niezbędna.
• Projektować komponenty, takie jak galerie i konfiguratory, tak aby działały w wąskim układzie pionowym.

Powiązane kryteria

• 1.4.10 Dopasowanie do ekranu — treść mieszcząca się na wąskich ekranach bez przewijania w poziomie.
• 1.4.4 Zmiana rozmiaru tekstu — powiększanie tekstu do 200 %.
• Skaner WCAG — sprawdź stronę swojej witryny.

Najczęstsze pytania

Czy sklep musi wyglądać tak samo w trybie pionowym i poziomym?

Nie. Układ może się zmieniać, ale treść i funkcje muszą być dostępne w obu orientacjach. Błędem jest dopiero zablokowanie widoku w jednej orientacji lub proszenie użytkowników o obrócenie urządzenia.

Kiedy stała orientacja jest dozwolona?

Tylko wtedy, gdy dana orientacja jest niezbędna. WCAG podaje przykłady takie jak czek bankowy, aplikacja pianina, slajdy na projektor lub telewizor oraz treści wirtualnej rzeczywistości.

Czy narzędzie automatyczne znajdzie blokady orientacji?

Znajdzie CSS, który obraca lub ukrywa treść na podstawie zapytania media o orientację. Blokady ustawione w JavaScripcie lub w aplikacji natywnej wymagają ręcznego testu na urządzeniu.