WCAG 1.4.10 Reflow (readaptarea conținutului)

Criteriul de succes 1.4.10 ajută persoanele cu vedere slabă care măresc mult pagina. Când conținutul se readaptează într-o singură coloană, ele derulează într-o singură direcție; când nu se readaptează, trebuie să deruleze la stânga și la dreapta pe fiecare rând. A fost adăugat în WCAG 2.1, este de nivelul AA și face parte din EN 301 549 (clauza 9.1.4.10).

Ce cere criteriul

Conținutul poate fi prezentat fără pierdere de informații sau de funcționalitate și fără a necesita derulare în două dimensiuni, pentru:

• conținut cu derulare verticală (pagini web obișnuite) la o lățime echivalentă cu 320 de pixeli CSS;
• conținut cu derulare orizontală la o înălțime echivalentă cu 256 de pixeli CSS.

320 px CSS este ceea ce afișează o fereastră de browser desktop cu lățimea de 1280 px CSS la un zoom de 400 %; 256 px CSS corespund unei ferestre cu înălțimea de 1024 px la 400 %.

Excepție: părțile conținutului care necesită o așezare bidimensională pentru utilizare sau sens. WCAG numește imagini precum hărți și diagrame, video, jocuri, prezentări, tabele de date (nu celulele lor individuale) și interfețe în care barele de instrumente trebuie să rămână vizibile în timp ce lucrați cu conținutul. Doar aceste părți se pot derula în ambele direcții.

Greșeli tipice într-un magazin online

• o pagină mai lată decât ecranul la 320 px din cauza unui banner, iframe sau tabel cu variante de produs cu lățime fixă;
• meniul principal sau filtrele care dispar la zoom mare, fără altă cale de a ajunge la ele;
• un antet fix și o bară de cookie-uri care acoperă cea mai mare parte dintr-o fereastră mică;
• denumiri lungi de produse, coduri SKU sau adrese URL care nu se încadrează pe mai multe rânduri și împing așezarea lateral;
• o pagină de finalizare a comenzii cu două coloane care nu încap și necesită derulare orizontală.

Cum se verifică

Automat: nicio regulă automată din verificatorul nostru nu corespunde acestui criteriu. Reflow-ul depinde de așezarea paginii la un anumit nivel de zoom și de faptul dacă se pierde ceva, lucru pe care o regulă nu îl poate judeca. Este nevoie de o verificare manuală.

Manual: setați o fereastră de browser desktop la lățimea de 1280 px și măriți la 400 %, sau folosiți emularea de dispozitiv la 320 × 256 px pentru conținutul orizontal. Parcurgeți pagina principală, categoria, produsul, coșul și finalizarea comenzii. Verificați că nu derulați niciodată lateral pentru a citi textul, că tot conținutul și toate meniurile sunt încă prezente și că nimic nu se suprapune.

Cum se remediază

• Folosiți o așezare responsive cu lățimi flexibile (lățimi în procente, max-width, minmax() în grid) în locul lățimilor fixe în pixeli.
• Permiteți cuvintelor și adreselor URL lungi să treacă pe rândul următor (overflow-wrap: anywhere).
• Puneți tabelele de date late într-un container care se derulează separat și lăsați restul paginii să se readapteze.
• Faceți responsive videoclipurile și iframe-urile încorporate.
• Păstrați antetele fixe mici sau renunțați la fixarea lor la lățimi înguste.

Criterii conexe

• 1.4.4 Redimensionarea textului — text la zoom de 200 %.
• 1.4.12 Spațierea textului — spațiere mai mare fără pierderi.
• 1.3.4 Orientare — portret și peisaj.

Întrebări frecvente

Cum verific reflow-ul după WCAG?

Deschideți pagina într-o fereastră de browser desktop cu lățimea de 1280 px CSS și măriți la 400 %, sau setați în instrumentele pentru dezvoltatori o lățime a ferestrei de 320 px. Derulați pagina în jos și parcurgeți sarcinile principale: nu ar trebui să fie niciodată nevoie să derulați lateral pentru a citi textul sau a ajunge la un control.

Au voie tabelele de date să se deruleze orizontal?

Da. Conținutul care are nevoie de o așezare bidimensională pentru sens sau utilizare — tabele de date, hărți, diagrame, video, jocuri, bare de instrumente care trebuie să rămână vizibile — se poate derula în două direcții. Restul paginii trebuie totuși să se readapteze.

Este suficientă o temă responsive pentru 1.4.10?

De obicei este un început bun, dar verificați oricum. Elementele cu lățime fixă, conținutul încorporat lat, cuvintele sau adresele URL lungi și antetele fixe strică adesea reflow-ul chiar și în temele responsive.

Care este diferența dintre 1.4.4 și 1.4.10?

1.4.4 Redimensionarea textului cere ca textul să funcționeze la un zoom de 200 %. 1.4.10 Reflow cere ca la 400 % (lățime de 320 px) conținutul să încapă fără derulare orizontală.