Přejít na obsah
Pandus
cs Změnit jazyk
Menu

Požadavek WCAG A/AA Priorita: Závažné · experimentální kontrola: vyplatí se ověřit ručně

Web funguje jen v jedné orientaci obrazovky

Styly webu vynucují pouze orientaci na výšku nebo na šířku, takže když se telefon nebo tablet drží jinak, obsah se otočí, ořízne nebo zmizí.

Tento text byl přeložen automaticky a rodilý mluvčí ho zatím nezkontroloval.

Proč na tom záleží vašim zákazníkům

Někteří zákazníci nemohou zařízení otočit: je upevněné na invalidním vozíku nebo stojanu, nebo ho kvůli omezené hybnosti rukou drží jen v jedné poloze. Pokud e-shop funguje jen v opačné orientaci, vidí otočenou nebo rozbitou stránku a nemohou nakoupit vůbec.

Koho se to týká

  • lidé, jejichž zařízení je upevněné v jedné poloze
  • lidé s omezenou hybností rukou
  • slabozrací lidé, kteří kvůli většímu textu používají orientaci na šířku
  • uživatelé tabletů v pouzdře s klávesnicí

Jak to opravit

Odstraňte CSS, které otáčí nebo skrývá obsah v dotazech @media (orientation: portrait) nebo (orientation: landscape), například transform: rotate(90deg) nebo překryv „otočte zařízení“. Nechte responzivní rozvržení fungovat v obou orientacích. Orientaci zamykejte jen tehdy, když je to opravdu nezbytné. axe označuje tuto kontrolu jako experimentální, proto nález ověřte otočením skutečného telefonu.

V Shopify

Obvykle pochází z vlastního CSS v šabloně nebo z aplikace, která zobrazuje výzvu „otočte zařízení“. Vyhledejte „orientation“ v souborech CSS a Liquid šablony a odstraňte pravidla, která stránku otáčejí nebo skrývají; vypněte příslušnou volbu aplikace, pokud ji má.

V Shoptet (CZ)

Šablony jsou obvykle responzivní, takže příčinou bývá vlastní kód. Zkontrolujte CSS vložené přes možnosti vlastního kódu v Shoptetu, zda neobsahuje pravidla s „orientation“, a odstraňte je.

V PrestaShop

Obvykle v CSS šablony nebo v mobilním modulu. Vyhledejte „orientation“ v souborech CSS šablony a přepište pravidlo ve vlastním souboru CSS šablony nebo v podřazené šabloně.

V WooCommerce

Obvykle pochází ze šablony, page builderu nebo mobilního pluginu. Vyhledejte v CSS šablony dotazy media s „orientation“ a přepište je v CSS podřazené šablony (child theme), aby aktualizace opravu nezrušily.

Normy

Normy
NormaBod
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

Automatická kontrola: pravidlo axe-core css-orientation-lock. dequeuniversity.com, github.com, www.w3.org

Podobné kontroly

Všechna pravidla, která kontrolujeme