WCAG 3.2.5: Zmiana na żądanie

WCAG 3.2.5 Zmiana na żądanie (AAA)

Wprowadzenie

Kryterium sukcesu WCAG 3.2.5 „Zmiana na żądanie” jest kluczowe dla zapewnienia przewidywalności i kontroli użytkownika nad interfejsem. Wymaga, aby wszelkie zmiany kontekstu na stronie internetowej, takie jak otwarcie nowego okna, przejście na nową stronę, znacząca zmiana układu treści czy przesunięcie fokusu, były inicjowane wyłącznie przez użytkownika. Oznacza to, że działania te nie powinny następować automatycznie, bez wyraźnej interakcji ze strony użytkownika. Jeżeli jednak takie zmiany muszą nastąpić automatycznie, strona musi oferować mechanizm, który pozwala użytkownikowi je wyłączyć lub kontrolować.

Celem tego kryterium jest zapobieganie dezorientacji i utracie kontroli przez użytkowników, którzy mogą mieć trudności z przetwarzaniem informacji, śledzeniem szybkich zmian lub precyzyjnym sterowaniem urządzeniami wskazującymi.

Dlaczego to jest ważne?

Automatyczne zmiany kontekstu mogą stwarzać znaczące bariery dostępności dla wielu grup użytkowników:

• Użytkownicy z niepełnosprawnościami poznawczymi: Nagłe zmiany kontekstu, takie jak automatyczne odświeżanie strony, przekierowania, czy wyskakujące okna, mogą być niezwykle dezorientujące. Mogą prowadzić do utraty orientacji, frustracji i niemożności ukończenia zadania. Użytkownicy ci potrzebują przewidywalnego środowiska, w którym to oni kontrolują przepływ informacji.
• Użytkownicy z niepełnosprawnościami ruchowymi: Osoby, które korzystają z alternatywnych metod wprowadzania danych (np. klawiatury, przełączników) lub mają trudności z precyzyjnym sterowaniem myszką, mogą przypadkowo aktywować elementy interfejsu, jeśli strona nagle się zmieni. Nagłe zmiany kontekstu mogą prowadzić do niechcianych akcji lub utraty bieżącego miejsca pracy.
• Użytkownicy czytników ekranu: Gdy kontekst strony zmienia się automatycznie, czytniki ekranu mogą nie nadążać za tymi zmianami, co prowadzi do niezrozumiałych komunikatów lub utraty fokusu użytkownika. Mogą również nie być w stanie poprawnie zinterpretować nowej treści, co uniemożliwia użytkownikowi zrozumienie, co się stało.
• Użytkownicy słabowidzący: Nagłe zmiany treści lub układu mogą sprawić, że osoby słabowidzące zgubią punkt orientacyjny na stronie i będą miały trudności ze znalezieniem miejsca, w którym się znajdowały przed zmianą.
• Ogólna przewidywalność: Zapewnienie, że zmiany kontekstu są inicjowane przez użytkownika, zwiększa ogólną przewidywalność interfejsu, co korzystnie wpływa na komfort i efektywność korzystania z serwisu dla wszystkich.

Wymagania kryterium sukcesu 3.2.5

Pełna treść kryterium sukcesu 3.2.5 (poziom AAA) brzmi:

„Zmiany kontekstu są inicjowane tylko przez żądanie użytkownika, lub dostępny jest mechanizm wyłączający takie zmiany.”

Zmiana kontekstu w tym przypadku oznacza znaczącą zmianę treści na stronie internetowej, która może dezorientować użytkownika, jeśli nie jest przez niego inicjowana. Przykłady obejmują:

• Otworzenie nowego okna lub wyskakującego okienka.
• Przejście fokusu na inny element (jeśli nie jest to wynikiem działania użytkownika).
• Przekierowanie na inną stronę (np. po upływie określonego czasu).
• Znacząca reorganizacja całej treści strony lub zmiana jej głównego celu.

Nie każda zmiana treści jest zmianą kontekstu. Na przykład, zmiana pojedynczego elementu na stronie, takiego jak zaktualizowanie licznika lub wyświetlenie komunikatu o błędzie, zazwyczaj nie jest traktowana jako zmiana kontekstu, chyba że znacząco zmienia ogólny sens lub funkcjonalność strony.

