Poziom
AA
Od wersji
WCAG 2.1
Pozycje
12 / 193
/ Kryterium WCAG

1.3.5 Określenie pożądanej wartości

Pole formularza, które pyta o dane samego użytkownika, musi w kodzie mówić, jakiej informacji oczekuje, żeby przeglądarka mogła ją wpisać.

/ Czego wymaga

Gdy formularz pyta o imię i nazwisko, e-mail, numer telefonu, adres albo dane karty osoby, która go wypełnia, kod musi mówić, do czego służy każde pole. W HTML robi to atrybut autocomplete z wartością z zamkniętej listy, na przykład email albo postal-code. Przeglądarka może wtedy wypełnić pole z zapisanego profilu, co oszczędza pisania osobom z trudnościami ruchowymi lub z pamięcią, a inne narzędzia mogą pokazać obok pola znajomą ikonę.

Kryterium obejmuje wyłącznie pola zbierające informacje o osobie wypełniającej formularz i tylko cele z listy w WCAG 2.1, która pochodzi z tokenów autouzupełniania HTML. Pole wyszukiwania, pole wiadomości albo adres osoby obdarowywanej są poza nim. Pole na własny e-mail użytkownika bez atrybutu autocomplete nie przechodzi, podobnie jak to samo pole z wartością off albo wymyśloną, na przykład phone. Kryterium stosuje się tam, gdzie technologia pozwala określić cel pola, a HTML na to pozwala.

/ Jak strony go nie spełniają

  • Pole na imię, e-mail, telefon lub adres nie ma atrybutu autocomplete.
  • Atrybut ma wartość off na polu zbierającym dane użytkownika, zwykle po to, żeby wyciszyć podpowiedzi przeglądarki.
  • Wartość nie jest poprawnym tokenem, na przykład phone zamiast tel albo zip zamiast postal-code.
  • Token nie pasuje do pola, na przykład autocomplete="name" na polu typu email.
  • Własna kontrolka zbudowana z elementów div zbiera dane osobowe i w ogóle nie może mieć atrybutu autocomplete.

/ Jak sprawdzić samodzielnie

  1. Wypisz wszystkie pola pytające o dane odwiedzającego: w rejestracji, logowaniu, koszyku, formularzu kontaktowym i na koncie.
  2. Zbadaj każde z nich w narzędziach deweloperskich i odczytaj atrybut autocomplete. Porównaj wartość z listą celów pól w WCAG 2.1 albo z tokenami autouzupełniania w standardzie HTML.
  3. Zapisz w ustawieniach autouzupełniania przeglądarki testowy adres i testową kartę, odśwież formularz i zobacz, które pola przeglądarka proponuje wypełnić i czy do każdego trafia właściwa wartość.
  4. Sprawdź pola hasła: pole logowania powinno mieć current-password, a pole w rejestracji new-password.

/ Jak to naprawić

  • Dodaj właściwy token do każdego elementu input, select i textarea: given-name, family-name, email, tel, street-address, postal-code, country, bday.
  • W formularzach płatności użyj cc-name, cc-number, cc-exp i cc-csc.
  • Usuń autocomplete="off" z pól, które zbierają dane samego użytkownika.
  • Gdy na stronie są dwa adresy, poprzedź tokeny słowem shipping albo billing, na przykład autocomplete="shipping postal-code".
  • Buduj te pola z natywnych elementów input i ustaw pasujący typ, na przykład type="email" lub type="tel".

/ Co sprawdza nasz skaner

Skan na wyrenderowanej stronie sprawdza widoczne pola tekstowe, listy wyboru i pola textarea bez atrybutu autocomplete i zgłasza te, których name lub id zawiera słowo wskazujące na dane osobowe, na przykład name, email, phone, address, city, postal, country, card albo birth. Nie czyta etykiety, więc pole o neutralnej nazwie zostanie pominięte. Nie sprawdza też samej wartości: dowolny autocomplete, także off albo błędny token, przechodzi.

/ Kto je łamie, według naszych pomiarów

Zmierzone podmioty łamiące to kryterium, najwięcej wystąpień na górze
PodmiotSektorWystąpieniaWynik
Bostoncity · US26
Chicago Transit Authoritytransport · US24
Szczecincity · PL22
Bundesnetzagenturgovernment · DE19
Bundeszentrale für politische Bildunggovernment · DE110
Elblągcity · PL120
Gliwicecity · PL113
Komisja Nadzoru Finansowegogovernment · PL117
Münchencity · DE122
Polski Instytut Sztuki Filmowejculture · PL17
Prezydent RPgovernment · PL115
Wrocławcity · PL12

Jedna strona na podmiot, mierzona automatycznie w tygodniowym cyklu. Jeśli podmiot coś naprawił od ostatniego pomiaru, zmiana będzie widoczna przy następnym, a każdy podmiot może odpowiedzieć na swojej stronie.

/ Pytania o to kryterium

Które pola formularza muszą mieć atrybut autocomplete?

Pola zbierające informacje o osobie wypełniającej formularz, jeśli ich cel znajduje się na liście celów pól w WCAG 2.1: imię i nazwisko, e-mail, telefon, części adresu pocztowego, data urodzenia, nazwa użytkownika, hasła, dane karty płatniczej i kilka innych. Pola na cokolwiek innego, na przykład frazę wyszukiwania, treść wiadomości albo dane innej osoby, są poza zakresem 1.3.5.

Czy autocomplete="off" narusza WCAG?

Na polu zbierającym dane użytkownika w celu z listy tak: z kodu nie da się już ustalić przeznaczenia pola, a właśnie tego wymaga 1.3.5. Na innych polach to nie jest sprawa WCAG. Przeglądarki i tak często ignorują wartość off w polach logowania, więc rzadko daje ona zamierzony efekt. Bezpieczniejszym wyborem jest konkretny token.

Jakie są poprawne wartości autocomplete dla imienia, e-maila i telefonu?

Dla pełnego imienia i nazwiska użyj name, a dla osobnych pól given-name i family-name. Adres e-mail to email, numer telefonu to tel, a nie phone. Kod pocztowy to postal-code, ulica to street-address albo address-line1, miasto to address-level2, a kraj to country lub country-name. Pełna lista znajduje się w standardzie HTML, w części o autouzupełnianiu.