Kryterium 1.3.2 – Zrozumiała kolejność z WCAG 2.1 ma na celu zapewnienie, że treści na stronie internetowej są prezentowane w logicznej kolejności zarówno wizualnie, jak i w ukrytej strukturze strony (np. czytniki ekranu). Dzięki temu osoby korzystające z klawiatury lub technologii wspomagających mogą łatwo i intuicyjnie poruszać się po stronie.
W tym artykule wyjaśnimy, jak sprawdzić, czy strona spełnia to kryterium, bez potrzeby znajomości programowania.
Co oznacza „zrozumiała kolejność”?
Zrozumiała kolejność to taka, w której:
- Elementy na stronie (nagłówki, teksty, linki, przyciski) pojawiają się w logicznej kolejności, odpowiadającej temu, co widzi użytkownik.
- Nawigacja klawiaturą przechodzi przez elementy w sposób intuicyjny, np. od góry do dołu, od lewej do prawej.
- Dynamiczne treści (np. rozwijane menu) pojawiają się w odpowiednich miejscach i nie zakłócają logiki strony.
Jak sprawdzić zrozumiałą kolejność bez programowania?
1. Poruszanie się po stronie klawiaturą
Co zrobić?
- Użyj klawisza Tab na klawiaturze, aby przejść przez kolejne elementy interaktywne na stronie (linki, przyciski, pola formularza).
- Obserwuj, w jakiej kolejności przechodzisz przez elementy.
Na co zwrócić uwagę?
- Czy kolejność poruszania się klawiaturą odpowiada wizualnemu układowi strony?
(np. od nagłówka do treści, potem do menu, a na końcu do stopki). - Czy nie przeskakujesz między elementami w chaotyczny sposób?
- Czy możesz dotrzeć do każdego ważnego elementu, np. przycisków w rozwijanym menu?
Przykład błędu:
- Poruszając się klawiaturą, najpierw trafiasz do stopki, potem wracasz na górę strony, a dopiero później do treści głównej.
2. Testowanie rozwijanych elementów (np. menu, akordeony)
Co zrobić?
- Kliknij lub aktywuj rozwijane menu, akordeon (lista rozwijanych pytań) albo modalne okno (np. popup z informacjami).
- Sprawdź, czy klawisz Tab pozwala poruszać się po wszystkich elementach w obrębie tego komponentu.
Na co zwrócić uwagę?
- Czy możesz przejść przez wszystkie treści w rozwijanym elemencie, np. linki w rozwijanym menu?
- Czy po zamknięciu rozwijanego elementu możesz wrócić do miejsca, z którego rozpocząłeś?
- Czy użytkownik nie może przypadkowo „wyjść” z rozwijanej sekcji na inne części strony?
Przykład błędu:
- Po otwarciu rozwijanego menu nie możesz poruszać się po jego opcjach za pomocą klawisza Tab, albo możesz przejść do elementów znajdujących się poza menu.
3. Sprawdzenie tabel i list
Co zrobić?
- Przejrzyj wizualnie tabelę lub listę na stronie.
- Wyobraź sobie, jak byś ją czytał w kolejności od góry do dołu lub od lewej do prawej.
Na co zwrócić uwagę?
- Czy nagłówki w tabeli wyraźnie opisują zawartość wierszy i kolumn?
- Czy w tabeli wartości są wyraźnie powiązane z kategoriami (np. cena → produkt)?
- Czy lista ma logiczną strukturę, np. elementy są w kolejności alfabetycznej lub według priorytetów?
Przykład błędu:
- Tabela z danymi o produktach ma kolumnę „Cena” i „Nazwa”, ale ceny i nazwy nie są jasno powiązane.
4. Obserwowanie układu strony
Co zrobić?
- Przyjrzyj się wizualnemu układowi strony.
- Zadaj sobie pytanie, czy użytkownik widzi treści w logicznej kolejności, np. nagłówek → treść → dodatkowe informacje.
Na co zwrócić uwagę?
- Czy nagłówki są wyraźnie widoczne i hierarchicznie uporządkowane?
- Czy sekcje strony (np. główna treść, menu, stopka) są rozmieszczone w oczekiwanych miejscach?
- Czy elementy dynamiczne, takie jak wyskakujące okna, pojawiają się w odpowiednich miejscach?
Przykład błędu:
- Dodatkowe informacje, które powinny znajdować się na końcu artykułu, są wizualnie wyświetlane na środku, zakłócając jego logikę.
5. Czytnik ekranu – prosty test dostępności
Co zrobić?
- Zainstaluj darmowy czytnik ekranu, np. NVDA (dla Windows) lub skorzystaj z wbudowanego narzędzia VoiceOver (dla macOS).
- Włącz czytnik i poruszaj się po stronie za pomocą klawiatury.
Na co zwrócić uwagę?
- Czy czytnik odczytuje treści w takiej kolejności, w jakiej widzisz je na ekranie?
- Czy nagłówki i sekcje są zapowiadane w logiczny sposób?
- Czy wszystkie kluczowe elementy strony są dostępne (np. pola formularzy, przyciski)?
Przykład błędu:
- Czytnik ekranu zaczyna odczytywać treść stopki, zanim dotrze do nagłówka strony.
Typowe błędy i jak je rozpoznać
- Chaotyczna kolejność elementów
Używając klawisza Tab, użytkownik porusza się w losowej kolejności, np. najpierw trafia do stopki, potem wraca do nagłówka, a dopiero później do treści. - Trudności w nawigacji rozwijanymi elementami
Po otwarciu rozwijanego menu lub modala użytkownik nie może łatwo przejść przez wszystkie elementy, albo wychodzi poza jego granice. - Nieintuicyjne tabele
W tabelach nagłówki nie opisują odpowiednio danych, albo dane są ułożone w sposób, który jest trudny do zrozumienia. - Układ strony niezgodny z logiką czytania
Elementy na stronie, takie jak dodatkowe informacje czy reklamy, są umieszczone w miejscach, które zakłócają czytelność treści głównej. - Czytnik ekranu odczytuje treści w niewłaściwej kolejności
Użytkownicy technologii wspomagających są wprowadzani w błąd, ponieważ kolejność odczytu nie odpowiada logicznemu układowi wizualnemu strony.
Podsumowanie
Zapewnienie zrozumiałej kolejności treści na stronie nie wymaga zaawansowanej wiedzy technicznej. Kluczowe jest spojrzenie na stronę z perspektywy użytkownika, zwłaszcza osoby korzystającej z klawiatury lub technologii wspomagających.
Podczas testowania warto:
- Poruszać się po stronie klawiaturą i obserwować kolejność przechodzenia przez elementy,
- Testować działanie rozwijanych sekcji, takich jak menu lub modale,
- Przyglądać się tabelom i układowi strony pod kątem logiki czytania,
- Używać czytnika ekranu, aby zrozumieć, jak treść jest odczytywana.
Dzięki takim prostym testom możesz szybko ocenić, czy strona spełnia wymagania kryterium WCAG 1.3.2. 😊