WCAG 1.3.4: Orientacja

Kryterium sukcesu WCAG 1.3.4 Orientacja, należące do wytycznej 1.3 (Tworzenie Adaptowalnej Treści), wymaga, aby treść internetowa nie ograniczała swojego widoku ani działania do jednej konkretnej orientacji ekranu (np. tylko pionowej lub tylko poziomej), chyba że określona orientacja jest kluczowa dla funkcji treści. Jest to kryterium na poziomie dostępności AA.

Celem tego kryterium jest zapewnienie, że wszyscy użytkownicy, niezależnie od sposobu trzymania urządzenia, używanej technologii wspomagającej, czy preferencji, mogą bez problemów przeglądać i wchodzić w interakcje z treścią. Blokowanie orientacji może stwarzać poważne bariery dla wielu osób.

Dlaczego to kryterium jest ważne?

Zapewnienie elastyczności orientacji ekranu jest fundamentalne dla dostępności cyfrowej. Wpływa na doświadczenie użytkownika i umożliwia dostęp do treści osobom w różnych sytuacjach i z różnymi potrzebami.

Kogo dotyczy i dlaczego?

• Osoby z niepełnosprawnością ruchową: Użytkownicy, którzy mają zamontowane urządzenia (np. tablety, smartfony) na wózkach inwalidzkich lub stojakach, mogą być zmuszeni do korzystania z nich w określonej, stałej orientacji, której nie mogą łatwo zmienić. Blokowanie orientacji treści może uniemożliwić im dostęp.
• Osoby z niedowidzeniem: Użytkownicy korzystający z powiększenia ekranu często obracają urządzenie do orientacji poziomej, aby zminimalizować konieczność przewijania w poziomie i zwiększyć widoczny obszar treści. Zablokowanie orientacji pionowej może utrudnić im komfortowe czytanie.
• Osoby z niepełnosprawnością poznawczą: Niektórzy użytkownicy mogą mieć trudności z zrozumieniem, jak zmienić orientację urządzenia lub mogą polegać na spójnym układzie, który jest zaburzany przez wymuszoną orientację.
• Użytkownicy technologii wspomagających: Niektóre technologie wspomagające lub fizyczne akcesoria mogą lepiej współpracować w konkretnej orientacji, a wymuszona zmiana orientacji przez stronę internetową może kolidować z ich działaniem.
• Użytkownicy urządzeń mobilnych: Wiele osób naturalnie obraca swoje smartfony i tablety, aby dostosować widok do oglądanych treści (np. filmy w poziomie, artykuły w pionie). Ograniczanie tej elastyczności frustruje i utrudnia korzystanie.

Wymagania Kryterium Sukcesu 1.3.4 Orientacja

Treść nie może ograniczać widoku i działania do jednej orientacji ekranu, np. pionowej lub poziomej, chyba że konkretna orientacja jest kluczowa (ang. essential).

Pojęcie „kluczowe” oznacza, że zablokowanie orientacji jest absolutnie niezbędne dla funkcjonalności treści i nie ma innej, równie skutecznej metody przedstawienia treści bez ograniczenia orientacji. Przykłady sytuacji, w których orientacja może być kluczowa, to:

• Aplikacje bankowe lub giełdowe: Wykresy finansowe, które dla zachowania czytelności i integralności danych wymagają trybu poziomego.
• Gry: Niektóre gry, np. wyścigowe lub logiczne, których mechanika opiera się na konkretnej orientacji.
• Instrumenty muzyczne: Aplikacje symulujące pianino lub inne instrumenty, które wymagają szerokiego układu klawiszy w trybie poziomym.
• Kody QR: Skanery kodów QR, które mogą wymagać konkretnej orientacji dla prawidłowego działania kamery.

W większości przypadków stron internetowych i aplikacji, orientacja nie jest kluczowa, a treść powinna być zaprojektowana tak, aby działała płynnie w obu trybach.

Jak spełnić kryterium Orientacja?

Aby spełnić to kryterium, należy zapewnić, że projekt strony internetowej lub aplikacji jest responsywny i dostosowuje się do obu orientacji ekranu.

1. Projekt responsywny i elastyczny układ

Kluczem do zgodności jest użycie responsywnego projektowania. Oznacza to, że układ, tekst, obrazy i inne elementy dostosowują się do dostępnej przestrzeni, niezależnie od orientacji.

• Używaj jednostek względnych: Zamiast stałych pikseli, używaj procentów (%), jednostek widokowych (vw, vh) lub em/rem dla rozmiarów i marginesów.
• Media queries CSS: Wykorzystaj @media queries do zmiany stylów w zależności od orientacji. Najczęściej stosuje się je do dostosowania układu (np. z kolumn na wiersze) lub rozmiarów elementów.
• Elastyczne siatki (Flexbox, Grid): Używaj CSS Flexbox lub Grid do tworzenia elastycznych układów, które automatycznie dostosowują się do dostępnej przestrzeni i orientacji.
• Obrazy i media: Zapewnij, że obrazy i inne elementy multimedialne skalują się poprawnie (np. max-width: 100%; height: auto;).

2. Unikaj blokowania orientacji

Nie należy używać CSS ani JavaScript do wymuszania konkretnej orientacji ekranu, chyba że jest to absolutnie niezbędne.

• Unikaj CSS: Właściwości takie jak orientation: landscape czy orientation: portrait w @media queries powinny być używane do dostosowania treści, a nie do jej blokowania.
• Unikaj JavaScript: Metody API screen.orientation.lock() lub podobne mechanizmy powinny być stosowane z najwyższą ostrożnością i tylko w sytuacjach, gdy orientacja jest „kluczowa”.

3. Testowanie na różnych urządzeniach i emulatorach

Zawsze testuj swoją stronę lub aplikację na różnych urządzeniach mobilnych oraz korzystając z narzędzi deweloperskich przeglądarki (np. w trybie symulacji urządzenia mobilnego) w obu orientacjach – pionowej i poziomej – aby upewnić się, że wszystko działa poprawnie.

Przykłady implementacji

Poprawne implementacje (adaptacja do orientacji)

Poniższy przykład CSS demonstruje, jak strona może dostosować swój układ w zależności od orientacji ekranu, zamiast ją blokować. Treść wyświetla się dobrze w obu orientacjach.

/* Domyślny styl dla urządzeń mobilnych (np. orientacja pionowa) */
.container {
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.item {
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 10px;
}

/* Styl dla orientacji poziomej */
@media (orientation: landscape) {
    .container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .item {
        flex: 1 1 45%; /* Dwa elementy na wiersz w poziomie */
        margin: 5px;
    }
}

/* Dodatkowe media query dla większych ekranów */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .item {
        flex: 1 1 30%; /* Trzy elementy na wiersz na tabletach/desktopach */
        margin: 10px;
    }
}

<div class="container">
    <div class="item">Element 1</div>
    <div class="item">Element 2</div>
    <div class="item">Element 3</div>
    <div class="item">Element 4</div>
</div>

Niepoprawne implementacje (blokowanie orientacji)

Poniższe przykłady pokazują, jak nie należy wymuszać orientacji ekranu, ponieważ uniemożliwia to użytkownikom wybór preferowanego trybu.

/* To NIE JEST ZGODNE z WCAG 1.3.4, jeśli nie jest kluczowe */
@media (orientation: landscape) {
    body {
        display: none; /* Ukrywa całą treść, gdy urządzenie jest w orientacji poziomej */
    }
}

/* LUB */

html {
    transform: rotate(90deg); /* Obraca całą stronę, co jest dezorientujące i problematyczne */
    transform-origin: left top;
    width: 100vh; /* Zamienia szerokość z wysokością */
    height: 100vw; /* Zamienia wysokość z szerokością */
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
}

// To NIE JEST ZGODNE z WCAG 1.3.4, jeśli nie jest kluczowe
// Próba zablokowania orientacji ekranu na stałe na 'portrait' (pionową)
if (screen.orientation && screen.orientation.lock) {
    screen.orientation.lock('portrait').then(() => {
        console.log('Orientacja ekranu zablokowana na pionową.');
    }).catch(error => {
        console.error('Nie można zablokować orientacji ekranu:', error);
    });
}

Dobre praktyki i typowe pułapki

• Dobre praktyki:
  • Projektuj najpierw dla urządzeń mobilnych (mobile-first), a następnie skaluj w górę. Ułatwia to myślenie o elastycznych układach.
  • Zawsze zakładaj, że użytkownik może chcieć używać treści w dowolnej orientacji.
  • Używaj testów automatycznych i manualnych, aby weryfikować zachowanie strony w różnych orientacjach.
  • Zapewnij, że wszystkie interaktywne elementy są w pełni funkcjonalne i dostępne w obu orientacjach.
• Typowe pułapki:
  • Błędne założenie, że większość użytkowników będzie używać urządzeń tylko w jednej orientacji (np. smartfony tylko w pionie).
  • Używanie stałych wartości szerokości i wysokości w pikselach, które nie skalują się poprawnie.
  • Testowanie tylko w jednej orientacji podczas rozwoju, co prowadzi do przeoczenia problemów w drugiej.
  • Implementowanie blokady orientacji bez dogłębnej analizy, czy jest to rzeczywiście „kluczowe” dla funkcjonalności.
  • Ukrywanie treści (display: none) w jednej z orientacji, zamiast jej dostosowania.

Testowanie dostępności

Aby upewnić się, że Twoja treść spełnia kryterium 1.3.4:

1. Otwórz stronę na urządzeniu mobilnym (smartfon, tablet).
2. Sprawdź układ, funkcjonalność i czytelność w orientacji pionowej.
3. Obróć urządzenie do orientacji poziomej.
4. Ponownie sprawdź układ, funkcjonalność i czytelność. Upewnij się, że cała treść jest dostępna i działa prawidłowo.
5. Powtórz proces w narzędziach deweloperskich przeglądarki, symulując różne urządzenia i orientacje.

Powiązane zasoby

• Understanding Success Criterion 1.3.4: Orientation (ang.)
• WCAG 2.1 Quick Reference: Orientation (ang.)
• MDN Web Docs: @media/orientation (ang.)