WCAG 3.3.7: Zbędne wprowadzanie danych

Wstęp do kryterium 3.3.7: Zbędne wprowadzanie danych

Kryterium sukcesu WCAG 2.1 3.3.7 Zbędne wprowadzanie danych (Redundant Entry) dotyczy sytuacji, w których użytkownicy są proszeni o ponowne wprowadzenie informacji, które już wcześniej podali lub które system zna. Celem tego kryterium jest znaczne zmniejszenie wysiłku i frustracji użytkowników poprzez eliminację konieczności wielokrotnego wpisywania tych samych danych.

Czym jest kryterium 3.3.7?

Zgodnie z WCAG 2.1, jeśli informacje wcześniej wprowadzone przez użytkownika lub dostarczone użytkownikowi są wymagane na kolejnych etapach procesu, muszą być albo automatycznie uzupełnione, albo dostępne do wyboru dla użytkownika. Oznacza to, że system powinien „pamiętać” kluczowe dane, takie jak imię, nazwisko, adres e-mail, adres wysyłki, i oferować je w odpowiednich miejscach, zamiast wymuszać ich ponowne wpisanie.

Dlaczego to kryterium jest ważne?

Eliminowanie zbędnego wprowadzania danych ma kluczowe znaczenie dla dostępności i użyteczności strony dla szerokiego grona użytkowników:

• Użytkownicy z niepełnosprawnością poznawczą: Powtarzanie wprowadzania danych obciąża pamięć i funkcje poznawcze, co może prowadzić do frustracji, błędów i porzucenia zadania. Automatyczne uzupełnianie lub wybór z listy znacznie zmniejsza to obciążenie.
• Użytkownicy z niepełnosprawnością ruchową: Wprowadzanie danych wymaga precyzyjnych ruchów. Dla osób z ograniczoną sprawnością rąk, drżeniami czy używających specjalistycznych urządzeń wprowadzających, każde dodatkowe naciśnięcie klawisza to zwiększony wysiłek i czas.
• Użytkownicy z dysleksją lub innymi trudnościami w pisaniu: Mniejsza liczba wymaganych wpisów zmniejsza ryzyko błędów ortograficznych i typograficznych, które mogą skutkować nieudanym przesłaniem formularza.
• Użytkownicy urządzeń mobilnych: Pisanie na klawiaturach ekranowych smartfonów i tabletów jest często mniej wygodne i bardziej podatne na błędy niż na klawiaturze fizycznej. Automatyczne uzupełnianie jest tu szczególnie cenne.
• Użytkownicy czytników ekranu: Mniejsza liczba interakcji i krótsze formularze przekładają się na szybsze i bardziej efektywne przeglądanie zawartości, a także mniejsze ryzyko pominięcia ważnych informacji.
• Wszyscy użytkownicy: Ograniczenie zbędnego wprowadzania danych usprawnia interakcję i poprawia komfort korzystania z serwisu.

Wymagania i zasady sukcesu

Główna zasada sukcesu kryterium 3.3.7 jest prosta: nie zmuszaj użytkownika do ponownego wpisywania informacji, które system już zna. Aby spełnić to kryterium, należy zapewnić, że:

• Informacje, które użytkownik wprowadził na wcześniejszym etapie procesu (np. w kroku 1 formularza wieloetapowego), są automatycznie uzupełniane w kolejnych krokach, jeśli są tam ponownie wymagane.
• Alternatywnie, jeśli automatyczne uzupełnienie nie jest możliwe lub wskazane (np. ze względów bezpieczeństwa), użytkownik ma możliwość łatwego wybrania tych danych z listy lub istniejącej już w systemie informacji (np. z profilu użytkownika).

Kryterium to ma zastosowanie do wszelkiego rodzaju danych, które nie są uznawane za szczególnie wrażliwe i których ponowne wprowadzanie nie jest uzasadnione np. ze względów bezpieczeństwa (np. ponowne wprowadzanie hasła lub numeru CVV karty płatniczej w celu potwierdzenia tożsamości).

Praktyczne wskazówki dotyczące zgodności

