- Poziom
- A
- Od wersji
- WCAG 2.0
- Pozycje
- 2 / 193
1.3.2 Zrozumiała kolejność
Jeśli kolejność treści wpływa na jej znaczenie, ta kolejność musi wynikać z kodu strony, a nie tylko z układu na ekranie.
/ Czego wymaga
Tam, gdzie kolejność treści ma znaczenie dla jej sensu, musi to być kolejność zapisana w kodzie. Czytnik ekranu, monitor brajlowski i przeglądarka tekstowa idą za dokumentem, a nie za ekranem. CSS potrafi pokazać trzeci blok jako pierwszy i osoba widząca niczego nie zauważy; osoba niewidoma usłyszy cenę przed nazwą produktu, krok trzeci przed pierwszym albo komunikat o błędzie długo po polu, którego ten komunikat dotyczy.
Kryterium działa tylko wtedy, gdy kolejność wpływa na znaczenie. Pasek nawigacji i artykuł mogą występować w dowolnej kolejności, a strona może mieć więcej niż jedną poprawną kolejność czytania, z których jedną musi dać się ustalić programowo. Błędem jest treść, która zmienia sens, gdy czyta się ją w kolejności dokumentu: przestawione kroki, kolumny zbudowane ze spacji, tabela układu, która po rozwinięciu w linię traci sens. Kolejność fokusu klawiatury to osobna sprawa, opisana w 2.4.3.
/ Jak strony go nie spełniają
- Elementy flex lub grid są przestawione właściwością order, wartością row-reverse albo column-reverse, więc kolejność na ekranie różni się od kolejności w dokumencie.
- Pozycjonowanie absolutne lub float umieszcza blok nad treścią, która poprzedza go w kodzie.
- Kolumny albo tabele są udawane spacjami i znakami nowej linii w zwykłym tekście, który jest wtedy czytany w poprzek kolumn.
- Tabela układu ma sens na ekranie, ale czytana komórka po komórce, wiersz po wierszu, daje złą kolejność.
- Litery wyrazu są rozdzielone spacjami dla efektu wizualnego, więc wyraz jest odczytywany litera po literze.
/ Jak sprawdzić samodzielnie
- Wyłącz style (Firefox: Widok, Styl strony, Bez stylu) i przeczytaj stronę od góry do dołu. Treść nadal powinna mieć sens.
- Pozwól czytnikowi ekranu odczytać całą stronę bez zatrzymywania i śledź ją wzrokiem. Zanotuj każde miejsce, w którym głos przeskakuje.
- Zaznacz wszystko, skopiuj i wklej jako zwykły tekst do edytora. To jest kolejność dokumentu.
- W narzędziach deweloperskich przeglądarki wyszukaj w stylach order, row-reverse, column-reverse i position: absolute, a każde trafienie porównaj z kodem.
- Powtórz test w wąskim oknie, bo układy responsywne często zmieniają kolejność tylko w jednym punkcie przełamania.
/ Jak to naprawić
- Napisz kod w kolejności, w jakiej treść ma być czytana, a dopiero potem układaj go za pomocą CSS, nie odwrotnie.
- Usuń właściwość order i flex-direction: row-reverse tam, gdzie zmieniają znaczenie, i zamiast tego przestaw elementy w źródle.
- Tekst wyrównany spacjami zastąp prawdziwym elementem table albo kolumnami CSS.
- Do rozstrzelenia wyrazu używaj właściwości letter-spacing, nigdy spacji między literami.
- Jeśli tabela układu musi zostać, zadbaj, by jej komórki czytane wiersz po wierszu miały sens, i nadaj jej role="presentation".
/ Co sprawdza nasz skaner
Skan na wyrenderowanej stronie bierze do 120 widocznych bloków wewnątrz elementów main, article i section, pomija wszystko, co jest przypięte (fixed lub sticky), i porównuje każdy blok z poprzednim w kodzie. Blok, który leży na ekranie wyraźnie wyżej w tej samej kolumnie, zostaje zgłoszony, najwyżej sześć na stronę. Pomiar dotyczy jednego widoku na komputerze i nie rozstrzyga, czy kolejność wpływa na znaczenie, więc każde zgłoszenie musi przeczytać człowiek.
/ Kto je łamie, według naszych pomiarów
| Podmiot | Sektor | Wystąpienia | Wynik |
|---|---|---|---|
| Bundesagentur für Arbeit | government · DE | 1 | 16 |
| Bundeszentrale für politische Bildung | government · DE | 1 | 10 |
Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.
/ Pytania o to kryterium
Czy właściwość CSS order szkodzi dostępności?
Może szkodzić. Właściwość order oraz wartości row-reverse i column-reverse zmieniają to, co widać, nie zmieniając dokumentu, a technologia wspomagająca idzie za dokumentem. Jeśli obie kolejności opowiadają to samo, nic się nie dzieje. Jeśli sens zależy od kolejności, jak przy numerowanych krokach albo etykiecie i jej wartości, takie przestawienie narusza 1.3.2 i zwykle dezorientuje też osoby korzystające z klawiatury.
Czym różni się 1.3.2 Zrozumiała kolejność od 2.4.3 Kolejność fokusu?
1.3.2 dotyczy kolejności, w jakiej treść jest czytana: tekstu, obrazów, nagłówków, wszystkiego. 2.4.3 dotyczy kolejności, w jakiej elementy interaktywne otrzymują fokus klawiatury. Strona może naruszać jedno kryterium i spełniać drugie. Oba mają zwykle tę samą przyczynę, czyli kod napisany w jednej kolejności i przestawiony przez CSS w inną, oraz to samo lekarstwo: źródło ułożone w kolejności czytania.
Czy kolejność w DOM musi dokładnie odpowiadać kolejności na ekranie?
Nie. Kryterium wymaga poprawnej kolejności czytania tylko tam, gdzie kolejność wpływa na znaczenie. Panel boczny może w kodzie stać przed tekstem głównym albo po nim, a dwie niezależne kolumny można czytać w dowolnej kolejności. Kłopot zaczyna się, gdy bloki zależne od siebie, na przykład nagłówek i jego akapit albo kolejne kroki instrukcji, zostają rozdzielone lub zamienione miejscami.