Praktyczne wytyczne dla zapewnienia zgodności

1. Formularze: Po przesłaniu formularza, strona powinna albo odświeżyć się z komunikatem potwierdzającym (na tej samej stronie), albo przekierować użytkownika na stronę z potwierdzeniem lub wynikiem, ale tylko po wyraźnej akcji użytkownika (np. kliknięcie przycisku „Wyślij”). Nigdy nie przesyłaj formularza automatycznie po zmianie wartości w polu (np. w rozwijanej liście <select>).
2. Linki i nawigacja: Unikaj automatycznego otwierania nowych okien lub kart przeglądarki. Jeśli link musi otworzyć nowe okno, poinformuj o tym użytkownika z wyprzedzeniem (np. poprzez tekst „(otwiera się w nowej karcie)” lub odpowiednią ikonę i atrybut aria-label dla czytników ekranu). Użycie target="_blank" bez ostrzeżenia jest niezgodne z tym kryterium, ponieważ użytkownik nie spodziewa się zmiany okna/karty.
3. Automatyczne przekierowania/odświeżanie: Unikaj używania <meta http-equiv="refresh"> do automatycznego przekierowywania użytkowników na inne strony po określonym czasie. Jeśli jest to absolutnie konieczne, zapewnij użytkownikowi mechanizm do wstrzymania, wyłączenia lub kontrolowania tego procesu.
4. Wyskakujące okna (modale): Okna modalne lub pop-upy powinny pojawiać się tylko w odpowiedzi na wyraźne działanie użytkownika (np. kliknięcie przycisku). Nie powinny pojawiać się automatycznie po załadowaniu strony lub bez interakcji.
5. Zmiany treści dynamicznej: Treści, które zmieniają się dynamicznie na stronie (np. aktualizacja wyników wyszukiwania, zawartość koszyka zakupowego), są dopuszczalne, o ile nie stanowią „zmiany kontekstu” (tj. nie przekierowują, nie zmieniają fokusu bez interakcji, ani nie zmieniają głównego celu strony). Jeśli zmiany są znaczące, ale nie zmieniają kontekstu, rozważ użycie atrybutu aria-live, aby powiadomić czytniki ekranu o aktualizacji.
6. Karuzele i slidery: Karuzele, które automatycznie przewijają slajdy, mogą być akceptowalne, o ile nie zmieniają fokusu i nie wymagają interakcji użytkownika do ich zatrzymania lub kontrolowania. Zawsze jednak zaleca się zapewnienie przycisków kontrolnych (np. „Następny”, „Poprzedni”, „Pauza”), aby użytkownik mógł wstrzymać automatyczne przewijanie.

Przykłady implementacji

Poprawne (Correct)

<form action="/submit-form" method="post">
    <label for="firstName">Imię:</label>
    <input type="text" id="firstName" name="firstName" required>
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" required>
    <input type="submit" value="Wyślij formularz">
</form>
Skopiuj tekst

<p>Przeczytaj więcej o <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener noreferrer" aria-label="Wytycznych dla dostępności treści internetowych (WCAG) - otwiera się w nowej karcie">Wytycznych dla dostępności treści internetowych (WCAG)</a>.</p>
Skopiuj tekst

<button id="toggleContentBtn">Pokaż/Ukryj szczegóły</button>
<div id="dynamicContent" style="display: none;">
    <p>To jest dodatkowa treść, która pojawia się i znika na żądanie użytkownika.</p>
    <p>Użytkownik ma pełną kontrolę nad jej widocznością.</p>
</div>
<script>
    document.getElementById('toggleContentBtn').addEventListener('click', function() {
        var content = document.getElementById('dynamicContent');
        if (content.style.display === 'none') {
            content.style.display = 'block';
            this.textContent = 'Ukryj szczegóły';
        } else {
            content.style.display = 'none';
            this.textContent = 'Pokaż/Ukryj szczegóły';
        }
    });
</script>
Skopiuj tekst

Niepoprawne (Incorrect)

