1.3.2 Zrozumiała kolejność

Krótko

Treść powinna być ułożona w takiej kolejności, żeby po odczytaniu bez układu wizualnego nadal miała sens.

Problem w praktyce

Strona może wyglądać poprawnie wizualnie, ale w kodzie najpierw znajduje się przycisk, potem opis, potem nagłówek, a dopiero później właściwa treść. Czytnik ekranu, tryb czytania albo widok po wyłączeniu CSS mogą wtedy pokazać informacje w kolejności, która gubi sens.

To kryterium nie dotyczy samej kolejności fokusu. Chodzi o kolejność treści wtedy, gdy ta kolejność wpływa na znaczenie.

Kogo to dotyczy

• Osób niewidomych korzystających z czytników ekranu, które odbierają treść liniowo.
• Osób słabowidzących korzystających z powiększenia, reflow albo uproszczonych widoków treści.
• Użytkowników technologii asystujących, które korzystają ze struktury dokumentu.
• Osób z trudnościami poznawczymi, które potrzebują przewidywalnej kolejności informacji.
• Wszystkich użytkowników, gdy CSS, grafiki albo złożony układ nie załadują się poprawnie.

Dobry przykład

• Nagłówek znajduje się przed treścią, której dotyczy.
• Pytanie pojawia się przed odpowiedzią.
• Instrukcja formularza znajduje się przed miejscem, w którym trzeba wykonać zadanie.
• Etykieta i pole formularza są ułożone w logicznej kolejności i powiązane semantycznie.
• Kolejność DOM odpowiada kolejności czytania, nawet jeśli CSS zmienia układ wizualny na większych ekranach.

Zły przykład

• CSS ustawia elementy wizualnie poprawnie, ale DOM ma chaotyczną kolejność.
• Cena produktu jest odczytywana przed nazwą produktu.
• Link „Kup” albo „Zobacz szczegóły” pojawia się przed opisem, który nadaje mu sens.
• Komunikat błędu jest daleko od pola i jest odczytywany w złym momencie.
• Układ kafli wymaga czytania kolumnami, ale DOM układa treść rzędami w sposób, który zmienia znaczenie.

Przykłady kodu

<article>
  <h2>Szkolenie WCAG dla specjalistów</h2>
  <p>Trzydniowe szkolenie z audytowania dostępności cyfrowej.</p>
  <a href="/szkolenia/wcag-dla-specjalistow">
    Zobacz szczegóły
  </a>
</article>

<article>
  <a href="/szkolenia/wcag-dla-specjalistow">
    Zobacz szczegóły
  </a>
  <p>Trzydniowe szkolenie z audytowania dostępności cyfrowej.</p>
  <h2>Szkolenie WCAG dla specjalistów</h2>
</article>

.card {
  display: flex;
}

.card__title {
  order: 2;
}

.card__action {
  order: 1;
}

Przykład graficzny

Jak sprawdzić

1. Sprawdź kolejność treści w DOM, na przykład w DevTools.
2. Przejdź stronę czytnikiem ekranu i oceń, czy informacje pojawiają się w logicznej kolejności.
3. Użyj klawiatury i sprawdź, czy przechodzenie przez stronę nie ujawnia chaotycznego układu treści.
4. Wyłącz CSS albo sprawdź uproszczoną strukturę dokumentu.
5. Przejrzyj karty, tabele, formularze, listy, kafle oraz sekcje łączące obraz i tekst.
6. Sprawdź, czy treść nadal jest zrozumiała bez układu wizualnego.
7. Nie oceniaj wyłącznie po wyglądzie strony.

Co sprawdzi automat, a czego nie

Automat może wykryć

• część problemów ze strukturą nagłówków, list, tabel i formularzy,
• część elementów interaktywnych w nietypowej kolejności,
• niektóre problemy z ukrywaniem treści,
• wybrane błędy semantyczne w HTML.

Automat nie oceni pewnie

• czy kolejność treści faktycznie zachowuje znaczenie,
• czy opis, nagłówek i akcja są zrozumiałe po odczytaniu liniowym,
• czy zmiana kolejności przez CSS gubi sens,
• czy układ kafli, produktów albo formularza jest logiczny dla użytkownika,
• czy uproszczony widok treści nadal prowadzi użytkownika przez zadanie.

Typowe błędy

• Projektowanie kolejności wyłącznie w CSS, bez sprawdzenia kolejności DOM.
• Karty produktów, w których cena albo przycisk pojawiają się przed nazwą produktu.
• Układy dwukolumnowe, które po odczycie liniowym mieszają dwie niezależne treści.
• Formularze, w których instrukcja pojawia się dopiero po polu.
• Komunikaty błędów odczytywane daleko od pola, którego dotyczą.
• Elementy przesuwane przez flexbox albo grid w sposób, który zmienia sens treści.
• Kafle i porównania, które wizualnie są czytelne, ale w kodzie tworzą przypadkową sekwencję.

Powiązane kryteria

• 1.3.1 Informacje i relacje
• 2.4.3 Kolejność fokusu
• 2.4.6 Nagłówki i etykiety
• 3.3.2 Etykiety lub instrukcje

Źródła

• WCAG 2.2: 1.3.2 Meaningful Sequence (otwiera się w nowym oknie)
• Understanding WCAG 1.3.2 (otwiera się w nowym oknie)
• How to Meet WCAG 1.3.2 (otwiera się w nowym oknie)