Wróć do wszystkich kryteriów

3.3.7 Zbędne wprowadzanie (ang.) Redundant Entry

Specjalizacje:

  • Content Creator
  • Designer
  • Deweloper

Elementy:

  • Formularze
  • Uwierzytelnianie

Poziomy:

  • A

Spis treści

    Istota i cel kryterium

    Kryterium sukcesu 3.3.7 nakłada na twórców bezwzględny obowiązek projektowania wieloetapowych procesów cyfrowych w taki sposób, aby wyeliminować konieczność ponownego wpisywania informacji dostarczonych przez użytkownika lub dostarczonych mu w ramach tej samej aktywności.

    Głównym celem tej wytycznej jest drastyczne zredukowanie wysiłku poznawczego oraz przeciwdziałanie naturalnemu, stopniowemu zmęczeniu psychicznemu. Proces zapamiętywania i odtwarzania danych z pamięci krótkotrwałej rodzi stres, który u wielu osób wywołuje poważne bariery.

    Wdrożenie tego standardu oznacza, że to system przejmuje na siebie odpowiedzialność za przechowywanie kluczowych danych w obrębie jednego procesu.

    Definicja w j. angielskim

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

    Słownik pojęć

    Proces (ang.) process
    –

     seria działań użytkownika, w której każde działanie jest wymagane do pomyślnego ukończenia całej aktywności.

    Dostępne do wyboru (ang.) available to select
    –

    strategia techniczna, w której dane nie są automatycznie wpisywane w pole, lecz użytkownik może je łatwo wybrać (np. z listy rozwijanej, poprzez zaznaczenie pola wyboru lub skopiowanie bezpośrednio z widocznego elementu na tej samej stronie).

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

    • Użytkownicy z niepełnosprawnością poznawczą i zaburzeniami pamięci: Osoby mające trudności z zapamiętywaniem nowo wprowadzonych informacji zyskują stabilność. Brak konieczności ciągłego odtwarzania danych drastycznie zmniejsza zmęczenie psychiczne i eliminuje frustrację.
    • Użytkownicy z niepełnosprawnością ruchową: Dla osób obsługujących komputery za pomocą przełączników ((ang.) switch control) lub komend głosowych ((ang.) voice input), każde dodatkowe pole tekstowe to ogromna bariera fizyczna. Zmniejszenie liczby wymaganych wpisów diametralnie usprawnia interakcję.
    • Użytkownicy urządzeń mobilnych: Wprowadzanie tekstu na ekranach dotykowych jest wysoce podatne na błędy, dlatego automatyzacja i udostępnianie danych do wyboru to wyrazistość bez kompromisów dla każdego użytkownika mobilnego.
    • Osoby z trudnościami w pisaniu (np. dysleksja): Mniejsza liczba interakcji z klawiaturą bezpośrednio redukuje ryzyko pomyłek typograficznych, które mogłyby zablokować pomyślne wysłanie formularza.
    • Użytkownicy czytników ekranu: Szybsze przechodzenie przez formularze bez konieczności powtórnego odsłuchiwania i weryfikowania tych samych pól tekstowych za pomocą syntezatora mowy (NVDA).

    Zasady wdrażania i wymagania techniczne

    • Wszystkie automatycznie uzupełnione pola muszą pozostać w pełni edytowalne, aby użytkownik zachował ostateczną kontrolę nad poprawnością wysyłanych informacji.
    • Standard ten dotyczy procesów realizowanych w ramach jednej aktywności i nie zmusza do przechowywania danych pomiędzy osobnymi sesjami. Co ważne, proces może jednak obejmować różne domeny – jeśli ścieżka zakupowa przekierowuje użytkownika do zewnętrznego dostawcy płatności, to taki krok wciąż podlega opisywanej regule i dane nie mogą zostać zagubione.
    • Pamiętaj, że kryterium nie dotyczy sytuacji, w których użytkownik dostarcza informacje zupełnie inną metodą, na przykład poprzez przesłanie pliku z życiorysem (dokumentu w formacie PDF lub DOCX).
    • Zadbaj o pełne bezpieczeństwo danych i prywatność użytkowników. Podczas tymczasowego przechowywania danych osobowych ((ang.) Personally Identifiable Information – PII) w sesji aplikacji wdróż najwyższe standardy ochrony danych, aby zapobiec ich wyciekowi.
    • Zastosuj podejście oparte na automatycznym uzupełnianiu danych ((ang.) auto-population) lub udostępnij dane do natychmiastowego wyboru przez użytkownika.
    • Pamiętaj o kluczowej zasadzie technicznej: Domyślna funkcja autouzupełniania w przeglądarkach internetowych ( autocomplete) jest uznawana za niewystarczającą do spełnienia tego kryterium. To serwis internetowy (kod aplikacji) musi aktywnie dostarczyć zapisane informacje lub zapobiec ponownemu pytaniu o te same dane.
    • Jeżeli automatyczne wypełnienie pól nie jest pożądane, udostępnij informację na tej samej stronie w taki sposób, aby była domyślnie widoczna i blisko powiązana z polem wejściowym. Możesz umieścić ją również wewnątrz komponentu typu rozwiń/zwiń ((ang.) show/hide component).
    • Wykorzystaj mechanizmy takie jak pola wyboru (checkbox) o jednoznacznym działaniu, np. „Adres dostawy jest taki sam jak adres rozliczeniowy”, które natychmiastowo i bezbłędnie kopiują wartości między polami za pomocą skryptów JavaScript.

    Wyjątki i sytuacje szczególne

    Officialny standard W3C precyzuje trzy kluczowe sytuacje, w których ponowne żądanie wpisania danych jest w pełni dozwolone:

    • Istota procesu ((ang.) essential): Ponowne wprowadzenie danych jest absolutnie niezbędne do prawidłowego działania aplikacji, na przykład w grach edukacyjnych lub testach badających pamięć użytkownika, gdzie podpowiedź zniszczyłaby sens zadania.
    • Bezpieczeństwo treści ((ang.) security): Przepisy bezpieczeństwa wymagają ochrony wrażliwych ciągów znaków. Przykładem jest tworzenie nowego hasła – system celowo maskuje wpisywane znaki i ze względów bezpieczeństwa nie pozwala na ich podgląd ani kopiowanie, co wymusza na użytkowniku manualne powtórzenie wpisu w polu potwierdzenia w celu weryfikacji poprawności.
    • Nieaktualność danych: Ponowne wprowadzenie informacji jest dopuszczalne, jeżeli wcześniej podane przez użytkownika dane utraciły swoją ważność w trakcie trwania procesu.

    Przykłady implementacji

    Najczęstsze błędy

    • Czyszczenie formularza po błędzie walidacji: Najpoważniejsze uchybienie, w którym po odrzuceniu błędnego wpisu (np. niepoprawnego numeru karty kredytowej) strona odświeża się, a system całkowicie usuwa wszystkie pozostałe, bezbłędnie wprowadzone informacje.
    • Bierne poleganie wyłącznie na autouzupełnianiu przeglądarki: Brak jakichkolwiek mechanizmów zapamiętywania danych po stronie aplikacji, co zmusza użytkownika do ponownego wpisywania informacji, jeśli przeglądarka nie posiada zapisanych lokalnie danych użytkownika.
    • Gubienie danych w procesach wielodomenowych: Całkowita utrata kontekstu i wprowadzonych informacji po powrocie użytkownika z zewnętrznej bramki płatniczej do głównego serwisu w ramach tego samego procesu zakupowego.

    Najlepsze praktyki

    • Maksymalna synergia z atrybutem autocomplete: Choć samo autouzupełnianie przeglądarki nie zwalnia aplikacji z obowiązku pamiętania danych, zawsze łącz mechanizmy serwera z poprawnym kodowaniem pól HTML. Wdróż precyzyjne wartości atrybutu autocomplete dla wszystkich standardowych komponentów. Zapewnisz w ten sposób użytkownikom potężną, podwójną linię wsparcia – aplikacyjną oraz przeglądarkową – co całkowicie eliminuje ryzyko pomyłek typograficznych i skraca czas interakcji do absolutnego minimum.
    • Wstępne wypełnienie w wyszukiwarkach ((ang.) pre-fill): Na stronie z wynikami wyszukiwania automatycznie uzupełniaj pole tekstowe frazą, którą użytkownik wpisał w poprzednim kroku, ułatwiając mu modyfikację zapytania.
    • Projektowanie z myślą o prywatności: Dbaj o to, by mechanizmy zapamiętywania danych tymczasowych nie eksponowały bezwzględnie danych osobowych w miejscach publicznie dostępnych.
    • Bliskie sąsiedztwo danych: Udostępniając opcję kopiowania lub wyboru wcześniej podanych danych, umieszczaj je w bezpośrednim sąsiedztwie pola, do którego mają trafić, aby zredukować potrzebę przeszukiwania wzrokowego strony.

    Metody testowania

    • Testowanie manualne: Przejdź osobiście przez kompletną ścieżkę wieloetapowego procesu i skrupulatnie zweryfikuj, czy na kolejnych etapach system nie zmusza Cię do ponownego, zbędnego wpisywania informacji podanych wcześniej. Upewnij się, że aplikacja nie generuje nadmiarowych kroków wymagających powtórnego wprowadzania tych samych danych, co odcina użytkowników od płynnej interakcji.
    • Narzędzie deweloperskie (ang.) Developer Tools: Otwórz drzewo DOM i przeanalizuj, czy pola formularzy w wieloetapowych procesach poprawnie przechowują wartości sesyjne lub czy skrypty odpowiedzialne za kopiowanie danych działają bezbłędnie.
    • (ang.) IBM Equal Access Toolkit: Przeprowadź zautomatyzowany audyt całego procesu, sprawdzając, czy dynamicznie wstawiane dane i stany kontrolek (np. pól wyboru kopiujących dane) są prawidłowo interpretowane przez technologie wspomagające.
    • NVDA: Przejdź proces za pomocą czytnika ekranu, symulując celowe wywołanie błędu walidacji. Zweryfikuj, czy syntezator mowy potwierdza zachowanie poprawnie wpisanych wcześniej informacji i czy nie zostajesz zmuszony do chaotycznej nawigacji i ponownego uzupełniania pustych pól.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 6 symulacji formularzy i procesów wieloetapowych. Oceń, które implementacje spełniają kryterium 3.3.7, a które zmuszają użytkownika do ponownego wpisywania już podanych informacji.

    Jak to sprawdzić?

    1. Przejdź każdy scenariusz do końca (wyślij formularz, przejdź do kolejnego kroku, wywołaj błąd walidacji).
    2. Sprawdź, czy dane z wcześniejszego kroku są automatycznie uzupełniane albo dostępne do wyboru (checkbox, przyciski, lista).
    3. Oceń wyjątki: bezpieczeństwo (np. potwierdzenie hasła) oraz istotę procesu (np. test pamięci).

    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, NVDA

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

    #1 BŁĄD

    Problem: Po błędzie walidacji PESEL formularz czyści także poprawnie wpisane imię i nazwisko.
    Dlaczego: To jeden z najczęstszych błędów wobec 3.3.7 — użytkownik musi ponownie wprowadzać informacje, które podał już poprawnie w tej samej aktywności.
    Naprawa: Zachowaj poprawne wartości po błędzie (po stronie klienta lub przez ponowne wypełnienie pól po odpowiedzi serwera). Czyść wyłącznie pole z błędem albo zostaw wszystkie wartości i pokaż komunikat.

    #2 BŁĄD

    Problem: W kroku 2 dane z kroku 1 nie są ani uzupełnione, ani widoczne, ani dostępne do wyboru — użytkownik musi odtworzyć je z pamięci.
    Dlaczego: Kryterium 3.3.7 wymaga, by wcześniej podane informacje były automatycznie wypełnione albo łatwo dostępne do wyboru (np. pole wyboru, lista, kopiowanie z widocznego elementu na tej samej stronie). Tu nie ma żadnej z tych opcji.
    Naprawa: Dodaj pole wyboru „Adres rozliczeniowy taki sam…”, wstępnie wypełnij pola edytowalnymi danymi albo pokaż je na stronie w sposób umożliwiający wybór/skopiowanie.

    #3 DOBRZE

    Dlaczego: Pole wyboru kopiuje dane z kroku 1 do pól rozliczeniowych. Użytkownik nie musi przepisywać informacji — wybiera wcześniej podane dane jednym działaniem, a pola pozostają edytowalne.

    #4 DOBRZE

    Dlaczego: Ponowne wpisanie hasła jest dozwolone na mocy wyjątku bezpieczeństwa. Ze względów bezpieczeństwa znaki są maskowane i nie wolno ich kopiować ani podpowiadać; potwierdzenie wpisu weryfikuje poprawność.

    #5 DOBRZE

    Dlaczego: Zastosowano strategię Dostępne do wyboru (ang.) available to select: wcześniej wprowadzone nazwy departamentów są dostępne jako przyciski wyboru. Kliknięcie uzupełnia pole bez ponownego wpisywania z pamięci.

    #6 DOBRZE

    Dlaczego: Ponowne wprowadzenie kodu jest tu istotne dla celu ćwiczenia pamięci ((ang.) essential). Podpowiedź lub auto-uzupełnienie zniszczyłoby sens procesu, więc wyjątek W3C zezwala na żądanie ponownego wpisu.

    Źródła

    Dodatkowe linki

     

    Wróć do wszystkich kryteriów