WCAG 1.3.4 Orientare

Criteriul de succes 1.3.4 îi ajută pe cei al căror telefon sau tabletă este montat într-o singură poziție — de exemplu pe un scaun rulant — și pe cei care nu își pot roti ușor dispozitivul. Ei trebuie să poată folosi site-ul în orientarea pe care o au. A fost adăugat în WCAG 2.1, este de nivelul AA și face parte din EN 301 549 (clauza 9.1.3.4). Legea 232/2022 se bazează pe standardul armonizat EN 301 549.

Ce cere criteriul

Conținutul nu trebuie să își restrângă afișarea și utilizarea la o singură orientare a ecranului, precum portret sau peisaj, decât dacă o anumită orientare este esențială.

Asta înseamnă:

• site-ul funcționează și afișează tot conținutul atât în portret, cât și în peisaj;
• layout-ul se poate adapta (o coloană în portret, două în peisaj) — este în regulă;
• un mesaj precum „vă rugăm să rotiți dispozitivul” sau un layout care rotește conținutul cu 90° într-una dintre orientări nu îndeplinește criteriul.

Exemple de orientare esențială din WCAG: un cec bancar, o aplicație de pian, diapozitive pentru proiector sau televizor și conținut de realitate virtuală.

Greșeli tipice într-un magazin online

• un configurator de produs sau un vizualizator 3D care afișează „rotiți telefonul” în modul portret;
• CSS care ascunde pagina de finalizare a comenzii sau conținutul principal în peisaj pe ecranele mici;
• un înveliș de aplicație web pentru mobil care blochează întregul magazin în portret;
• o galerie de imagini care se deschide doar în peisaj.

Cum se verifică

Automat: verificatorul nostru detectează CSS care blochează conținutul într-o singură orientare, de exemplu rotindu-l sau ascunzându-l într-un media query orientation (regula CSS orientation lock). Blocările setate în JavaScript, printr-un manifest de aplicație web sau de un înveliș de aplicație nativă nu sunt acoperite, așa că testați și pe un dispozitiv.

Manual: deschideți paginile principale — prima pagină, categoria, produsul, coșul, finalizarea comenzii, contul — pe un telefon și pe o tabletă. Dezactivați blocarea rotației și rotiți dispozitivul în fiecare vizualizare. Tot conținutul și toate funcțiile trebuie să rămână disponibile și nimic nu trebuie să vă ceară să rotiți dispozitivul.

Cum se remediază

• Eliminați CSS care rotește sau ascunde conținutul în regulile @media (orientation: …); folosiți în schimb puncte de întrerupere bazate pe lățime.
• Eliminați suprapunerile de tip „rotiți dispozitivul”.
• Nu setați o orientation fixă în manifestul aplicației web decât dacă una este cu adevărat esențială.
• Proiectați componente precum galeriile și configuratoarele astfel încât să funcționeze într-un layout îngust, în portret.

Criterii conexe

• 1.4.10 Reflow (readaptarea conținutului) — conținut care încape pe ecrane înguste fără derulare orizontală.
• 1.4.4 Redimensionarea textului — mărirea textului la 200 %.
• Verificator WCAG — testați o pagină a site-ului dumneavoastră.

Întrebări frecvente

Trebuie ca magazinul meu să arate la fel în portret și în peisaj?

Nu. Layout-ul se poate schimba, dar conținutul și funcțiile trebuie să fie disponibile în ambele orientări. Neîndeplinire este doar blocarea afișării într-o singură orientare sau cererea ca utilizatorii să își rotească dispozitivul.

Când este permisă o orientare fixă?

Doar atunci când o anumită orientare este esențială. WCAG dă exemple precum un cec bancar, o aplicație de pian, diapozitive pentru proiector sau televizor și conținut de realitate virtuală.

Poate un instrument automat să găsească blocările de orientare?

Poate găsi CSS care rotește sau ascunde conținutul pe baza media query-ului de orientare. Blocările făcute în JavaScript sau într-o aplicație nativă necesită un test manual pe dispozitiv.