WCAG 1.3.5: Określanie celu pola

Kryterium sukcesu WCAG 1.3.5 „Określanie celu pola” (ang. Identify Input Purpose) jest częścią wytycznych dla dostępności treści internetowych (WCAG) 2.1 na poziomie AA. Jego głównym celem jest umożliwienie przeglądarkom, wtyczkom oraz innym technologiom wspomagającym zrozumienia przeznaczenia pól formularzy. Dzięki temu użytkownicy mogą łatwiej i efektywniej wprowadzać dane, zwłaszcza gdy korzystają z funkcji autouzupełniania lub innych narzędzi ułatwiających interakcję.

Wprowadzenie do WCAG 1.3.5

To kryterium wymaga, aby cel każdego pola w formularzu zbierającego dane użytkownika był możliwy do ustalenia programowo. W praktyce oznacza to, że deweloperzy powinni używać atrybutu autocomplete w elementach input, textarea i select, aby jasno zdefiniować typ informacji, jakiej oczekuje dane pole. Standard HTML oferuje szeroki zakres predefiniowanych wartości dla atrybutu autocomplete, które odpowiadają typowym typom danych użytkownika, takim jak imię, adres e-mail, numer telefonu czy adres pocztowy.

Poprawne zastosowanie tego kryterium przynosi wymierne korzyści, ponieważ pozwala przeglądarkom na automatyczne wypełnianie formularzy danymi użytkownika zapisanymi w profilu przeglądarki. Jest to szczególnie pomocne dla osób, które mają trudności z pisaniem, zapamiętywaniem informacji, czy też korzystają z urządzeń mobilnych, gdzie wprowadzanie danych może być uciążliwe.

Dlaczego to jest ważne? (Korzyści dla dostępności)

Zgodność z WCAG 1.3.5 ma znaczący wpływ na użyteczność i dostępność formularzy dla szerokiej grupy użytkowników:

  • Dla osób z niepełnosprawnościami poznawczymi: Ułatwia zrozumienie, jakiego rodzaju dane są oczekiwane w danym polu, zmniejszając obciążenie poznawcze i ryzyko błędów.
  • Dla osób z dysleksją: Automatyczne wypełnianie formularzy redukuje potrzebę ręcznego wprowadzania tekstu, co może być trudne i czasochłonne.
  • Dla osób z wadami wzroku (słabo widzących): Oprogramowanie powiększające lub czytniki ekranu mogą skorzystać z programowo określonego celu, aby lepiej informować użytkownika o przeznaczeniu pola, a także udostępniać funkcje autouzupełniania.
  • Dla użytkowników wprowadzających dane głosowo: Technologie rozpoznawania mowy mogą efektywniej sterować formularzami, jeśli ich cel jest jasno określony. Użytkownik może powiedzieć np. „wypełnij imię”, a system wskaże odpowiednie pole.
  • Dla użytkowników urządzeń mobilnych: Na małych ekranach i z klawiaturami ekranowymi wprowadzanie danych jest często uciążliwe. Autouzupełnianie znacznie przyspiesza i ułatwia ten proces.
  • Ogólna użyteczność: Każdy użytkownik ceni sobie oszczędność czasu i brak konieczności wielokrotnego wpisywania tych samych informacji.

Wymagania kryterium sukcesu 1.3.5

Kryterium sukcesu 1.3.5 jest sformułowane w następujący sposób:

  • Warunek główny: W przypadku pól formularza zbierających informacje o użytkowniku, cel tego pola musi być możliwy do ustalenia programowo, co pozwala na automatyczne wypełnianie przez przeglądarkę lub technologię wspomagającą.
  • Wyjątki: Nie ma konieczności określania celu pola, jeśli:
    • Cel pola nie jest związany z danymi o użytkowniku (np. pole wyszukiwania ogólnego).
    • Ujawnienie celu pola mogłoby zagrozić bezpieczeństwu lub prywatności użytkownika (np. pole do wprowadzenia nowego hasła, gdzie przeglądarka nie powinna autouzupełniać poprzedniego).
    • Pole wymaga specyficznych, niewspieranych przez autocomplete wartości (np. niestandardowe ID klienta, które nie ma swojego tokena w standardzie HTML).

Głównym mechanizmem do spełnienia tego kryterium jest użycie atrybutu autocomplete z odpowiednimi wartościami (tokenami), zdefiniowanymi w standardzie HTML5 w sekcji „Autofilling form controls: the autocomplete attribute”.

Praktyczne wytyczne dotyczące zgodności

