Salt la conținut
Pandus

Cerință WCAG A/AA Prioritate: Grav · verificare experimentală: merită verificată manual

Site-ul funcționează doar într-o singură orientare a ecranului

Stilurile site-ului forțează pagina doar în modul portret sau doar în modul peisaj, așa că atunci când telefonul sau tableta este ținută altfel, conținutul se rotește, este tăiat sau dispare.

Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.

De ce contează pentru clienții tăi

Unii clienți nu își pot roti dispozitivul: este montat pe un scaun rulant sau pe un suport, ori îl țin într-o singură poziție din cauza mobilității reduse a mâinilor. Dacă magazinul funcționează doar în cealaltă orientare, ei văd o pagină întoarsă sau stricată și nu pot cumpăra deloc.

Pe cine afectează

  • persoane al căror dispozitiv este montat într-o poziție fixă
  • persoane cu mobilitate redusă a mâinilor sau brațelor
  • persoane cu vedere slabă care folosesc modul peisaj pentru text mai mare
  • utilizatori de tablete cu husă cu tastatură

Cum se remediază

Eliminați CSS-ul care rotește sau ascunde conținutul în interogările @media (orientation: portrait) sau (orientation: landscape), de exemplu transform: rotate(90deg) ori un overlay „rotiți dispozitivul”. Lăsați aspectul responsiv să funcționeze în ambele orientări. Blocați orientarea doar când este cu adevărat esențial. axe marchează această verificare ca experimentală, așa că confirmați rezultatul rotind un telefon real.

În Shopify

De obicei provine din CSS personalizat în temă sau dintr-o aplicație care afișează mesajul „rotiți dispozitivul”. Căutați „orientation” în fișierele CSS și Liquid ale temei și eliminați regulile care rotesc sau ascund pagina; dezactivați opțiunea respectivă a aplicației, dacă există.

În Shoptet (CZ)

Șabloanele sunt de obicei responsive, așa că de multe ori cauza este codul propriu. Verificați CSS-ul adăugat prin opțiunile de cod personalizat din Shoptet pentru reguli cu „orientation” și eliminați-le.

În PrestaShop

De obicei în CSS-ul temei sau într-un modul pentru mobil. Căutați „orientation” în fișierele CSS ale temei și suprascrieți regula în fișierul CSS personalizat al temei sau într-o temă copil.

În WooCommerce

De obicei provine din temă, dintr-un page builder sau dintr-un plugin pentru mobil. Căutați în CSS-ul temei interogări media cu „orientation” și suprascrieți-le în CSS-ul unei teme copil, ca actualizările să nu anuleze corecția.

Standarde

Standarde
StandardPunct
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

Verificare automată: regula axe-core css-orientation-lock. dequeuniversity.com, github.com, www.w3.org

Toate regulile pe care le verificăm