SC 1.3.2 Poziom A WCAG 2.0

Znacząca kolejność

Gdy kolejność czytania treści ma znaczenie dla jej rozumienia, kolejność w DOM musi odpowiadać kolejności wizualnej. Pozycjonowanie CSS i właściwość float zaburzające sekwencję psują działanie czytników ekranu i nawigację klawiaturą.

Co jest wymagane

Jeśli znaczenie treści zależy od kolejności jej czytania — instrukcje, narracja, proces krok po kroku — ta kolejność musi być zachowana w DOM. Czytniki ekranu i silniki przepływu przeglądają dokument w kolejności źródłowej; jeśli CSS order, position: absolute, flex-direction: row-reverse lub rozmieszczenie w siatce zaburza kolejność wizualną względem kolejności w DOM, doświadczenie użytkownika się rozpada.

Jak spełnić kryterium

Pisz DOM w kolejności, w jakiej treść ma być czytana; używaj CSS do pozycjonowania wizualnego, a nie do tworzenia sekwencji.
Sprawdzaj każde użycie flex-direction: row-reverse, CSS order lub grid-area, które przenosi treść poza jej źródłową pozycję.
W układach wielokolumnowych umieszczaj kolumny w DOM w kolejności czytania, a nie w wizualnej kolejności kolumn.
Testuj, wyłączając CSS (narzędzia deweloperskie przeglądarki, „view source order”) — niestylowany przepływ powinien nadal mieć sens.
Uruchom stronę przez czytnik ekranu i zanotuj każdy moment, gdy kolejność zapowiedzi cię zaskoczy.

Typowe błędy

Pasek boczny wizualnie po prawej stronie, ale umieszczony jako pierwszy w DOM — czytniki ekranu odczytują reklamy, powiązane łącza i CTA przed głównym artykułem.
flex-direction: row-reverse w menu nawigacyjnym — użytkownicy widzący słyszą: Strona główna / O nas / Kontakt, czytniki ekranu słyszą: Kontakt / O nas / Strona główna.
CSS order na polach formularza zmieniający kolejność wizualną względem kolejności w DOM, przez co tabulacja skacze nieprzewidywalnie.
Łącze „Przejdź do treści” umieszczone za nawigacją w DOM, ale pozycjonowane absolutnie na górze wizualnie — użytkownicy klawiatury trafiają najpierw na nawigację.
Karty w siatce, które wizualnie płyną od lewej do prawej, ale w DOM są ułożone od dołu do góry przez sprytną sztuczkę siatkową.

Dlaczego to jest ważne

Błędy znaczącej kolejności są podstępne — strona wygląda dobrze, przechodzi walidację i większość automatycznych testów. Ujawniają się dopiero wtedy, gdy prawdziwy użytkownik czytnika ekranu próbuje przeczytać stronę od góry do dołu. Większość poprawek to drobne zmiany kolejności w DOM, ale koszt diagnostyczny znalezienia problemu jest wysoki.