3.3.7 Powtarzające się wpisy

Krótko

Nie każ użytkownikowi ponownie wpisywać tej samej informacji, jeśli system już ją zna i może bezpiecznie użyć jej ponownie.

Problem w praktyce

Użytkownik wypełnia proces zakupowy, zgłoszenie albo formularz w kilku krokach. Najpierw podaje adres dostawy, dane kontaktowe, numer sprawy albo adres e-mail, a po chwili system pyta o to samo jeszcze raz.

Powtarzanie danych zwiększa ryzyko pomyłki i niepotrzebnie obciąża użytkownika. Problem widać szczególnie wtedy, gdy użytkownik musi kopiować adres między krokami, ponownie wpisywać numer sprawy, powtarzać e-mail w kilku sekcjach albo uzupełniać te same dane osoby kontaktowej w tym samym procesie.

Kogo to dotyczy

• Osób z trudnościami poznawczymi i pamięciowymi, które mogą nie pamiętać dokładnie wcześniej wpisanej informacji.
• Osób z dysleksją, które mogą popełnić literówkę przy przepisywaniu.
• Osób z niepełnosprawnością ruchową, dla których każde dodatkowe pole oznacza więcej pracy.
• Osób korzystających z czytników ekranu, które muszą przechodzić przez kolejne kroki liniowo.
• Osób korzystających ze sterowania głosem, przełączników albo klawiatury.
• Wszystkich użytkowników w długich formularzach, procesach zakupowych, zgłoszeniach i panelach klienta.

Dobry przykład

• Przy fakturze użytkownik może zaznaczyć „Adres do faktury taki sam jak adres dostawy”.
• Dane kontaktowe podane w pierwszym kroku są przeniesione do kolejnego kroku.
• Użytkownik może wybrać wcześniej podany adres z listy.
• Skopiowane dane można edytować, jeśli różnią się od poprzednich.
• Interfejs jasno mówi, skąd pochodzą dane, na przykład „Używamy adresu dostawy z kroku 1”.

Zły przykład

• Formularz każe ponownie ręcznie wpisać adres do faktury, mimo że adres dostawy jest taki sam.
• Nie ma opcji użycia wcześniej podanych danych.
• Użytkownik musi ponownie wpisać numer sprawy w dalszym kroku procesu.
• W jednym procesie pojawia się kilka takich samych pól e-mail, telefonu albo adresu.
• System oczekuje, że użytkownik sam skopiuje dane z poprzedniego kroku.

Przykłady kodu

<section aria-labelledby="billing-address-heading">
  <h2 id="billing-address-heading">
    Adres do faktury
  </h2>

  <p>
    Adres dostawy z poprzedniego kroku:
    ul. Prosta 10, 00-001 Warszawa.
  </p>

  <label>
    <input
      type="checkbox"
      name="use-delivery-address"
      checked
    >
    Adres do faktury taki sam jak adres dostawy
  </label>
</section>

<fieldset>
  <legend>Wybierz adres do faktury</legend>

  <label>
    <input
      type="radio"
      name="billing-address"
      value="delivery-address"
      checked
    >
    Użyj adresu dostawy: ul. Prosta 10, Warszawa
  </label>

  <label>
    <input
      type="radio"
      name="billing-address"
      value="new-address"
    >
    Wpisz inny adres do faktury
  </label>
</fieldset>

<h2>Adres do faktury</h2>
<label for="billing-street">
  Ulica i numer
</label>
<input
  id="billing-street"
  name="billing-street"
  autocomplete="street-address"
>

<label for="billing-city">
  Miasto
</label>
<input
  id="billing-city"
  name="billing-city"
  autocomplete="address-level2"
>

<section aria-labelledby="contact-summary-heading">
  <h2 id="contact-summary-heading">
    Dane kontaktowe
  </h2>

  <p>
    Przenieśliśmy dane kontaktowe z kroku 1.
    Możesz je sprawdzić i edytować.
  </p>

  <dl>
    <dt>Adres e-mail</dt>
    <dd>anna@example.com</dd>

    <dt>Telefon</dt>
    <dd>500 100 200</dd>
  </dl>

  <a href="/zamowienie/kontakt">
    Edytuj dane kontaktowe
  </a>
</section>

Przykład graficzny

To statyczny schemat procesu. Pokazuje, czy użytkownik musi ponownie wpisać te same dane, czy może użyć informacji podanych wcześniej.

Jak sprawdzić

1. Przejdź cały proces krok po kroku, na przykład zakup, zgłoszenie albo rejestrację.
2. Zapisz informacje, które użytkownik podaje w kolejnych krokach.
3. Sprawdź, czy ta sama informacja jest wymagana ponownie w tym samym procesie.
4. Jeśli tak, sprawdź, czy system automatycznie ją uzupełnia albo udostępnia do wyboru.
5. Sprawdź, czy użytkownik może edytować dane przeniesione z wcześniejszego kroku.
6. Sprawdź, czy interfejs jasno mówi, skąd pochodzą przeniesione dane.
7. Oceń, czy ponowne wpisanie mieści się w wyjątku: jest niezbędne, wymagane dla bezpieczeństwa albo wcześniejsza informacja straciła ważność.
8. Przejdź proces klawiaturą i czytnikiem ekranu.

Co sprawdzi automat, a czego nie

Automat może wykryć część powtarzających się pól, podobne etykiety albo brak poprawnej struktury formularza. Może też pomóc znaleźć pola z podobnymi nazwami technicznymi.

Automat zwykle nie oceni, czy dwa pola naprawdę proszą o tę samą informację, czy są częścią tego samego procesu, czy ponowne wpisanie jest uzasadnione bezpieczeństwem i czy użytkownik ma praktyczną możliwość wyboru wcześniej podanych danych.

Typowe błędy

• Oddzielne ręczne wpisywanie adresu dostawy i identycznego adresu faktury.
• Powtarzanie adresu e-mail w kilku krokach procesu.
• Wymaganie numeru sprawy w każdym formularzu w tym samym zgłoszeniu.
• Brak checkboxa lub wyboru „użyj wcześniej podanych danych”.
• Automatyczne skopiowanie danych bez informacji, że można je zmienić.
• Kasowanie danych po błędzie i wymaganie wpisania ich od początku.
• Mylenie tego kryterium z samym `autocomplete`; przeglądarka może pomagać, ale to strona ma uniknąć niepotrzebnego powtarzania.

Powiązane kryteria

• 1.3.5 Określenie celu danych wejściowych - gdy pola danych osobowych powinny mieć rozpoznawalny cel, na przykład dla autouzupełniania.
• 3.3.2 Etykiety lub instrukcje - gdy użytkownik musi wiedzieć, co wpisać w polu.
• 3.3.4 Zapobieganie błędom (prawne, finansowe, dane) - gdy ważne działanie wymaga zabezpieczenia przed skutkiem błędu.
• 3.3.6 Zapobieganie błędom (wszystkie) - szersze zabezpieczanie formularzy przed błędnym wysłaniem danych.
• 4.1.3 Komunikaty o stanie - gdy użytkownik powinien dostać informację o przeniesieniu, zapisaniu albo zmianie danych bez utraty kontekstu.

Źródła

• WCAG 2.2: 3.3.7 Redundant Entry (otwiera się w nowym oknie).
• Understanding WCAG 3.3.7: Redundant Entry (otwiera się w nowym oknie).
• How to Meet WCAG 3.3.7: Redundant Entry (otwiera się w nowym oknie).
• G221: Provide data from a previous step in a process (otwiera się w nowym oknie).