Aby spełnić kryterium 3.3.7, programiści i projektanci stron powinni stosować następujące techniki:

• Wykorzystanie atrybutu autocomplete: Dla standardowych pól formularzy (takich jak imię, nazwisko, adres, e-mail, telefon) należy używać atrybutu autocomplete z odpowiednimi wartościami (np. name, email, street-address, tel). Umożliwia to przeglądarkom automatyczne sugerowanie i uzupełnianie danych, jeśli użytkownik zapisał je wcześniej.
• Pamiętanie danych w sesji lub profilu użytkownika: W przypadku formularzy wieloetapowych lub procesów wymagających logowania, dane wprowadzone w jednym kroku powinny być przechowywane w sesji (dla niezalogowanych użytkowników) lub w profilu użytkownika (dla zalogowanych) i automatycznie uzupełniane w kolejnych polach.
• Opcje „Użyj tego samego co powyżej”: W scenariuszach, gdzie np. adres do wysyłki jest często taki sam jak adres do faktury, należy zapewnić prosty mechanizm (np. pole wyboru „Adres wysyłki jest taki sam jak adres rozliczeniowy”), który automatycznie skopiuje dane.
• Możliwość edycji danych: Automatycznie uzupełnione pola muszą być edytowalne, aby użytkownik mógł je skorygować, jeśli są nieaktualne lub nieprawidłowe.
• Przejrzysta informacja: Użytkownik powinien być świadomy, że dane są automatycznie uzupełniane. Można to osiągnąć poprzez odpowiednie etykietowanie lub delikatne wizualne wskazówki.

Przykłady implementacji

Poprawne implementacje

<!-- Krok 1: Adres rozliczeniowy -->
<form>
    <label for="billingName">Imię i nazwisko:</label>
    <input type="text" id="billingName" name="billingName" autocomplete="name" required>
    
    <label for="billingStreet">Ulica i numer:</label>
    <input type="text" id="billingStreet" name="billingStreet" autocomplete="address-line1" required>
    
    <label for="billingCity">Miasto:</label>
    <input type="text" id="billingCity" name="billingCity" autocomplete="address-level2" required>
    
    <!-- ... inne pola adresu rozliczeniowego -->
    
    <button type="submit">Dalej</button>
</form>

<!-- Krok 2: Adres wysyłki -->
<form>
    <h3>Adres wysyłki</h3>
    <input type="checkbox" id="sameAsBilling" checked>
    <label for="sameAsBilling">Użyj tego samego adresu co rozliczeniowy</label>
    
    <label for="shippingName">Imię i nazwisko:</label>
    <input type="text" id="shippingName" name="shippingName" autocomplete="name" value="[Wypełnione automatycznie z billingName]" required>
    
    <label for="shippingStreet">Ulica i numer:</label>
    <input type="text" id="shippingStreet" name="shippingStreet" autocomplete="address-line1" value="[Wypełnione automatycznie z billingStreet]" required>
    
    <label for="shippingCity">Miasto:</label>
    <input type="text" id="shippingCity" name="shippingCity" autocomplete="address-level2" value="[Wypełnione automatycznie z billingCity]" required>
    
    <!-- ... inne pola adresu wysyłki -->
    
    <button type="submit">Zakończ</button>
</form>

<script>
    // Przykład JavaScript do obsługi checkboxa "sameAsBilling"
    document.getElementById('sameAsBilling').addEventListener('change', function() {
        const billingName = "[Wartość z kroku 1]"; // Symulacja pobrania z sesji/bazy
        const billingStreet = "[Wartość z kroku 1]";
        const billingCity = "[Wartość z kroku 1]";

        if (this.checked) {
            document.getElementById('shippingName').value = billingName;
            document.getElementById('shippingStreet').value = billingStreet;
            document.getElementById('shippingCity').value = billingCity;
            // ... uzupełnij inne pola wysyłki
        } else {
            // Wyczyść pola lub pozwól użytkownikowi wpisać nowe
            document.getElementById('shippingName').value = '';
            document.getElementById('shippingStreet').value = '';
            document.getElementById('shippingCity').value = '';
        }
    });
