Postrzegalność · Poziom AA

1.3.5 Określenie celu danych wejściowych

Cel typowych pól formularzy, takich jak imię, e-mail albo adres, musi być określony w kodzie, żeby przeglądarki i technologie wspomagające mogły oferować wsparcie, na przykład autouzupełnianie.

Krótko

Jeśli formularz pyta o typowe dane użytkownika, kod powinien jasno wskazywać cel pola, na przykład `given-name`, `email` albo `postal-code`.

Problem w praktyce

Formularz ma widoczne etykiety: „Imię”, „Nazwisko”, „E-mail”, „Telefon”, „Ulica” i „Kod pocztowy”. Osoba widząca rozumie, co wpisać, ale przeglądarka i technologie wspomagające nie dostają informacji, że to są konkretne dane o użytkowniku.

Wtedy autouzupełnianie może podpowiadać niewłaściwe dane, nie podpowiadać nic albo zgadywać na podstawie etykiety. Dla użytkownika oznacza to więcej pisania, większe ryzyko pomyłki i trudniejszy formularz.

To kryterium nie mówi, że każde pole formularza musi mieć `autocomplete`. Dotyczy pól, które zbierają dane o użytkowniku i których cel znajduje się w rozpoznawanej liście celów danych wejściowych.

Kogo to dotyczy

  • Osób z trudnościami poznawczymi, które łatwiej rozpoznają pole, gdy przeglądarka lub technologia wspomagająca może użyć stałego znaczenia pola.
  • Osób z trudnościami pamięci, które nie muszą za każdym razem wpisywać tych samych danych ręcznie.
  • Osób z dysleksją albo trudnościami językowymi, dla których stały cel pola może być bardziej zrozumiały niż sama etykieta.
  • Osób z niepełnosprawnością ruchową, dla których mniej pisania oznacza mniej wysiłku.
  • Osób niewidomych i słabowidzących, które korzystają z czytników ekranu, autouzupełniania albo dodatkowych narzędzi do rozpoznawania pól.
  • Wszystkich użytkowników w długich formularzach zakupowych, rekrutacyjnych, medycznych i urzędowych.

Dobry przykład

Dobry formularz ma widoczne etykiety i poprawne wartości `autocomplete`. Etykieta mówi użytkownikowi, co wpisać. `autocomplete` mówi przeglądarce i technologiom wspomagającym, jaki jest programowy cel pola.

  • Pole imienia ma `autocomplete="given-name"`.
  • Pole nazwiska ma `autocomplete="family-name"`.
  • Pole e-mail użytkownika ma `autocomplete="email"`.
  • Pole telefonu użytkownika ma `autocomplete="tel"`.
  • Adres używa wartości takich jak `street-address`, `address-level2`, `postal-code` i `country-name`.
  • Adres dostawy i adres rozliczeniowy są rozróżnione przez tokeny `shipping` i `billing`, jeśli formularz naprawdę zbiera oba adresy.

Zły przykład

Zły wzorzec zostawia cel pola do zgadywania albo podaje cel błędnie. Formularz może wyglądać poprawnie, ale kod nie przekazuje właściwej informacji.

  • Pola danych osobowych nie mają `autocomplete`, mimo że zbierają typowe dane użytkownika.
  • Autor wpisuje wymyślone wartości, na przykład `autocomplete="user-email"` albo `autocomplete="kod-pocztowy"`.
  • Pole „Imię” ma zbyt ogólne `autocomplete="name"` zamiast `given-name`.
  • Pole „Nazwisko” ma `autocomplete="name"` zamiast `family-name`.
  • Kilka pól o różnym celu ma tę samą wartość `autocomplete`.
  • Placeholder jest jedyną informacją o celu pola.
  • Autouzupełnianie jest wyłączone dla danych użytkownika bez dobrego powodu.

Przykłady kodu

Kod — HTML

<form>
  <label for="first-name">
    Imię
  </label>
  <input
    id="first-name"
    name="first-name"
    type="text"
    autocomplete="given-name"
  >

  <label for="last-name">
    Nazwisko
  </label>
  <input
    id="last-name"
    name="last-name"
    type="text"
    autocomplete="family-name"
  >

  <label for="contact-email">
    Adres e-mail
  </label>
  <input
    id="contact-email"
    name="contact-email"
    type="email"
    autocomplete="email"
  >

  <label for="contact-phone">
    Telefon
  </label>
  <input
    id="contact-phone"
    name="contact-phone"
    type="tel"
    autocomplete="tel"
  >
</form>

Ten przykład ma widoczne etykiety i poprawnie wskazany cel pól. `type="email"` i `type="tel"` opisują rodzaj danych, a `autocomplete` wskazuje, że chodzi o e-mail i telefon użytkownika.

Kod — HTML

<form>
  <label for="address">
    Ulica i numer
  </label>
  <textarea
    id="address"
    name="address"
    autocomplete="street-address"
  ></textarea>

  <label for="city">
    Miejscowość
  </label>
  <input
    id="city"
    name="city"
    type="text"
    autocomplete="address-level2"
  >

  <label for="postal-code">
    Kod pocztowy
  </label>
  <input
    id="postal-code"
    name="postal-code"
    type="text"
    autocomplete="postal-code"
  >

  <label for="country">
    Kraj
  </label>
  <input
    id="country"
    name="country"
    type="text"
    autocomplete="country-name"
  >
</form>

