WCAG 3.2.6: Spójna pomoc

Co to jest WCAG 2.1 Kryterium Sukcesu 3.2.6: Spójna pomoc?

Kryterium Sukcesu 3.2.6 z wytycznych WCAG 2.1, zatytułowane „Spójna pomoc” (Consistent Help), na poziomie A, dotyczy zapewnienia przewidywalności i łatwości w znajdowaniu mechanizmów pomocy na stronach internetowych. Zgodnie z oficjalnym sformułowaniem, kryterium to mówi: „Jeżeli strona internetowa zawiera wiele mechanizmów pomocy, a mechanizmy te są dostępne, ich względna kolejność względem innej treści jest spójna w całym zestawie stron internetowych, na których się pojawiają.”

W praktyce oznacza to, że jeśli na stronie istnieje więcej niż jeden sposób uzyskania pomocy (np. link do FAQ, przycisk czatu, formularz kontaktowy), ich kolejność wyświetlania względem siebie i innych elementów strony powinna być taka sama na wszystkich stronach, gdzie te mechanizmy są obecne. Celem jest zminimalizowanie wysiłku poznawczego użytkownika i ułatwienie nawigacji, pozwalając mu szybko i intuicyjnie zlokalizować potrzebne wsparcie.

Dlaczego spójna pomoc jest ważna?

Spójność w prezentacji mechanizmów pomocy ma kluczowe znaczenie dla dostępności i użyteczności. Zapewnia ona użytkownikom poczucie bezpieczeństwa i przewidywalności, co jest szczególnie ważne dla wielu grup:

• Użytkownicy z niepełnosprawnościami poznawczymi: Osoby z dysleksją, ADHD, zaburzeniami pamięci czy innymi niepełnosprawnościami poznawczymi polegają na spójności. Zmieniające się położenie czy wygląd elementów nawigacyjnych, w tym pomocy, może powodować frustrację, dezorientację i uniemożliwiać korzystanie z serwisu.
• Użytkownicy z niepełnosprawnościami wzroku: Osoby korzystające z czytników ekranu lub lupy cyfrowej czerpią korzyści ze spójnego układu. Gdy elementy są w tym samym miejscu lub w tej samej względnej kolejności, nawigacja jest szybsza i mniej męcząca, ponieważ mogą polegać na pamięci mięśniowej lub przewidywać, gdzie znajdą się kolejne elementy.
• Osoby starsze: Mogą mieć problemy z pamięcią lub wolniejsze przetwarzanie informacji. Spójna lokalizacja i wygląd pomocy zmniejsza obciążenie poznawcze i ułatwia szybkie odnalezienie wsparcia.
• Nowi użytkownicy: Osoby, które po raz pierwszy korzystają z witryny, szybciej uczą się jej interfejsu, gdy kluczowe elementy, takie jak pomoc, są prezentowane w przewidywalny sposób.
• Użytkownicy mobilni: Na mniejszych ekranach, gdzie przestrzeń jest ograniczona, spójność pomaga w efektywnej nawigacji i szybkim znajdowaniu potrzebnych funkcji.

Brak spójności prowadzi do zwiększonego wysiłku, błędów i w konsekwencji rezygnacji użytkownika z korzystania z serwisu.

Wymagania kryterium sukcesu 3.2.6

WCAG 2.1 Kryterium Sukcesu 3.2.6: Spójna pomoc (Poziom A) brzmi dokładnie tak:

„Jeżeli strona internetowa zawiera wiele mechanizmów pomocy, a mechanizmy te są dostępne, ich względna kolejność względem innej treści jest spójna w całym zestawie stron internetowych, na których się pojawiają.”

Kluczowe elementy tego kryterium to:

• „Wiele mechanizmów pomocy”: Kryterium ma zastosowanie tylko wtedy, gdy na stronie znajduje się więcej niż jeden sposób na uzyskanie pomocy. Jeśli jest tylko jeden, to kryterium to nie ma zastosowania (choć spójne umiejscowienie jest nadal najlepszą praktyką). Przykłady mechanizmów pomocy to: link do FAQ, link do strony kontaktowej, ikona czatu na żywo, ikona wsparcia kontekstowego, numer telefonu.
• „Względna kolejność względem innej treści jest spójna”: Oznacza to, że jeśli masz np. link do FAQ, potem czat, a potem formularz kontaktowy na jednej stronie, to ta sama kolejność powinna być zachowana na wszystkich innych stronach, na których te trzy mechanizmy pomocy są również dostępne. Ważne jest nie tylko samo położenie (np. zawsze w stopce), ale również ich kolejność w obrębie tej lokalizacji.
• „W całym zestawie stron internetowych, na których się pojawiają”: Spójność musi być zachowana na wszystkich stronach serwisu, gdzie dany zestaw mechanizmów pomocy jest widoczny. Jeśli na niektórych stronach pojawia się tylko jeden mechanizm, a na innych wiele, to kryterium dotyczy tylko tych stron z wieloma mechanizmami.