</script>
Skopiuj tekst

<form>
    <label for="firstName">Imię:</label>
    <input type="text" id="firstName" name="firstName" autocomplete="given-name" required>
    
    <label for="lastName">Nazwisko:</label>
    <input type="text" id="lastName" name="lastName" autocomplete="family-name" required>
    
    <label for="email">Adres e-mail:</label>
    <input type="email" id="email" name="email" autocomplete="email" required>
    
    <label for="password">Hasło:</label>
    <input type="password" id="password" name="password" autocomplete="new-password" required>
    
    <button type="submit">Zarejestruj się</button>
</form>
Skopiuj tekst

Niepoprawne implementacje

<!-- Początkowy formularz -->
<form action="/send-message" method="post">
    <label for="name">Imię:</label>
    <input type="text" id="name" name="name" required> <!-- Brak autocomplete -->
    
    <label for="email">Adres e-mail:</label>
    <input type="email" id="email" name="email" required> <!-- Brak autocomplete -->
    
    <label for="message">Wiadomość:</label>
    <textarea id="message" name="message" required></textarea>
    
    <button type="submit">Wyślij</button>
</form>

<!-- Po błędzie walidacji (niepoprawne zachowanie) -->
<p style="color: red;">Wystąpił błąd. Prosimy sprawdzić formularz.</p>
<form action="/send-message" method="post">
    <label for="name">Imię:</label>
    <input type="text" id="name" name="name" value="" required> <!-- Pole puste, wymaga ponownego wpisania -->
    
    <label for="email">Adres e-mail:</label>
    <input type="email" id="email" name="email" value="" required> <!-- Pole puste, wymaga ponownego wpisania -->
    
    <label for="message">Wiadomość:</label>
    <textarea id="message" name="message"></textarea> <!-- Pole puste -->
    
    <button type="submit">Wyślij</button>
</form>
Skopiuj tekst

Najlepsze praktyki i typowe pułapki

• Bezpieczeństwo przede wszystkim: Nigdy nie uzupełniaj automatycznie wrażliwych danych, takich jak hasła (z wyjątkiem tych, które przeglądarka sama proponuje zapisać i uzupełnić), numery kart płatniczych (szczególnie CVV/CVC) czy inne poufne informacje, które wymagają potwierdzenia tożsamości.
• Zgoda użytkownika: W niektórych przypadkach (np. zapamiętywanie danych na dłużej niż sesja), warto poinformować użytkownika o zapamiętywaniu danych i zapytać o zgodę.
• Jasne etykiety: Upewnij się, że automatycznie uzupełnione pola są jasno oznaczone i że użytkownik wie, jakie dane zostały wprowadzone.
• Testowanie: Zawsze testuj formularze z włączonym i wyłączonym auto-uzupełnianiem w różnych przeglądarkach oraz z użyciem technologii wspomagających, aby upewnić się, że działa zgodnie z oczekiwaniami.
• Nie wymuszaj nieprawidłowego uzupełniania: Jeśli auto-uzupełnianie ma wprowadzić błędne dane, lepiej go nie stosować. Daj użytkownikowi kontrolę.
• Wartości domyślne: Kryterium dotyczy nie tylko danych wprowadzonych przez użytkownika, ale także tych, które system posiada z innych źródeł (np. z profilu). Dane te powinny być automatycznie wypełniane w formularzach.

Podsumowanie

Kryterium 3.3.7 „Zbędne wprowadzanie danych” jest kluczowym elementem w tworzeniu dostępnych i użytecznych interfejsów. Eliminacja konieczności ponownego wprowadzania tych samych informacji znacząco poprawia doświadczenie dla wszystkich użytkowników, a w szczególności dla osób z niepełnosprawnościami. Stosowanie atrybutu autocomplete, pamiętanie danych w sesji i oferowanie mechanizmów kopiowania danych to proste, ale bardzo efektywne sposoby na spełnienie tego ważnego wymagania WCAG 2.1.