WCAG 1.3.4 Orientace

Kritérium úspěšnosti 1.3.4 pomáhá lidem, jejichž telefon nebo tablet je upevněn v jedné poloze — například na invalidním vozíku — a lidem, kteří zařízení nemohou snadno otočit. Musí mít možnost používat web v té orientaci, kterou mají. Kritérium přibylo ve WCAG 2.1, jde o úroveň AA a je součástí normy EN 301 549 (článek 9.1.3.4). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Obsah nesmí omezovat své zobrazení a ovládání na jedinou orientaci displeje, jako je na výšku nebo na šířku, pokud konkrétní orientace displeje není nezbytná.

To znamená:

• web funguje a zobrazuje veškerý obsah na výšku i na šířku;
• rozvržení se může přizpůsobit (jeden sloupec na výšku, dva na šířku) — to je v pořádku;
• hláška jako „otočte prosím zařízení“ nebo rozvržení, které v jedné orientaci otočí obsah o 90°, kritérium nesplňuje.

Příklady nezbytné orientace podle WCAG: bankovní šek, aplikace s klavírem, snímky pro projektor nebo televizi a obsah virtuální reality.

Typické chyby v e-shopu

• konfigurátor produktu nebo 3D prohlížeč, který na výšku ukáže „otočte telefon“;
• CSS, které na malých obrazovkách na šířku skryje pokladnu nebo hlavní obsah;
• obal mobilní webové aplikace, který celý e-shop uzamkne na výšku;
• galerie obrázků, která se otevře jen na šířku.

Jak to zkontrolovat

Automaticky: náš nástroj odhalí CSS, které uzamyká obsah na jednu orientaci, například jeho otočením nebo skrytím uvnitř media query orientation (pravidlo uzamčení orientace v CSS). Uzamčení nastavená v JavaScriptu, v manifestu webové aplikace nebo v obalu nativní aplikace pokryta nejsou, proto testujte i na zařízení.

Ručně: otevřete klíčové stránky — úvodní, kategorii, produkt, košík, pokladnu, účet — na telefonu a tabletu. Vypněte zámek otáčení a v každém zobrazení zařízení otočte. Veškerý obsah a funkce musí zůstat dostupné a nic by vás nemělo vyzývat k otočení.

Jak to opravit

• Odstraňte CSS, které otáčí nebo skrývá obsah v pravidlech @media (orientation: …); místo toho použijte zlomové body podle šířky.
• Odstraňte překryvy „otočte zařízení“.
• V manifestu webové aplikace nenastavujte pevnou orientation, pokud jedna orientace není skutečně nezbytná.
• Komponenty, jako jsou galerie a konfigurátory, navrhněte tak, aby fungovaly v úzkém rozvržení na výšku.

Související kritéria

• 1.4.10 Přizpůsobení obsahu (reflow) — obsah, který se vejde na úzké obrazovky bez vodorovného posouvání.
• 1.4.4 Změna velikosti textu — zvětšení textu na 200 %.
• Kontrola WCAG — otestujte stránku svého webu.

Časté otázky

Musí můj e-shop vypadat na výšku i na šířku stejně?

Ne. Rozvržení se měnit může, ale obsah a funkce musí být dostupné v obou orientacích. Chybou je jen uzamčení zobrazení na jednu orientaci nebo výzva, aby uživatel otočil zařízení.

Kdy je pevná orientace dovolena?

Jen když je jedna orientace nezbytná. WCAG uvádí příklady jako bankovní šek, aplikaci s klavírem, snímky pro projektor nebo televizi a obsah virtuální reality.

Dokáže automatický nástroj najít uzamčení orientace?

Dokáže najít CSS, které otáčí nebo skrývá obsah podle media query orientace. Uzamčení v JavaScriptu nebo v nativní aplikaci vyžaduje ruční test na zařízení.