Warto również pamiętać, że chociaż kryterium 3.2.6 skupia się na względnej kolejności wielu mechanizmów, ogólna zasada spójności (w tym spójne położenie, wygląd i funkcjonalność) jest fundamentalna dla dobrej użyteczności i dostępności, nawet jeśli na stronie występuje tylko jeden mechanizm pomocy (co często jest pokryte przez WCAG 3.2.3 Spójna nawigacja i WCAG 3.2.4 Spójna identyfikacja).

Praktyczne wytyczne dla zapewnienia spójnej pomocy

Aby spełnić kryterium 3.2.6 oraz ogólne zasady spójności, należy przestrzegać następujących wytycznych:

1. Spójna lokalizacja: Upewnij się, że mechanizmy pomocy (np. link do FAQ, ikona czatu, link kontaktowy) zawsze pojawiają się w tym samym, przewidywalnym miejscu na każdej stronie, na której są dostępne. Częste miejsca to nagłówek (header), stopka (footer), pasek boczny lub stała ikona w rogu ekranu.
2. Spójna względna kolejność: Jeśli na stronie masz wiele mechanizmów pomocy, zawsze prezentuj je w tej samej kolejności. Na przykład, jeśli masz link do „FAQ”, „Czat na żywo” i „Formularz kontaktowy”, zawsze umieszczaj je w tej samej kolejności we wszystkich miejscach, gdzie się pojawiają.
3. Spójny wygląd: Mechanizmy pomocy powinny mieć zawsze ten sam wygląd (np. te same ikony, kolor, rozmiar czcionki, styl przycisku), aby użytkownicy mogli je łatwo rozpoznać.
4. Spójne etykiety i teksty alternatywne: Używaj tych samych, jasnych i zrozumiałych etykiet dla linków i przycisków pomocy. Jeśli używasz ikon, zapewnij spójne i opisowe teksty alternatywne (np. atrybut alt dla obrazków, aria-label dla ikon).
5. Dostępność samego mechanizmu pomocy: Upewnij się, że sam mechanizm pomocy (np. okno czatu, strona FAQ) jest w pełni dostępny, tj. nawigowalny klawiaturą, ma odpowiedni kontrast kolorów, itp.
6. Globalna dostępność: Rozważ umieszczenie linków do pomocy w globalnej nawigacji (nagłówek lub stopka), aby były dostępne z dowolnego miejsca w witrynie.

Przykłady implementacji

Przykład poprawnej implementacji

W tym przykładzie, na każdej stronie witryny, w stopce (<footer>) pojawiają się trzy mechanizmy pomocy: link do strony FAQ, link do strony kontaktowej oraz link do czatu na żywo. Ważne jest, aby ich względna kolejność była zawsze taka sama (FAQ, Kontakt, Czat), niezależnie od strony.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strona główna</title>
    <style>
        body { font-family: sans-serif; margin: 0; display: flex; flex-direction: column; min-height: 100vh; }
        main { flex-grow: 1; padding: 20px; }
        footer {
            background-color: #f2f2f2;
            padding: 15px 20px;
            text-align: center;
            border-top: 1px solid #ddd;
        }
        footer ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        footer ul li a {
            text-decoration: none;
            color: #007bff;
            font-weight: bold;
        }
        footer ul li a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <header><h1>Moja Strona</h1></header>
    <main>
        <p>Zawartość strony głównej...</p>
    </main>
    <footer>
        <h3>Potrzebujesz pomocy?</h3>
        <ul>
            <li><a href="/faq.html">FAQ</a></li>
            <li><a href="/kontakt.html">Kontakt</a></li>
            <li><a href="/czat.html">Czat na żywo</a></li>
        </ul>
    </footer>
</body>
</html>
Skopiuj tekst

<!-- plik /produkt.html -->
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strona produktu</title>
    <link rel="stylesheet" href="/styles.css"> <!-- Zakładamy, że CSS jest wspólny -->
</head>
<body>
    <header><h1>Strona Produktu X</h1></header>
    <main>
        <p>Szczegóły produktu X...</p>
    </main>
    <footer>
        <h3>Potrzebujesz pomocy?</h3>
        <ul>
            <li><a href="/faq.html">FAQ</a></li>
            <li><a href="/kontakt.html">Kontakt</a></li>
            <li><a href="/czat.html">Czat na żywo</a></li>
        </ul>
    </footer>
