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
| Standard | Punct |
|---|---|
| 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
Verificări similare
-
Pagina nu indică în ce limbă este scrisă
WCAG 3.1.1 A
-
Butoanele și linkurile sunt prea mici pentru a fi atinse ușor
WCAG 2.5.8 AA
-
Câmpurile din formulare nu se completează automat
WCAG 1.3.5 AA
-
Atributele de accesibilitate au valori greșite
WCAG 4.1.2 A