Wróć do wszystkich kryteriów

1.3.4 Orientacja (ang.) Orientation

Specjalizacje:

  • Designer
  • Deweloper

Elementy:

  • Cała strona / widok

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Celem tego kryterium jest umożliwienie użytkownikom oglądania i interakcji z treścią w dowolnej orientacji ekranu (pionowej – (ang.) portrait lub poziomej – (ang.) landscape), która jest preferowana przez użytkownika. Jest to kluczowe dla osób z niepełnosprawnościami motorycznymi lub niskowidzących, które korzystają ze stałego montażu urządzenia lub powiększania.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#orientation

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#orientacja

    Wpływ na dostępność (Kogo wspierasz?)

    • Każdy użytkownik mobilny: Elastyczność pozwala na komfort osobie, która chce czytać artykuł jedną ręką w autobusie (pion) lub wygodnie przejrzeć dane w szerokiej tabeli przy biurku (poziom).
    • Użytkownicy z niepełnosprawnością ruchową: Osoby te często korzystają z urządzeń zamontowanych na stałe do wózków inwalidzkich lub specjalnych stojaków. Dla nich fizyczna zmiana orientacji ekranu jest często niemożliwa, więc wymuszona orientacja pionowa na poziomo zamontowanym ekranie czyni serwis niedostępnym.
    • Osoby niedowidzące: Wielu użytkowników korzystających z silnego powiększenia ekranu preferuje tryb poziomy. Pozwala on na wyświetlenie dłuższego fragmentu tekstu w jednej linii, co drastycznie ogranicza konieczność męczącego przewijania strony w bok (panning) podczas czytania.
    • Osoby niewidome i niedowidzące korzystające z czytników ekranu: Wymuszona zmiana orientacji często wiąże się z nagłym przerysowaniem interfejsu lub zmianą kolejności elementów w kodzie. Dla osoby niepełnosprawnej wzrokowo oznacza to nagłą utratę orientacji w strukturze strony i konieczność ponownego poszukiwania treści, co drastycznie obniża komfort i szybkość obsługi.
    • Użytkownicy z ograniczeniami poznawczymi: Użytkownicy ci często wypracowują specyficzne nawyki i polegają na stałym układzie elementów. Nagła konieczność zmiany pozycji urządzenia lub dezorientujące komunikaty o „wymaganym obrocie” mogą budzić niepokój i utrudniać zrozumienie struktury serwisu.
    • Osoby korzystające z technologii wspomagających: Niektóre akcesoria sterujące lub czytniki ekranu mogą być skonfigurowane do pracy w konkretnym układzie, a wymuszona zmiana orientacji może zakłócić ich działanie.

    Zasady wdrażania i wymagania techniczne

    Podstawą jest stosowanie zasad (ang.) Responsive Web Design (RWD), dzięki którym strona inteligentnie reaguje na parametry okna przeglądarki.

    • Wykorzystuj jednostki relatywne: Pamiętaj, aby zamiast sztywnych pikseli stosować procenty (%), jednostki viewportu (vw, vh) oraz em/rem. Dzięki temu elementy będą się skalować proporcjonalnie.
    • Stosuj elastyczne systemy układu: Zastosuj techniki CSS Flexbox lub Grid. Pozwalają one na automatyczne przemieszczanie się elementów (np. zmiana z układu kolumnowego na wierszowy) przy zmianie orientacji.
    • Personalizuj style przez Media Queries: Wykorzystuj @media (orientation: landscape) oraz @media (orientation: portrait) wyłącznie do optymalizacji wyglądu, a nie do blokowania dostępu do treści.
    • Zadbaj o elastyczność mediów: Każdy obraz i wideo powinno posiadać właściwość max-width: 100%, aby nie wychodziło poza ramy ekranu w żadnym z trybów.

    Wyjątki i sytuacje szczególne

    Choć elastyczność jest standardem, WCAG dopuszcza odstępstwa od tej reguły w sytuacjach, gdy konkretna orientacja jest kluczowa – czyli jej zmiana uniemożliwiłaby poprawne działanie funkcji lub zniekształciłaby przekaz informacji.

    Do uzasadnionych wyjątków należą:

    • Symulatory instrumentów muzycznych: Aplikacje zaprojektowane do nauki gry, np. wirtualne pianino, gdzie szeroki, poziomy układ klawiszy jest niezbędny, aby oddać fizyczną strukturę instrumentu i umożliwić naturalną grę.
    • Specjalistyczne narzędzia pomiarowe i rejestracyjne: Przykładowo, cyfrowy oscyloskop lub aplikacje do precyzyjnej analizy dźwięku, które wymagają szerokiego ekranu do prezentacji czytelnych wykresów w czasie rzeczywistym.
    • Gry wideo o specyficznej mechanice: Gry, których rozgrywka opiera się na szerokim polu widzenia (np. symulatory wyścigowe) lub specyficznym układzie pionowym (np. niektóre gry logiczne typu „spadające klocki”), gdzie zmiana orientacji zniszczyłaby logikę zabawy.
    • Prezentacja niedzielnych treści wizualnych: Sytuacje, w których obraz lub wideo muszą być wyświetlane w konkretnej proporcji, aby zachować czytelność detali, których nie da się efektywnie przeskalować do innego formatu (np. niektóre prezentacje kinowe).
    • Systemy bankowe i giełdowe: Zaawansowane arkusze danych lub wielokolumnowe zestawienia finansowe, które ze względu na swoją strukturę muszą być wyświetlane w trybie poziomym, aby użytkownik mógł porównywać dane bez ich drastycznego zniekształcenia.
    • Narzędzia do skanowania i AR: Aplikacje korzystające z rzeczywistości rozszerzonej lub skanery kodów, które mogą wymagać konkretnego ustawienia kamery (np. pionowego), aby poprawnie nakładać warstwy cyfrowe na obraz rzeczywisty.

    Przykłady implementacji

    Najczęstsze błędy

    • Blokowanie dostępu przez komunikaty „Obróć ekran”: Wyświetlanie nakładek ((ang.) overlays) lub okien modalnych, które żądają od użytkownika zmiany pozycji urządzenia, aby odblokować widok. Jest to bariera krytyczna dla osób z niepełnosprawnością ruchową, które korzystają z urządzeń zamontowanych na stałe.
    • Techniczne wymuszanie orientacji: Wykorzystywanie skryptów JavaScript (np. API screen.orientation.lock()) lub restrykcyjnych ustawień w plikach manifestu aplikacji, aby na sztywno przypisać widok pionowy lub poziomy. Jeśli nie jest to sytuacja kluczowa (np. instrument muzyczny), stanowi to naruszenie standardu.
    • Sztywne wymiarowanie elementów: Deklarowanie szerokości kluczowych kontenerów w pikselach (width: 1200px), co po obrocie ekranu na mniejszym urządzeniu uniemożliwia poprawne przerysowanie układu i wymusza uciążliwe przewijanie poziome.
    • Warunkowe usuwanie kluczowych funkcji: Całkowite ukrywanie istotnych fragmentów strony (np. nawigacji lub formularzy) za pomocą display: none tylko w jednej z orientacji. Użytkownik musi mieć dostęp do tych samych funkcji niezależnie od tego, jak trzyma telefon.
    • Zaniedbanie weryfikacji w trybie poziomym: Brak testów responsywności, co skutkuje zasłanianiem kluczowych przycisków akcji (np. „Kup teraz” lub „Wyślij”) przez elementy stałe ((ang.) sticky) lub nakładające się na siebie warstwy w widoku horyzontalnym.
    • Utrata danych podczas obrotu: Błędy w implementacji powodujące przeładowanie strony lub resetowanie stanu formularza po zmianie orientacji urządzenia. Dla użytkownika oznacza to konieczność ponownego wpisywania wszystkich informacji.

    Najlepsze praktyki

    • Podejście „Orientation-Neutral”: Projektuj interfejs tak, aby był neutralny wobec orientacji. Zamiast tworzyć osobne widoki dla pionu i poziomu, skup się na elastycznych kontenerach, które płynnie wypełniają dostępną przestrzeń niezależnie od proporcji ekranu.
    • Podejście (ang.) „mobile-first”: Rozpoczynaj proces projektowania od najmniejszych ekranów, które naturalnie wymusza dbałość o elastyczność od najmniejszych ekranów.
    • Zachowanie stanu i kontekstu: Upewnij się, że po zmianie orientacji użytkownik nie traci danych wpisanych do formularzy, a pozycja przewijania strony pozostaje w tym samym miejscu.
    • Zarządzanie fokusem (ang. Focus Management): Zweryfikuj, czy kursor systemowy lub focus klawiatury pozostaje na tym samym elemencie po obróceniu urządzenia. Jest to kluczowe dla osób niewidomych korzystających z czytników ekranu, aby nie musiały one ponownie nawigować od początku strony.
    • Podatność na powiększanie (ang. Zoom-friendly): Pamiętaj, że orientacja pozioma jest często używana w połączeniu z systemowym powiększeniem treści. Projektuj tak, aby przy 400% powiększeniu w trybie (ang.) landscape treść nadal była czytelna i nie nakładała się na siebie.
    • Testowanie na rzeczywistych urządzeniach: Emulatory w przeglądarkach są pomocne, ale tylko test na fizycznym sprzęcie (np. tablecie czy telefonie) pozwoli Ci poczuć realne ograniczenia użytkowników.

    Metody testowania

    • Testowanie manualne (Telefon/Tablet): Otwórz stronę na smartfonie i fizycznie obróć urządzenie o 90 stopni, sprawdzając, czy treść pozostaje czytelna.
    • Narzędzie deweloperskie (ang.) Developer Tools:
      • Emulacja urządzeń: Skorzystaj z trybu emulacji urządzeń mobilnych w przeglądarce i przełączaj orientację za pomocą dedykowanego przycisku.
      • Inspekcja kodu: Sprawdź w arkuszach stylów i skryptach, czy nie występują blokady typu orientation.lock lub restrykcyjne reguły @media.

    Sprawdź swoją wiedzę

    W poniżej podanym linku znajduje się 5 przykładów interfejsów. Przykłady reagują na rzeczywistą zmianę orientacji okna przeglądarki. Twoim zadaniem jest sprawdzenie, jak zachowują się w trybie Pionowym (wąskie okno) i Poziomym (szerokie okno).

    Notatka: Zanim zajrzysz do rozwiązania, uruchom wybrane narzędzia testowe i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Zmiana rozmiaru okna, Narzędzie deweloperskie (ang.) Developer Tools, Telefon/Tablet.

    Link: https://pdc.ambiscale.com/training/wcag-1-3-4/

    #1 BŁĄD

    Problem: Aplikacja wymusza orientację pionową, blokując widok w poziomie komunikatem „Obróć urządzenie”.
    Dlaczego: Użytkownicy, którzy mają tablet zamontowany na stałe (np. na wózku), nie mogą fizycznie obrócić urządzenia, przez co aplikacja jest dla nich niedostępna.
    Naprawa: Zastosować responsywny układ (RWD), który dostosowuje się do każdej orientacji, zamiast ją blokować.

    #2 BŁĄD

    Problem: Wykres w trybie pionowym jest obrócony o 90 stopni (tekst czyta się z dołu do góry).
    Dlaczego: Zmusza to użytkownika do fizycznego wykręcania głowy lub urządzenia, co jest trudne dla osób z ograniczeniami ruchowymi.
    Naprawa: Pozwolić na przewijanie treści w poziomie (`overflow-x: auto`), zachowując naturalną orientację tekstu.

    #3 BŁĄD

    Problem: W orientacji poziomej cała treść znika (pusty ekran).
    Dlaczego: Użytkownik nie otrzymuje żadnej informacji zwrotnej ani dostępu do funkcjonalności.
    Naprawa: Upewnić się, że style CSS nie ukrywają kluczowych kontenerów w zależności od „media query” orientacji.

    #4 DOBRZE

    Dlaczego: Aplikacja poprawnie wykorzystuje RWD (Responsive Web Design). W pionie elementy są ułożone w kolumnie, a w poziomie obok siebie, zapewniając czytelność w obu trybach.

    #5 DOBRZE

    Dlaczego: Szeroka tabela nie mieści się w pionie, ale zastosowano standardowy pasek przewijania (scroll). Treść pozostaje czytelna bez konieczności obracania urządzenia.

    Źródła

    Dodatkowe linki

     

    Wróć do wszystkich kryteriów