</body>
</html>
Skopiuj tekst

Przykład niepoprawnej implementacji

W tym przykładzie, na stronie głównej mechanizmy pomocy są w jednej kolejności, a na stronie produktu w innej, co łamie kryterium 3.2.6.

<!-- plik /index.html -->
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strona główna</title>
    <style>
        body { font-family: sans-serif; margin: 0; display: flex; flex-direction: column; min-height: 100vh; }
        main { flex-grow: 1; padding: 20px; }
        footer {
            background-color: #f2f2f2;
            padding: 15px 20px;
            text-align: center;
            border-top: 1px solid #ddd;
        }
        footer ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        footer ul li a {
            text-decoration: none;
            color: #007bff;
            font-weight: bold;
        }
        footer ul li a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <header><h1>Moja Strona</h1></header>
    <main>
        <p>Zawartość strony głównej...</p>
    </main>
    <footer>
        <h3>Potrzebujesz pomocy?</h3>
        <ul>
            <li><a href="/faq.html">FAQ</a></li>
            <li><a href="/kontakt.html">Kontakt</a></li>
            <li><a href="/czat.html">Czat na żywo</a></li> <!-- Kolejność: FAQ, Kontakt, Czat -->
        </ul>
    </footer>
</body>
</html>

<!-- plik /produkt.html -->
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strona produktu</title>
    <link rel="stylesheet" href="/styles.css"> <!-- Zakładamy, że CSS jest wspólny -->
</head>
<body>
    <header><h1>Strona Produktu X</h1></header>
    <main>
        <p>Szczegóły produktu X...</p>
    </main>
    <footer>
        <h3>Potrzebujesz pomocy?</h3>
        <ul>
            <li><a href="/czat.html">Czat na żywo</a></li> <!-- KOLEJNOŚĆ ZMIENIONA -->
            <li><a href="/faq.html">FAQ</a></li>
            <li><a href="/kontakt.html">Kontakt</a></li>
        </ul>
    </footer>
</body>
</html>
Skopiuj tekst

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki

• Ujednolicona polityka: Stwórz i przestrzegaj wewnętrznych wytycznych dotyczących umieszczania i projektowania mechanizmów pomocy w całej witrynie.
• Globalna dostępność: Umieszczaj linki do pomocy w stałych elementach nawigacyjnych, takich jak nagłówek lub stopka, aby były zawsze łatwe do znalezienia.
• Pomoc kontekstowa: Jeśli stosujesz pomoc kontekstową (np. ikonę „i” obok pola formularza), upewnij się, że pojawia się ona w spójny sposób w podobnych sytuacjach i ma spójny wygląd.
• Przejrzysta ikonografia: Jeśli używasz ikon, wybieraj te powszechnie rozpoznawalne i, jeśli to możliwe, dodawaj do nich etykiety tekstowe lub etykiety ARIA, aby zwiększyć ich zrozumiałość.
• Testowanie z użytkownikami: Regularnie przeprowadzaj testy użyteczności z rzeczywistymi użytkownikami, w tym z osobami z niepełnosprawnościami, aby upewnić się, że mechanizmy pomocy są intuicyjne i łatwe do znalezienia.
• Zarządzanie treścią: W systemach CMS upewnij się, że szablony wymuszają spójne położenie i kolejność mechanizmów pomocy.

Typowe pułapki

• Niespójne położenie: Umieszczanie linku do „Kontakt” raz w stopce, innym razem w menu bocznym, a na innej stronie w treści głównej.
• Zmienna kolejność: Gdy na jednej stronie lista mechanizmów pomocy to „FAQ, Czat, Kontakt”, a na innej „Czat, Kontakt, FAQ”.
• Różny wygląd: Wykorzystywanie różnych ikon, kolorów lub stylów dla tych samych funkcji pomocy na różnych stronach.
• Brak etykiet tekstowych: Poleganie wyłącznie na ikonach bez towarzyszącego tekstu lub etykiety ARIA, co utrudnia zrozumienie funkcji, zwłaszcza dla użytkowników czytników ekranu.
• Niedostępne mechanizmy pomocy: Sam mechanizm pomocy (np. okno czatu) może być niedostępny (np. nieobsługiwalny klawiaturą), co niweczy cel spójności.
• Pomijanie stron: Zapominanie o dodaniu mechanizmów pomocy na niektórych, rzadziej odwiedzanych stronach serwisu.