Adres użytkownika ma wartości z listy rozpoznawanych celów. W polskich formularzach `address-level2` najczęściej odpowiada miejscowości.

Kod — HTML

<form>
  <label for="name">
    Imię
  </label>
  <input
    id="name"
    name="name"
    type="text"
    autocomplete="name"
  >

  <label for="email">
    Adres e-mail
  </label>
  <input
    id="email"
    name="email"
    type="email"
    autocomplete="user-email"
  >
</form>

To zły przykład. Pole imienia używa zbyt ogólnej wartości `name`, a `user-email` jest wymyśloną wartością, której przeglądarka nie rozpozna jako celu z ustalonej listy.

Kod — HTML

<fieldset>
  <legend>Adres dostawy</legend>

  <label for="shipping-street">
    Ulica i numer
  </label>
  <textarea
    id="shipping-street"
    name="shipping-street"
    autocomplete="shipping street-address"
  ></textarea>

  <label for="shipping-postal-code">
    Kod pocztowy
  </label>
  <input
    id="shipping-postal-code"
    name="shipping-postal-code"
    type="text"
    autocomplete="shipping postal-code"
  >
</fieldset>

<fieldset>
  <legend>Adres rozliczeniowy</legend>

  <label for="billing-street">
    Ulica i numer
  </label>
  <textarea
    id="billing-street"
    name="billing-street"
    autocomplete="billing street-address"
  ></textarea>

  <label for="billing-postal-code">
    Kod pocztowy
  </label>
  <input
    id="billing-postal-code"
    name="billing-postal-code"
    type="text"
    autocomplete="billing postal-code"
  >
</fieldset>

Tokeny `shipping` i `billing` pomagają rozróżnić adres dostawy i adres rozliczeniowy. To ma sens tylko wtedy, gdy formularz rzeczywiście zbiera oba rodzaje danych.

Przykład graficzny

Źle

Imię autocomplete: brak
E-mail autocomplete: brak

Etykieta jest widoczna, ale kod nie mówi, jaki jest cel pola.

Przeglądarka i narzędzia wspomagające muszą zgadywać.

Ryzykownie

Imię autocomplete: name
E-mail autocomplete: user-email

Cel jest zbyt ogólny albo wartość jest wymyślona.

Pole wygląda dobrze, ale programowo nadal jest nieprecyzyjne.

Dobrze

Imię autocomplete: given-name
E-mail autocomplete: email

Widoczna etykieta i programowy cel pola działają razem.

Autouzupełnianie i technologie wspomagające mają jasny sygnał.

To jest statyczny schemat edukacyjny. Pokazuje różnicę między samą etykietą wizualną a programowo określonym celem pola.

Jak sprawdzić

  1. Znajdź formularze, które zbierają dane o użytkowniku, na przykład imię, nazwisko, e-mail, telefon albo adres.
  2. Sprawdź, czy każde takie pole ma widoczną etykietę. Pamiętaj: `autocomplete` nie zastępuje etykiety.
  3. Sprawdź, czy cel pola znajduje się na liście rozpoznawanych celów danych wejściowych.
  4. Jeśli tak, sprawdź, czy pole ma poprawną wartość `autocomplete`.
  5. Porównaj etykietę z wartością `autocomplete`, na przykład „Imię” z `given-name` i „Nazwisko” z `family-name`.
  6. Sprawdź, czy nie użyto wymyślonych wartości, takich jak `user-email`, `kod-pocztowy` albo `phone-number`.
  7. Sprawdź, czy wartości nie są zbyt ogólne, na przykład `name` przy osobnych polach imienia i nazwiska.
  8. Jeśli formularz ma osobny adres dostawy i rozliczeniowy, sprawdź, czy użyto właściwych tokenów `shipping` i `billing`.
  9. Nie oceniaj zgodności tylko po tym, czy przeglądarka faktycznie podpowiada dane. Autouzupełnianie zależy też od ustawień użytkownika.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • brak atrybutu `autocomplete` przy części pól danych użytkownika,
  • niepoprawne albo nieznane wartości `autocomplete`,
  • część pól, w których `autocomplete` nie pasuje do typu pola,
  • część przypadków zduplikowanych albo niespójnych wartości.

Automat nie oceni pewnie

  • czy pole naprawdę zbiera dane o użytkowniku, czy o innej osobie,
  • czy `name` jest właściwe, czy trzeba użyć `given-name` i `family-name`,
  • czy adres jest adresem dostawy, rozliczeniowym czy innym adresem,
  • czy wyłączenie autouzupełniania ma uzasadnienie,
  • czy widoczna etykieta i instrukcja są zrozumiałe dla użytkownika.

Typowe błędy

  • Brak `autocomplete` w długim formularzu danych osobowych.
  • Wymyślone wartości, na przykład `autocomplete="user-phone"` albo `autocomplete="nip"`.
  • `autocomplete="name"` przy polu, które zbiera tylko imię.
  • `autocomplete="email"` przy polu, które zbiera e-mail innej osoby, a nie użytkownika formularza.
  • To samo `autocomplete` przy polach o różnych celach, na przykład adres dostawy i adres rozliczeniowy bez rozróżnienia.
  • Placeholder jako jedyna etykieta pola.
  • Wyłączanie `autocomplete` w całym formularzu „na wszelki wypadek”.
  • Zakładanie, że `type="email"` albo `type="tel"` wystarcza do spełnienia 1.3.5.

Powiązane kryteria