Wróć do wszystkich kryteriów

1.3.2 Zrozumiała kolejność (ang.) Meaningful Sequence

Specjalizacje:

  • Content Creator
  • Designer
  • Deweloper

Elementy:

  • Cała strona / widok
  • Nagłówki i struktura

Poziomy:

  • A

Spis treści

    Istota i cel kryterium

    To kryterium zapewnia, że kolejność, w jakiej treści są odczytywane przez technologie wspomagające (np. czytniki ekranu), jest logiczna i odpowiada intencji autora.

    Należy upewnić się, że gdy kolejność prezentacji treści wpływa na jej znaczenie, to kolejność ta jest logiczna i może być programowo określona (czyli odczytana przez technologie wspomagające w zamierzonej sekwencji).

    To kryterium jest kluczowe, ponieważ wizualny układ strony może być inny niż kolejność, w jakiej elementy są zapisane w kodzie HTML (DOM). Użytkownicy, którzy nie widzą układu wizualnego (np. korzystający z czytników ekranu) polegają wyłącznie na kolejności w kodzie.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#meaningful-sequence

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#zrozumia-a-kolejnosc

    Wpływ na dostępność (Kogo wspierasz?)

    Zapewnienie logicznej kolejności odczytu jest kluczowe dla komfortu pracy wielu osób:

    • Osoby nawigujące klawiaturą: Logiczna kolejność kodu gwarantuje, że klawisz Tab będzie przenosił fokus między elementami w sposób przewidywalny i intuicyjny.
    • Użytkownicy czytników ekranu: Dzięki poprawnej kolejności programowej słyszą oni treść w sposób uporządkowany, co pozwala im uniknąć dezorientacji i utraty kontekstu.
    • Osoby z niepełnosprawnościami poznawczymi: Spójny przepływ informacji redukuje obciążenie poznawcze, ułatwiając przetwarzanie i zrozumienie prezentowanych komunikatów.
    • Użytkownicy alternatywnych urządzeń wskazujących: Osoby korzystające z joysticków czy przełączników polegają na programowo ustalonej strukturze, aby efektywnie obsługiwać interfejs.
    • Użytkownicy korzystający z powiększenia ekranu: Osoby słabowidzące, poruszające się po powiększonych fragmentach strony, łatwiej zachowują orientację, gdy kolejność elementów jest naturalna i przewidywalna.

    Zasady wdrażania i wymagania techniczne

    Podczas budowy strony stosuj się do poniższych wytycznych technicznych:

    • Priorytet kolejności źródłowej ((ang.) Source Order): Pamiętaj, że technologie wspomagające czytają kod „od góry do dołu”. Zadbaj, aby kolejność elementów w pliku HTML odpowiadała ich logicznemu następstwu wizualnemu.
    • Wykorzystanie semantycznego HTML: Stosuj właściwe znaczniki dla odpowiednich typów treści:
      • Używaj <header>, <nav>, <main> i <footer> do definiowania głównych obszarów strony.
      • Grupuj powiązane elementy za pomocą list (<ul>, <ol>) oraz akapitów (<p>).
      • W formularzach dbaj o to, by etykiety <label> sąsiadowały z polami <input> w kodzie źródłowym.
    • Ostrożność z CSS: Nowoczesne techniki układu, takie jak Flexbox (właściwość order) czy CSS Grid, pozwalają na drastyczną zmianę pozycji elementu na ekranie bez zmiany jego miejsca w kodzie. Stosuj je tylko wtedy, gdy masz pewność, że nowa kolejność wizualna nie zmienia sensu przekazu lub gdy kod źródłowy nadal zachowuje logiczny ciąg.
    • Dynamiczna treść (JavaScript): Jeśli skrypt dodaje nowe elementy do strony, upewnij się, że trafiają one do odpowiedniego miejsca w drzewie DOM, zachowując spójność z otaczającym kontekstem.

    Wyjątki i sytuacje szczególne

    Kryterium to nie ma zastosowania w specyficznych warunkach:

    • Brak wpływu na znaczenie: Jeśli kolejność prezentacji elementów nie zmienia ich sensu (np. zestaw luźno powiązanych zdjęć dekoracyjnych w galerii lub losowo ułożone ikony mediów społecznościowych), ścisła zgodność kolejności programowej z wizualną nie jest wymagana.
    • Nieliniowe interfejsy: W przypadku bardzo złożonych aplikacji, gdzie użytkownik może wchodzić w interakcję z wieloma panelami jednocześnie, kluczowe jest zachowanie logiki w obrębie poszczególnych komponentów.

    Przykłady implementacji

    Kolejność akapitów

    Formularz

    Menu nawigacyjne

    Najczęstsze błędy

    Wystrzegaj się poniższych błędów, które uniemożliwiają zaliczenie audytu:

    • Używanie stylizacji CSS (np. float: right, position: absolute, display: flex) w celu przeniesienia ważnej treści w inne miejsce ekranu, przy jednoczesnym pozostawieniu jej na początku kodu źródłowego.
    • Stosowanie dodatnich wartości tabindex (np. tabindex="1"), co wymusza nienaturalną i często mylącą kolejność nawigacji klawiaturą.
    • Błędne kodowanie formularzy, w których etykiety są odczytywane po polach edycyjnych lub w zupełnie innym momencie sesji czytnika ekranu.
    • Tworzenie nawigacji, w których kolejność wizualna (np. od prawej do lewej) jest odwrotna do kolejności w kodzie HTML.

    Najlepsze praktyki

    Dobre nawyki, które poprawiają jakość interfejsu:

    • Unikanie manipulacji tabulacją: Staraj się nie używać tabindex="0" do elementów, które nie są natywnie interaktywne, chyba że tworzysz zaawansowany, niestandardowy widżet.
    • Najpierw semantyka, potem wygląd: Projektuj strukturę dokumentu, zanim zaczniesz nakładać style wizualne.
    • Czysty kod: Regularnie usuwaj niepotrzebne kontenery <div>, które mogą utrudniać nawigację użytkownikom technologii wspomagających.
    • Weryfikacja komponentów: Przy wdrażaniu gotowych rozwiązań (karuzele, modale) zawsze sprawdzaj, czy po ich otwarciu fokus trafia w odpowiednie, logiczne miejsce.

    Metody testowania

    Skorzystaj z poniższych narzędzi, aby zweryfikować znaczącą kolejność:

    • Narzędzie deweloperskie (ang.) Developer Tools: Sprawdź zakładkę (ang.) „Elements” lub (ang.) „Accessibility„, aby zobaczyć kolejność węzłów w DOM. To ona określa, jak czytnik ekranu przetworzy stronę.
    • NVDA: Wyłącz monitor i spróbuj przejść przez całą stronę, słuchając jedynie komunikatów czytnika. Sprawdź, czy informacje docierają do Ciebie w logicznym ciągu.
    • (ang.) WAVE Evaluation Tool: Użyj widoku (ang.) „Structure„, aby zobaczyć uproszczony model strony i zweryfikować, czy nagłówki i sekcje następują po sobie prawidłowo.
    • (ang.) IBM Equal Access Toolkit: Przeprowadź testy automatyczne, które mogą wskazać potencjalne problemy z kolejnością tabulacji i strukturą nagłówków.
    • ANDI.js: Wybierz moduł „Porządek tabulacji”, aby nałożyć na stronę wizualne znaczniki kolejności odczytu, co pozwoli Ci błyskawicznie wyłapać nielogiczne przeskoki.
    • Testowanie klawiaturą: Przejdź przez stronę klawiszem Tab. Jeśli fokus przeskakuje chaotycznie po ekranie, kryterium nie zostało spełnione.

    Sprawdź swoją wiedzę

    W poniżej podanym linku znajduje się 5 przykładów interfejsów. Twoim zadaniem jest sprawdzić, czy kolejność nawigacji (Tab) lub czytania (kod źródłowy) jest logiczna i zgodna z tym, co widać na ekranie.

    Notatka: Zanim zajrzysz do rozwiązania, uruchom wybrane narzędzia testowe i zapisz swoje wnioski na kartce.
    Podpowiedź: Kliknij wewnątrz każdego przykładu i użyj klawisza Tab, aby sprawdzić, jak skacze fokus.
    Proponowane narzędzia: Klawiatura Tab i Shift + Tab, Narzędzie deweloperskie (ang.) Developer Tools, NVDA, (ang.) WAVE Evaluation Tool, (ang.) IBM Equal Access Toolkit, ANDI.js

    Link: https://pdc.ambiscale.com/training/wcag-1-3-2/

    #1 DOBRZE

    Dlaczego: Treść główna (Main) jest umieszczona w kodzie przed treściami pobocznymi (Aside/Reklamy). Użytkownik czytnika trafia od razu na „mięso”, nie musząc słuchać reklam.

    #2 BŁĄD

    Problem: Menu używa flex-direction: row-reverse. Elementy w kodzie są odwrotnie (Kontakt, Oferta, Start), aby wizualnie pasowały do prawej strony.
    Efekt: Nawigacja klawiaturą idzie „pod prąd” (od prawej do lewej), co jest nienaturalne.
    Naprawa: Ułożyć menu normalnie i użyć justify-content: flex-end.

    #3 DOBRZE

    Dlaczego: Prosty układ, gdzie kolejność w kodzie (Login -> Hasło -> Przycisk) idealnie odpowiada kolejności wizualnej. Brak kombinacji z pozycjonowaniem.

    #4 BŁĄD

    Problem: Użycie order w Flexboxie zmieniło kolejność wizualną (Nazwisko jest nad Imieniem), ale w kodzie Imię jest pierwsze.
    Efekt: Naciskając Tab, skaczesz w dół (do Imienia), a potem w górę (do Nazwiska). To dezorientuje.
    Naprawa: Ułożyć elementy w HTML tak samo, jak mają wyglądać.

    #5 BŁĄD

    Problem: Przycisk „Wyloguj” jest pierwszy w kodzie (dla wygody pozycjonowania absolutnego), ale wizualnie jest w prawym rogu.
    Efekt: Użytkownik wchodząc na sekcję, najpierw trafia na „Wyloguj”, zanim przeczyta nagłówek „Panel użytkownika”.
    Naprawa: Przenieść link na koniec kodu w kontenerze.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów