- Poziom
- AA
- Od wersji
- WCAG 2.1
- Pozycje
- 12 / 193
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
- Wypisz wszystkie pola pytające o dane odwiedzającego: w rejestracji, logowaniu, koszyku, formularzu kontaktowym i na koncie.
- 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.
- 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ść.
- 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
| Podmiot | Sektor | Wystąpienia | Wynik |
|---|---|---|---|
| Boston | city · US | 2 | 6 |
| Chicago Transit Authority | transport · US | 2 | 4 |
| Szczecin | city · PL | 2 | 2 |
| Bundesnetzagentur | government · DE | 1 | 9 |
| Bundeszentrale für politische Bildung | government · DE | 1 | 10 |
| Elbląg | city · PL | 1 | 20 |
| Gliwice | city · PL | 1 | 13 |
| Komisja Nadzoru Finansowego | government · PL | 1 | 17 |
| München | city · DE | 1 | 22 |
| Polski Instytut Sztuki Filmowej | culture · PL | 1 | 7 |
| Prezydent RP | government · PL | 1 | 15 |
| Wrocław | city · PL | 1 | 2 |
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.
