Wróć do wszystkich kryteriów

3.2.6 Spójna pomoc (ang.) Consistent Help

Specjalizacje:

  • Designer
  • Deweloper

Elementy:

  • Cała strona / widok
  • Formularze
  • Nawigacja

Poziomy:

  • A

Spis treści

    Istota i cel kryterium

    Kryterium sukcesu 3.2.6 wymaga zachowania pełnej przewidywalności i spójności w rozmieszczeniu dostępnych mechanizmów pomocy. Gdy użytkownik napotyka problem lub potrzebuje wsparcia, nie powinien tracić czasu na ponowne szukanie elementów i domyślanie się układu strony. Na każdej podstronie serwisu wybrany zestaw narzędzi kontaktowych oraz opcji samopomocy musi zachować dokładnie tę samą kolejność względną.

    Dzięki temu pomagasz odbiorcom błyskawicznie zrozumieć strukturę systemu wsparcia i intuicyjnie z niego korzystać. Eliminujesz niepotrzebne zmiany lokalizacji elementów, które dla wielu osób – szczególnie z ograniczeniami poznawczymi – stanowią poważną barierę w obsłudze witryny.

    Zdecydowanie zmniejszasz obciążenie poznawcze i niwelujesz frustrację wywołaną poszukiwaniem kontaktu po przejściu na kolejny ekran. Zadbaj o to, aby proces docierania do pomocy był na Twojej witrynie maksymalnie prosty, stabilny i komfortowy.

    Definicja w j. angielskim

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

    Słownik pojęć

    Względna kolejność (ang.) same relative order
    –

    stałe wzajemne usytuowanie poszczególnych elementów w strukturze dokumentu. Jeśli komponent A wyprzedza komponent B na jednej podstronie, ta relacja musi zostać bezwzględnie utrzymana na wszystkich pozostałych ekranach, na których występują oba te elementy (nawet jeśli pomiędzy nimi nie zostaną wstawione lub usunięte inne pozycje).

    Mechanizm pomocy (ang.) help mechanism
    –

    to dowolna powtarzalna funkcjonalność ułatwiająca rozwiązanie problemów technicznych, merytorycznych lub bezpośredni kontakt ze wsparciem. Może to być bezpośrednia treść na stronie lub link prowadzący do dedykowanej sekcji.

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

    • Użytkownicy z niepełnosprawnościami wzroku: Osoby niewidome obsługujące witryny za pomocą czytników ekranu oraz osoby niedowidzące korzystające z lupy cyfrowej czerpią olbrzymie korzyści z powtarzalnego układu stron. Gdy elementy znajdują się w niezmiennej kolejności względnej, interakcja opiera się na pamięci mięśniowej i przewidywalności struktury kodu.
    • Użytkownicy z niepełnosprawnościami poznawczymi: Osoby zmagające się z dysleksją, ADHD, autyzmem czy zaburzeniami pamięci opierają swoją pracę na stabilności interfejsu. Nieprzewidywalne roszady i zmiany lokalizacji funkcji wsparcia wywołują u nich silną frustrację i mogą całkowicie uniemożliwić ukończenie zadania (np. zakupu lub rejestracji).
    • Użytkownicy mobilni: Na niewielkich ekranach urządzeń przenośnych, gdzie przestrzeń użytkowa jest mocno ograniczona, spójność pozwala na natychmiastowe dotarcie do modułów ratunkowych bez konieczności przeszukiwania całej strony.
    • Osoby starsze: Użytkownicy w podeszłym wieku, którzy mogą napotykać trudności z pamięcią krótkotrwałą lub wolniejszym przetwarzaniem bodźców wizualnych, zyskują stały punkt orientacyjny w postaci niezmiennego systemu pomocy.
    • Nowi użytkownicy: Osoby trafiające do serwisu po raz pierwszy znacznie szybciej uczą się obsługi interfejsu, gdy kluczowe moduły wsparcia znajdują się w łatwych do przewidzenia miejscach.

    Zasady wdrażania i wymagania techniczne

    Standard WCAG 2.2 precyzuje cztery konkretne formy mechanizmów pomocy, które podlegają zasadzie spójności:

    • Dane kontaktowe człowieka ((ang.) Human contact details): Należą do nich numery telefonu, adresy e-mail czy informacje o godzinach pracy personelu wsparcia.
    • Mechanizm interfejsu ludzkiego ((ang.) A human interface mechanism): Wszelkie narzędzia umożliwiające interakcję z żywym operatorem, takie jak aplikacja czatu na żywo (live chat), formularz kontaktowy lub bezpośredni odnośnik do profilu wsparcia w mediach społecznościowych.
    • Opcja samopomocy ((ang.) A self-help option): Bazy wiedzy, sekcje najczęściej zadawanych pytań lub instrukcje krok po kroku ułatwiające samodzielne rozwiązanie problemu.
    • Automatyczny mechanizm kontaktowy ((ang.) An automated contact mechanism): Wszelkiego rodzaju zautomatyzowane systemy konwersacyjne, w tym chatboty oparte na scenariuszach lub sztucznej inteligencji (AI).

    Techniczne reguły implementacji:

    • Zachowaj porządek liniowy: Jeśli na stronie głównej kolejność elementów w stopce to link do FAQ, a następnie formularz kontaktowy, to na podstronie artykułu kolejność ta nie może zostać odwrócona.
    • Zapewnij elastyczność struktury: Jeśli na danej podstronie rezygnujesz z wyświetlania jednego z mechanizmów (np. ukrywasz chatbot na stronie koszyka), pozostałe mechanizmy (np. telefon i (ang.) FAQ) muszą zachować swoją pierwotną kolejność względem siebie.
    • Wprowadź spójne etykiety i teksty alternatywne: Stosuj identyczne, zrozumiałe opisy tekstowe dla przycisków i linków. W przypadku ikon wdróż jednoznaczne teksty alternatywne przy użyciu atrybutu alt lub aria-label.
    • Zaimplementuj spójną lokalizację: Upewnij się, że wybrane komponenty pojawiają się zawsze w tym samym, łatwym do przewidzenia obszarze ekranu (np. widget czatu zakotwiczony w prawym dolnym rogu).

    Wyjątki i sytuacje szczególne

    • Zmiana zainicjowana przez użytkownika: Jeśli użytkownik samodzielnie zmodyfikuje układ strony (np. poprzez zmianę ustawień personalizacji interfejsu lub przeciągnięcie okna czatu w inne miejsce), zmiana kolejności nie stanowi naruszenia kryterium.
    • Brak powtarzalności w zestawie stron: Kryterium ma zastosowanie wyłącznie wtedy, gdy dane mechanizmy pomocy faktycznie powtarzają się na wielu stronach w obrębie tego samego serwisu.

    Przykłady implementacji

    Najczęstsze błędy

    • Zmienna kolejność względna: Zmienianie wzajemnego porządku liniowego mechanizmów pomocy podczas przechodzenia między podstronami (np. na stronie głównej układ to: (ang.) FAQ, czat, kontakt, a na karcie produktu: czat, kontakt, (ang.) FAQ).
    • Niespójne położenie przestrzenne: Umieszczanie odnośników kontaktowych w sposób nieprzewidywalny – raz w nagłówku (header), raz w menu bocznym (sidebar), a innym razem wyłącznie w stopce (footer).
    • Brak etykiet tekstowych: Opieranie się wyłącznie na grafikach lub samych ikonach (np. ikona słuchawki lub znaku zapytania) bez zapewnienia dostępnej warstwy tekstowej bądź atrybutów ARIA.
    • Różnorodność stylistyczna i wizualna: Wykorzystywanie całkowicie odmiennych kształtów ikon, kolorystyki czy stylów przycisków dla tej samej funkcji pomocy na różnych ekranach aplikacji, co dezorientuje użytkowników z ograniczeniami poznawczymi.
    • Niedostępność techniczna samych modułów: Wdrożenie spójnego systemu wsparcia, który jest wadliwy technicznie (np. okno czatu, do którego nie można dotrzeć ani obsłużyć za pomocą samej klawiatury).
    • Pomijanie wybranych podstron: Całkowite usuwanie mechanizmów pomocy z rzadziej odwiedzanych sekcji serwisu, co narusza spójność globalną.

    Najlepsze praktyki

    • Wdrożenie zunifikowanej polityki projektowej: Stwórz i rygorystycznie egzekwuj wewnętrzne standardy dotyczące wyglądu, lokalizacji i działania wszystkich komponentów wsparcia.
    • Zarządzanie poprzez szablony systemów CMS: Wymuszaj jednolitą lokalizację oraz stałą kolejność elementów za pomocą globalnych szablonów sekcji nagłówka i stopki w systemach zarządzania treścią, co eliminuje ryzyko błędów ludzkich podczas edycji podstron.
    • Czytelna i uniwersalna ikonografia: Stosuj powszechnie rozpoznawalne symbole graficzne i zawsze uzupełniaj je o widoczne etykiety tekstowe.
    • Intuicyjna pomoc kontekstowa: Jeśli wdrażasz podpowiedzi kontekstowe (np. ikony informacyjne „i” przy polach formularza), dbaj o to, by pojawiały się one w powtarzalny sposób i miały spójny wygląd graficzny w całym systemie.
    • Regularne testowanie z realnymi użytkownikami: Przeprowadzaj badania użyteczności z udziałem osób z niepełnosprawnościami poznawczymi oraz starszych, weryfikując łatwość odnajdywania kanałów wsparcia.

    Metody testowania

    • Narzędzie deweloperskie (ang.) Developer Tools: Przeanalizuj strukturę kodu w drzewie DOM na co najmniej kilku różnych podstronach serwisu. Zweryfikuj, czy kolejność liniowa znaczników reprezentujących mechanizmy pomocy pozostaje niezmienna względem siebie oraz kontenerów nadrzędnych.
    • NVDA: Uruchom czytnik ekranu i przejdź kolejno przez wybrane podstrony za pomocą klawisza tabulacji lub skrótów nawigacji strukturalnej. Upewnij się, że sekwencja odczytywania komunikatów pomocy i punktów fokusowych jest całkowicie przewidywalna i spójna.
    • ANDI.JS: Aktywuj moduł elementów sterujących lub grafik, aby zweryfikować, czy tekst alternatywny przekazywany do technologii asystujących dla przycisków pomocy jest identyczny na każdej z analizowanych podstron.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 6 interaktywnych makiet stron internetowych. Każda makieta posiada zakładki symulujące przejście na inną podstronę tego samego serwisu. Twoim zadaniem jest ocena, czy mechanizmy pomocy (FAQ, Kontakt, Czat) są spójne na wszystkich podstronach.

    Jak to sprawdzić?

    1. Przełączaj się między zakładkami (podstronami) w każdym przykładzie.
    2. Zlokalizuj wszystkie mechanizmy pomocy (linki w stopce, nagłówku, pływające widgety czatu).
    3. Sprawdź, czy zachowują one tę samą kolejność względną (względem siebie oraz innych elementów strony) w kodzie źródłowym (DOM).
    4. Pamiętaj, że usunięcie jednego mechanizmu na określonej podstronie nie łamie kryterium, o ile pozostałe mechanizmy zachowują swoją kolejność.

    Notatka: Zanim zajrzysz do rozwiązania, przetestuj i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Klawiatura (Tab, Shift + Tab, Spacja, Enter ), Myszka, Narzędzie deweloperskie (ang.) Developer Tools

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

    #1 BŁĄD

    Problem: Zmieniono wzajemny porządek liniowy mechanizmów pomocy w stopce podczas przechodzenia między podstronami (FAQ, Czat, Kontakt -> Kontakt, Czat, FAQ).
    Dlaczego: Łamie to zasadę względnej kolejności. Użytkownicy przyzwyczajeni do lokalizacji linku „Kontakt” na końcu listy będą zdezorientowani.
    Naprawa: Zachowaj identyczną kolejność linków pomocy w stopce na każdej podstronie.

    #2 BŁĄD

    Problem: Niespójne położenie przestrzenne i kodowe. Na stronie głównej czat jest pływającym widgetem na końcu strony, a na podstronie konta został przeniesiony do nagłówka.
    Dlaczego: Zmienia to całkowicie względną kolejność mechanizmu pomocy wobec reszty treści strony. Użytkownik czytnika ekranu, który szukał czatu na końcu dokumentu, teraz go tam nie znajdzie.
    Naprawa: Umieszczaj widget czatu zawsze w tym samym miejscu w kodzie i na ekranie.

    #3 DOBRZE

    Dlaczego: Usunięcie jednego z mechanizmów pomocy (np. „Napisz do nas”) na określonej podstronie jest dozwolone. Najważniejsze jest to, że pozostałe mechanizmy („Baza wiedzy” i „Infolinia”) zachowały swoją pierwotną kolejność względem siebie.

    #4 BŁĄD

    Problem: Na podstronie „Blog” kolejność linków pomocy w kodzie źródłowym (DOM) została odwrócona, a następnie „naprawiona” wizualnie za pomocą właściwości CSS order.
    Dlaczego: Czytniki ekranu oraz nawigacja klawiaturą opierają się na strukturze DOM. Dla użytkownika niewidomego kolejność mechanizmów pomocy drastycznie się zmieniła, co stanowi błąd.
    Naprawa: Kolejność w kodzie HTML musi być spójna. Usuń manipulacje order.

    #5 DOBRZE

    Dlaczego: Zmiana lokalizacji widgetu pomocy nastąpiła wyłącznie w wyniku bezpośredniej, świadomej akcji użytkownika (kliknięcie przycisku „Przenieś czat na lewo”). Kryterium 3.2.6 dopuszcza takie celowe personalizacje.

    #6 BŁĄD

    Problem: Wizualnie przycisk pomocy znajduje się w tym samym miejscu (prawy dolny róg), ale w kodzie źródłowym na stronie „Start” jest na samym początku dokumentu, a na stronie „O nas” na samym końcu.
    Dlaczego: Dla osób widzących nie ma różnicy, ale dla osób korzystających z czytników ekranu lub nawigujących klawiaturą (Tab), względna kolejność mechanizmu pomocy względem reszty treści zmieniła się diametralnie.
    Naprawa: Zadbaj o spójne umiejscowienie komponentów pomocy w strukturze drzewa DOM na wszystkich podstronach.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów