Przejdź do treści
Pandus
pl Zmień język
Menu

Wymaganie WCAG A/AA Priorytet: Poważne · test eksperymentalny: warto sprawdzić ręcznie

Strona działa tylko w jednej orientacji ekranu

Style strony wymuszają tylko orientację pionową albo poziomą, więc gdy telefon lub tablet jest trzymany inaczej, treść się obraca, zostaje ucięta lub znika.

Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.

Dlaczego to ważne dla Twoich klientów

Niektórzy klienci nie mogą obrócić urządzenia: jest zamocowane na wózku lub stojaku albo trzymają je w jednej pozycji z powodu ograniczonej sprawności rąk. Jeśli sklep działa tylko w drugiej orientacji, widzą obróconą lub rozsypaną stronę i w ogóle nie mogą kupić.

Kogo to dotyczy

  • osoby, których urządzenie jest zamocowane w jednej pozycji
  • osoby z ograniczoną sprawnością rąk
  • osoby słabowidzące, które używają trybu poziomego dla większego tekstu
  • użytkownicy tabletów w etui z klawiaturą

Jak to naprawić

Usuń CSS, który obraca lub ukrywa treść w zapytaniach @media (orientation: portrait) lub (orientation: landscape), np. transform: rotate(90deg) albo nakładkę „obróć urządzenie”. Pozwól responsywnemu układowi działać w obu orientacjach. Blokuj orientację tylko wtedy, gdy jest to naprawdę niezbędne. axe oznacza tę kontrolę jako eksperymentalną, więc potwierdź wynik, obracając prawdziwy telefon.

W Shopify

Zwykle pochodzi z własnego CSS w motywie lub z aplikacji wyświetlającej komunikat „obróć urządzenie”. Wyszukaj „orientation” w plikach CSS i Liquid motywu i usuń reguły, które obracają lub ukrywają stronę; wyłącz odpowiednią opcję aplikacji, jeśli ją ma.

W Shoptet (CZ)

Szablony są zwykle responsywne, więc przyczyną jest często własny kod. Sprawdź CSS dodany przez opcje własnego kodu w Shoptet pod kątem reguł z „orientation” i usuń je.

W PrestaShop

Zwykle w CSS motywu lub w module mobilnym. Wyszukaj „orientation” w plikach CSS motywu i nadpisz regułę we własnym pliku CSS motywu lub w motywie potomnym.

W WooCommerce

Zwykle pochodzi z motywu, page buildera lub wtyczki mobilnej. Wyszukaj w CSS motywu zapytania media z „orientation” i nadpisz je w CSS motywu potomnego, aby aktualizacje nie cofnęły poprawki.

Normy

Normy
NormaPunkt
WCAG 2.2 1.3.4 (AA) Orientation
WCAG 2.1 1.3.4 (AA) Orientation
EN 301 549 4.1.1 9.1.3.4
EN 301 549 3.2.1 9.1.3.4
ДСТУ EN 301 549 2022 9.1.3.4

Automatyczny test: reguła axe-core css-orientation-lock. dequeuniversity.com, github.com, www.w3.org

Podobne testy

Wszystkie reguły, które sprawdzamy