WCAG 3.3.5: Pomoc

Kryterium Sukcesu 3.3.5 Pomoc, należące do wytycznych WCAG 2.1 na poziomie AA, koncentruje się na zapewnieniu użytkownikom dostępu do pomocy, gdy jej potrzebują. Głównym celem tego kryterium jest ułatwienie zrozumienia treści i wykonania zadań, zwłaszcza tych złożonych, poprzez oferowanie wsparcia kontekstowego. Zgodnie z nim, każda strona internetowa lub aplikacja powinna oferować mechanizmy pomocy, które są łatwe do znalezienia, zrozumiałe i dostosowane do aktualnej sytuacji użytkownika.

Czym jest Kryterium Sukcesu 3.3.5 Pomoc?

Kryterium 3.3.5 wymaga, aby użytkownik miał dostęp do pomocy kontekstowej, czyli informacji wspierających go w miejscu i czasie, gdy jej potrzebuje. Oznacza to, że pomoc nie może być ogólnikowa, ale powinna odnosić się bezpośrednio do elementu interfejsu, zadania, czy problemu, z którym użytkownik się mierzy. Może to być pomoc dotycząca formatu danych wejściowych w formularzu, wyjaśnienie złożonej terminologii, czy wskazówka dotycząca nawigacji. Kluczowe jest, aby pomoc ta była łatwo dostępna i zrozumiała.

Dlaczego Kryterium 3.3.5 Ma Znaczenie? (Wpływ na Dostępność)

Zapewnienie skutecznej pomocy jest kluczowe dla szerokiego grona użytkowników, poprawiając ich doświadczenia i umożliwiając samodzielne korzystanie ze stron internetowych. Ma to szczególne znaczenie dla:

• Osób z niepełnosprawnościami poznawczymi: Mogą mieć trudności ze zrozumieniem złożonych instrukcji, nietypowej terminologii lub wieloetapowych procesów. Kontekstowa pomoc pomaga im ukończyć zadania bez frustracji.
• Osób z niepełnosprawnościami w czytaniu: Mogą potrzebować prostszych wyjaśnień lub alternatywnych sposobów prezentacji informacji, aby zrozumieć instrukcje.
• Użytkowników z ograniczoną pamięcią krótkotrwałą: Mogą łatwo zapominać instrukcje, które widzieli chwilę wcześniej. Dostępna na żądanie pomoc kontekstowa minimalizuje to ryzyko.
• Nowych lub sporadycznych użytkowników: Mogą nie być zaznajomieni z interfejsem lub specyficznymi funkcjami serwisu, a pomoc kontekstowa prowadzi ich przez proces.
• Wszystkich użytkowników: Wszyscy od czasu do czasu popełniamy błędy lub napotykamy trudności. Szybki dostęp do pomocy zmniejsza frustrację i poprawia ogólną użyteczność serwisu.

Wymagania Kryterium Sukcesu 3.3.5

Aby spełnić to kryterium, należy zapewnić, że:

• Pomoc kontekstowa jest dostępna: Oznacza to, że użytkownik może znaleźć pomoc, która jest specyficzna dla elementu interfejsu, zadania lub błędu, z którym się obecnie boryka. Pomoc musi być zintegrowana z kontekstem, w którym jest potrzebna.
• Różne formy pomocy są akceptowalne: Pomoc może przybierać wiele form, takich jak:
• Kontakt z człowiekiem: Numer telefonu, adres e-mail, czat na żywo z konsultantem.
• Mechanizmy samopomocy: Często zadawane pytania (FAQ), obszerne bazy wiedzy, glosariusze, samouczki, wskazówki kontekstowe (np. podpowiedzi nad polami formularza).
• Przewodniki krok po kroku: Szczególnie przydatne dla złożonych procesów.
• Pomoc jest łatwo dostępna i wykrywalna: Użytkownik nie powinien musieć szukać pomocy. Powinna być ona łatwo dostępna z miejsca, w którym jest potrzebna, na przykład poprzez ikonę pomocy obok pola formularza, link do FAQ, czy widoczny przycisk czatu.

