WCAG 1.3.2 Secvență cu sens

Criteriul de succes 1.3.2 asigură că atunci când un cititor de ecran citește o pagină de sus până jos sau când pagina este afișată fără stiluri, conținutul vine în continuare într-o ordine care are sens. Este de nivelul A și face parte din EN 301 549 (clauza 9.1.3.2). Legea 232/2022 se bazează pe standardul armonizat EN 301 549.

Ce cere criteriul

Atunci când succesiunea în care este prezentat conținutul îi influențează sensul, o succesiune corectă de citire poate fi determinată programatic — în practică, ordinea elementelor în HTML (ordinea DOM) trebuie să redea acest sens.

Două lucruri merită știute:

• criteriul se aplică doar acolo unde ordinea contează. Navigarea, conținutul principal și o bară laterală pot apărea în orice ordine; conținutul dintr-un articol, dintr-un formular sau dintr-un bloc de preț trebuie să rămână în ordine;
• este suficientă cel puțin o succesiune cu sens. Nu trebuie să fie singura posibilă.

Greșeli tipice într-un magazin online

• CSS order, flex-direction: row-reverse sau poziționarea în grid pune vizual prețul înaintea numelui produsului, dar codul se citește altfel;
• un bloc de preț „înainte / acum” în care codul citește prețul nou drept „înainte”;
• un ghid de mărimi sau o comparație așezate în coloane cu spații sau div-uri, care citite pe rânduri devin un șir fără sens;
• un tabel de layout care nu are sens atunci când celulele lui sunt citite una după alta;
• un banner de cookie-uri sau un popup inserat la sfârșitul codului, dar afișat sus, astfel încât contextul lui este citit ultimul.

Cum se verifică

Automat: nicio regulă automată a verificatorului nostru nu corespunde acestui criteriu. Un instrument poate vedea ordinea DOM, dar nu și dacă se schimbă sensul. Este nevoie de o verificare manuală.

Manual: dezactivați CSS (de exemplu cu o extensie de browser sau cu modul de citire) și citiți pagina de sus până jos: mai are sens fiecare bloc? Sau ascultați-o cu un cititor de ecran în modul de citire. Acordați o atenție deosebită prețurilor, detaliilor de produs, formularelor și layout-urilor cu mai multe coloane.

Cum se remediază

• Scrieți HTML-ul în ordinea în care doriți să fie citit și folosiți CSS doar pentru layout, nu pentru a schimba sensul.
• Evitați reordonarea prin CSS a conținutului a cărui ordine contează; dacă aveți nevoie de altă ordine pe mobil, modificați marcajul.
• Folosiți tabele reale pentru datele tabelare, nu spații sau blocuri poziționate.
• Inserați dialogurile și bannerele în DOM acolo unde le este locul logic și mutați focusul în dialogurile modale.

Criterii conexe

• 1.3.1 Informații și relații — structura marcată în cod.
• 1.3.3 Caracteristici senzoriale — instrucțiuni care se bazează pe poziție.
• Lista de verificare WCAG 2.2 — inclusiv 2.4.3 Ordinea focusului.

Întrebări frecvente

Trebuie ca ordinea din cod să corespundă ordinii vizuale?

Doar acolo unde ordinea influențează sensul. Blocurile independente, precum navigarea și conținutul principal, pot apărea în orice ordine; pașii unei rețete, un preț și eticheta lui sau titlul unui produs și detaliile lui trebuie să rămână într-o succesiune care are sens.

Este reordonarea cu CSS flex sau grid o neîndeplinire?

Nu automat. Devine o neîndeplinire atunci când succesiunea vizuală reordonată poartă un sens pe care ordinea din cod nu îl are, de exemplu când „prețul vechi” și „prețul nou” își schimbă locurile.

Este 1.3.2 același lucru cu ordinea focusului?

Nu. 1.3.2 se referă la ordinea de citire a conținutului. Ordinea în care se deplasează focusul tastaturii este acoperită de 2.4.3 Ordinea focusului, deși ambele se remediază de obicei la fel.