WCAG 1.3.2 Zrozumiała kolejność

Kryterium sukcesu 1.3.2 zapewnia, że gdy czytnik ekranu odczytuje stronę od góry do dołu albo strona jest wyświetlana bez stylów, treść nadal występuje w sensownej kolejności. To poziom A i część normy EN 301 549 (punkt 9.1.3.2).

Czego wymaga kryterium

Gdy kolejność, w jakiej prezentowana jest treść, wpływa na jej znaczenie, prawidłowa kolejność czytania musi być możliwa do programowego określenia — w praktyce to kolejność elementów w HTML (kolejność DOM) musi oddawać to znaczenie.

Warto wiedzieć o dwóch rzeczach:

• kryterium dotyczy tylko miejsc, w których kolejność ma znaczenie. Nawigacja, treść główna i pasek boczny mogą występować w dowolnej kolejności; treść wewnątrz artykułu, formularza czy bloku ceny musi zachować porządek;
• wystarczy co najmniej jedna sensowna kolejność. Nie musi być jedyną możliwą.

Typowe błędy w sklepie internetowym

• CSS order, flex-direction: row-reverse lub rozmieszczenie w siatce wizualnie stawia cenę przed nazwą produktu, ale kod odczytuje je inaczej;
• blok ceny „było / jest”, w którym kod odczytuje nową cenę jako „było”;
• tabela rozmiarów lub porównanie ułożone w kolumny za pomocą spacji lub elementów div, które odczytywane wierszami tworzą bezsens;
• tabela układu, która nie ma sensu, gdy jej komórki są odczytywane jedna po drugiej;
• baner cookies lub okno wyskakujące wstawione na końcu kodu, ale wyświetlane na górze, przez co jego kontekst jest odczytywany na końcu.

Jak to sprawdzić

Automatycznie: żadna automatyczna reguła naszego skanera nie odpowiada temu kryterium. Narzędzie widzi kolejność DOM, ale nie to, czy zmienia się znaczenie. Potrzebna jest kontrola ręczna.

Ręcznie: należy wyłączyć CSS (np. rozszerzeniem przeglądarki lub w trybie czytania) i przeczytać stronę od góry do dołu: czy każdy blok nadal ma sens? Można też odsłuchać ją czytnikiem ekranu w trybie czytania. Szczególną uwagę warto zwrócić na ceny, szczegóły produktów, formularze i układy wielokolumnowe.

Jak to naprawić

• Pisać HTML w kolejności, w jakiej treść ma być odczytywana, a CSS używać tylko do układu, nie do zmiany znaczenia.
• Unikać zmiany kolejności przez CSS w treściach, w których kolejność ma znaczenie; jeśli na telefonie potrzebna jest inna kolejność, zmienić kod.
• Do danych tabelarycznych używać prawdziwych tabel zamiast spacji lub pozycjonowanych bloków.
• Wstawiać okna dialogowe i banery w DOM tam, gdzie logicznie należą, i przenosić fokus do okien modalnych.

Powiązane kryteria

• 1.3.1 Informacje i relacje — struktura oznaczona w kodzie.
• 1.3.3 Właściwości zmysłowe — instrukcje oparte na położeniu.
• Lista kontrolna WCAG 2.2 — w tym 2.4.3 Kolejność fokusu.

Najczęstsze pytania

Czy kolejność w kodzie musi odpowiadać kolejności wizualnej?

Tylko tam, gdzie kolejność wpływa na znaczenie. Niezależne bloki, takie jak nawigacja i treść główna, mogą występować w dowolnej kolejności; kroki przepisu, cena i jej opis czy nazwa produktu i jego szczegóły muszą zachować sensowną kolejność.

Czy zmiana kolejności przez CSS flex lub grid jest błędem?

Nie automatycznie. Staje się błędem, gdy zmieniona kolejność wizualna niesie znaczenie, którego nie oddaje kolejność w kodzie, np. gdy „stara cena” i „nowa cena” zamieniają się miejscami.

Czy 1.3.2 to to samo co kolejność fokusu?

Nie. Kryterium 1.3.2 dotyczy kolejności czytania treści. Kolejność, w jakiej przesuwa się fokus klawiatury, obejmuje kryterium 2.4.3 Kolejność fokusu, choć oba problemy naprawia się zwykle w ten sam sposób.