Praktyczne Wskazówki Wprowadzania Kryterium 3.3.5

Aby skutecznie zaimplementować to kryterium, należy wziąć pod uwagę następujące wytyczne:

• Jasne instrukcje: Dla pól formularza zawsze podawaj jasne instrukcje dotyczące wymaganego formatu, celu pola i wszelkich ograniczeń (np. „Wprowadź datę w formacie DD-MM-RRRR”).
• Pomoc kontekstowa:
• Podpowiedzi (tooltips): Używaj podpowiedzi, które pojawiają się po najechaniu myszą lub fokusie klawiaturą, i które są trwałe na tyle, by użytkownik mógł je przeczytać i w razie potrzeby wejść z nimi w interakcję.
• Wiadomości inline: Komunikaty o błędach lub wskazówki pojawiające się bezpośrednio obok pola, do którego się odnoszą, są bardzo efektywne.
• Przyciski lub ikony „Pomoc”: Obok złożonych elementów interfejsu umieść ikony (np. znak zapytania), które po kliknięciu lub fokusie wyświetlają odpowiednią pomoc.
• Linki do FAQ/dokumentacji: Jeśli problem jest bardziej złożony, linkuj bezpośrednio do odpowiedniej sekcji FAQ lub dokumentacji.
• Opcje trwałej pomocy: Zawsze oferuj łatwo dostępne opcje kontaktu z wsparciem (telefon, e-mail, czat), szczególnie na stronach, gdzie wykonywane są ważne transakcje.
• Słowniki i glosariusze: Jeśli używasz specjalistycznej terminologii, zapewnij dostęp do glosariusza wyjaśniającego te pojęcia.
• Testowanie z użytkownikami: Regularne testy użyteczności z rzeczywistymi użytkownikami pomogą zidentyfikować miejsca, w których użytkownicy najczęściej potrzebują pomocy i dostosować do nich wsparcie.

Przykłady Implementacji

Przykład Poprawnej Implementacji

<label for="card_number">Numer karty kredytowej:</label>
<input type="text" id="card_number" aria-describedby="card_number_help">
<button type="button" id="help_card_number" aria-expanded="false" aria-controls="card_number_help">
    <span class="sr-only">Pokaż pomoc dla numeru karty</span>
    <span aria-hidden="true">?</span>
</button>
<div id="card_number_help" class="help-text" role="region" aria-live="polite" hidden>
    <p>Wprowadź 16-cyfrowy numer znajdujący się na przodzie karty, bez spacji i myślników.</p>
</div>