Aby spełnić kryterium 1.3.5, należy zastosować atrybut autocomplete do odpowiednich pól formularza.

  • Użycie atrybutu autocomplete: Dodaj atrybut autocomplete="[token]" do elementów <input>, <textarea> i <select>.
  • Lista wartości autocomplete: Wybierz odpowiedni token z listy predefiniowanych wartości, takich jak:
    • name (pełne imię i nazwisko)
    • honorific-prefix (tytuł, np. Dr., Pan)
    • given-name (imię)
    • family-name (nazwisko)
    • email (adres e-mail)
    • tel (pełny numer telefonu)
    • street-address (adres ulicy)
    • address-line1, address-line2, address-line3 (linie adresu)
    • address-level1 (województwo/stan), address-level2 (miasto), address-level3 (dzielnica/gmina), address-level4 (najniższy poziom administracyjny)
    • country (kraj)
    • postal-code (kod pocztowy)
    • organization (nazwa firmy/organizacji)
    • job-title (stanowisko)
    • bday (data urodzenia)
    • sex (płeć)
    • url (adres URL strony domowej lub firmowej)
    • cc-name (imię na karcie kredytowej)
    • cc-number (numer karty kredytowej)
    • cc-exp (data ważności karty kredytowej)
    • current-password (bieżące hasło użytkownika)
    • new-password (nowe hasło do ustawienia)

    Pełna lista wartości dostępna jest w specyfikacji WHATWG HTML: Autofilling form controls: the autocomplete attribute (otwiera nową kartę).

Przykłady implementacji

Przykład 1: Poprawne użycie autocomplete dla imienia i nazwiska

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

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

Przykład 2: Poprawne użycie autocomplete dla adresu e-mail i telefonu

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

<label for="phone">Numer telefonu:</label>
<input type="tel" id="phone" name="phone" autocomplete="tel">

Przykład 3: Poprawne użycie autocomplete dla adresu pocztowego

<label for="street">Ulica i numer:</label>
<input type="text" id="street" name="street" autocomplete="street-address">

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

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

<label for="country">Kraj:</label>
<select id="country" name="country" autocomplete="country">
    <option value="PL">Polska</option>
    <option value="DE">Niemcy</option>
</select>

Przykład 4: Nieprawidłowa implementacja (brak autocomplete)

W tym przykładzie przeglądarki i technologie wspomagające nie będą w stanie programowo określić celu pola.

<label for="userName">Twoje imię:</label>
<input type="text" id="userName" name="userName">

Przykład 5: Nieprawidłowa implementacja (niepoprawna lub niestandardowa wartość autocomplete)

Użycie wartości, która nie jest częścią specyfikacji, sprawi, że przeglądarki zignorują atrybut.

<label for="client_id">ID klienta:</label>
<input type="text" id="client_id" name="client_id" autocomplete="custom-client-id"> <!-- "custom-client-id" to niepoprawny token -->

Najlepsze praktyki i często popełniane błędy

  • Zawsze używaj atrybutu autocomplete dla pól zbierających dane użytkownika: Jest to najprostszy i najskuteczniejszy sposób na spełnienie tego kryterium.
  • Używaj poprawnych tokenów: Zapoznaj się z listą wartości autocomplete i używaj tych, które są precyzyjnie zdefiniowane w specyfikacji HTML. Unikaj tworzenia własnych, niestandardowych wartości, chyba że są one używane w kontekście, gdzie cel pola jest jasno określony i nie pasuje do żadnego z predefiniowanych tokenów (co jest rzadkie dla danych użytkownika).
  • Nie polegaj wyłącznie na etykietach wizualnych: Chociaż etykiety są kluczowe dla dostępności, to atrybut autocomplete dostarcza dodatkowej, programowej semantyki, której same etykiety nie są w stanie zapewnić w sposób ustandaryzowany dla autouzupełniania.
  • Testuj na różnych urządzeniach i przeglądarkach: Upewnij się, że autouzupełnianie działa prawidłowo, a cel pola jest rozpoznawany przez różne przeglądarki i technologie wspomagające.
  • Rozważ niestandardowe pola: Jeśli masz pola, które zbierają dane o użytkowniku, ale nie pasują do żadnego z tokenów autocomplete, musisz ocenić, czy spełniają warunki wyjątku. Jeśli nie, to może być sygnał, że struktura formularza wymaga przemyślenia, aby lepiej pasować do standardów.

Wnioski

Kryterium WCAG 1.3.5 „Określanie celu pola” jest kluczowe dla zapewnienia dostępności i użyteczności formularzy internetowych. Poprawne zastosowanie atrybutu autocomplete nie tylko pomaga osobom z niepełnosprawnościami, ale także poprawia ogólne wrażenia użytkownika, przyspieszając i ułatwiając interakcję z formularzami. Inwestycja w prawidłowe oznaczenie celu pól formularzy to inwestycja w bardziej dostępny i przyjazny internet dla wszystkich.

Powiązane wpisy

Nadal szukasz odpowiedzi?

Zapytaj naszych specjalistów używając czatu online.

Skontaktuj się z nami