<p>Za 5 sekund zostaniesz przekierowany na nową stronę...</p>
<meta http-equiv="refresh" content="5;url=https://www.example.com/nowa-strona">
Skopiuj tekst

<form action="/process-selection" method="post">
    <label for="productOption">Wybierz produkt:</label>
    <select id="productOption" name="productOption" onchange="this.form.submit()">
        <option value="">-- Wybierz --</option>
        <option value="laptop">Laptop</option>
        <option value="tablet">Tablet</option>
        <option value="smartphone">Smartfon</option>
    </select>
    <p>Uwaga: Zmiana wyboru automatycznie przesyła ten formularz.</p>
</form>
Skopiuj tekst

<p>Odwiedź <a href="https://www.google.com" target="_blank">Google</a>.</p>
Skopiuj tekst

 <a href="https://www.example.com/important-page" onmouseover="window.location.href='https://www.example.com/important-page'">
    Najedź myszką, aby przejść na ważną stronę
 </a>
Skopiuj tekst

Najlepsze praktyki i często popełniane błędy

Dobre praktyki

• Interakcja użytkownika jest kluczem: Zawsze stawiaj na to, aby każda istotna zmiana kontekstu była wynikiem wyraźnej interakcji użytkownika, takiej jak kliknięcie, naciśnięcie klawisza Enter lub spacji na elemencie interaktywnym.
• Jasne komunikaty: Jeśli musisz otworzyć nową kartę lub okno, wyraźnie o tym poinformuj użytkownika za pomocą tekstu (np. „(otwiera się w nowej karcie)” ) lub wizualnej ikony uzupełnionej o odpowiednie atrybuty aria-label dla czytników ekranu.
• Oferuj kontrolę: Dla wszelkich automatycznie zmieniających się elementów, które nie są 'zmianą kontekstu’, ale mogą być uciążliwe (np. karuzele), zawsze zapewnij mechanizmy kontroli, takie jak przycisk pauzy, nawigacji czy zatrzymania.
• Testuj z różnymi użytkownikami: Regularnie testuj swoją stronę z osobami korzystającymi z czytników ekranu, nawigacji klawiaturą oraz osobami z różnymi niepełnosprawnościami poznawczymi, aby upewnić się, że żadne automatyczne zmiany nie są dla nich problematyczne.

Częste błędy

• Automatyczne przekierowania: Użycie <meta http-equiv="refresh"> do automatycznego przenoszenia użytkowników na inną stronę.
• Automatyczne przesyłanie formularzy: Konfigurowanie formularzy tak, aby przesyłały się automatycznie po zmianie wartości pola (np. po wybraniu opcji z listy rozwijanej <select>).
• Wyskakujące okna bez żądania: Wyświetlanie wyskakujących okien modalnych lub reklamowych natychmiast po załadowaniu strony lub po krótkim czasie, bez akcji użytkownika.
• Otwieranie nowych okien bez powiadomienia: Linki z target="_blank" bez tekstowego lub wizualnego ostrzeżenia, że otwiera się nowa karta/okno.
• Zmiana fokusu: Automatyczne przenoszenie fokusu klawiatury na nowo pojawiające się elementy lub na inną część strony bez interakcji użytkownika.
• Zdarzenia onmouseover: Używanie zdarzeń onmouseover do wyzwalania akcji zmieniających kontekst (np. nawigacja na inną stronę), co jest problematyczne dla użytkowników klawiatury i może prowadzić do przypadkowych aktywacji.

Podsumowanie

Kryterium sukcesu WCAG 3.2.5 „Zmiana na żądanie” jest fundamentem budowania przewidywalnych i kontrolowanych interfejsów cyfrowych. Zapewnienie, że użytkownicy mają pełną kontrolę nad istotnymi zmianami kontekstu na stronie, jest niezbędne dla zapewnienia dostępności, szczególnie dla osób z niepełnosprawnościami poznawczymi, ruchowymi i użytkowników technologii wspomagających. Przestrzeganie tych wytycznych nie tylko poprawia dostępność, ale także zwiększa użyteczność i komfort korzystania z witryny dla wszystkich użytkowników.