<style>
    .help-text {
        border: 1px solid #ccc;
        padding: 10px;
        background-color: #f9f9f9;
        margin-top: 5px;
        border-radius: 4px;
    }
    #help_card_number {
        margin-left: 5px;
        padding: 5px 10px;
        cursor: pointer;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
    }
    .sr-only { /* Standard screen reader only styles */
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
</style>

<script>
    document.getElementById('help_card_number').addEventListener('click', function() {
        var helpText = document.getElementById('card_number_help');
        var isExpanded = this.getAttribute('aria-expanded') === 'true';
        this.setAttribute('aria-expanded', !isExpanded);
        helpText.hidden = isExpanded;
    });
</script>
Skopiuj tekst

<label for="email_input">Adres e-mail:</label>
<input type="email" id="email_input" aria-describedby="email_error" aria-invalid="true">
<div id="email_error" class="error-message" role="alert">
    <strong>Błąd:</strong> Wprowadzony adres e-mail jest nieprawidłowy. Upewnij się, że zawiera znak "@" i domenę (np. 'przyklad.com').
</div>

<style>
    .error-message {
        color: #d9534f;
        margin-top: 5px;
        font-weight: bold;
    }
    input[aria-invalid="true"] {
        border: 2px solid #d9534f;
    }
</style>
Skopiuj tekst

Przykład Niepoprawnej Implementacji

<label for="date_of_birth">Data urodzenia:</label>
<input type="text" id="date_of_birth">
<!-- Brak jakiejkolwiek informacji o wymaganym formacie daty -->

<p><a href="/faq">Przejdź do FAQ</a> (Ogólne FAQ, trudne do znalezienia odpowiedniej sekcji)</p>
Skopiuj tekst

<label for="password_input">Hasło:</label>
<input type="password" id="password_input" aria-invalid="true">
<div class="error-message-generic" role="alert">
    <strong>Błąd:</strong> Wystąpił błąd podczas walidacji hasła.
</div>

<style>
    .error-message-generic {
        color: #d9534f;
        margin-top: 5px;
    }
</style>

<!-- Przykład znikającej podpowiedzi (częsty błąd z domyślnymi tooltipami przeglądarki lub JS, które szybko znikają) -->
<label for="username_input">Nazwa użytkownika:</label>
<input type="text" id="username_input" title="Użyj od 6 do 20 znaków, tylko litery i cyfry.">
<!-- Atrybut title często nie jest dostępny dla użytkowników klawiatury i znika po utracie fokusu/najechaniu myszą -->
Skopiuj tekst

Dobre Praktyki i Częste Pułapki

Dobre Praktyki

• Oferuj wiele form pomocy: Użytkownicy mają różne preferencje i potrzeby. Zapewnij zarówno opcje samopomocy, jak i kontakt z człowiekiem.
• Proaktywna pomoc: Zamiast czekać na błąd, oferuj wskazówki, zanim użytkownik zacznie wpisywać dane (np. tekst zastępczy, maski wejściowe, lub widoczne instrukcje).
• Upewnij się, że treść pomocy jest jasna, zwięzła i łatwa do zrozumienia: Używaj prostego języka, unikaj żargonu i długich bloków tekstu. Treść pomocy powinna być łatwa do przetworzenia.
• Testuj mechanizmy pomocy z czytnikami ekranu i nawigacją klawiaturą: Upewnij się, że wszyscy użytkownicy, niezależnie od sposobu interakcji, mogą uzyskać dostęp do pomocy i zrozumieć ją. Elementy pomocy powinny być dostępne za pomocą klawiatury, a czytniki ekranu powinny poprawnie ogłaszać ich istnienie i treść.
• Zapewnij jasne etykiety dla elementów pomocy: Jeśli używasz ikon lub przycisków do wyzwalania pomocy, upewnij się, że są one odpowiednio etykietowane (np. za pomocą aria-label lub tekstu wewnątrz przycisku).

Częste Pułapki

• Poleganie wyłącznie na wskazówkach wizualnych: Kolor jako jedyny wskaźnik błędu lub ważności informacji nie jest wystarczający. Zawsze łącz go z tekstem lub ikoną.
• Niedostępne podpowiedzi (tooltips): Domyślne podpowiedzi przeglądarek (title) są często niedostępne dla użytkowników klawiatury i czytników ekranu. Twórz niestandardowe, dostępne podpowiedzi, które pozostają widoczne po uzyskaniu fokusu i są możliwe do aktywacji klawiaturą.
• Niedostępne lokalizacje pomocy: Ukrywanie pomocy w trudnych do znalezienia miejscach lub w modalnych oknach bez odpowiedniego zarządzania fokusem.
• Niejasne lub niepomocne komunikaty o błędach: Komunikaty typu „Wystąpił błąd” są bezużyteczne. Zawsze informuj użytkownika, co poszło nie tak i jak to naprawić.
• Pomoc, która znika zbyt szybko: Wszelka pomoc wyświetlana dynamicznie powinna pozostawać widoczna wystarczająco długo, aby użytkownik mógł ją przeczytać i przetworzyć.