Wróć do wszystkich kryteriów

1.3.5 Określenie przeznaczenia pól (ang.) Identify Input Purpose

Specjalizacje:

  • Content Creator
  • Deweloper

Elementy:

  • Formularze

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Głównym zadaniem tego kryterium jest umożliwienie technologiom wspomagającym oraz przeglądarkom precyzyjnego rozpoznania, jakiego rodzaju dane użytkownik powinien wprowadzić w konkretne pole formularza. Dzięki temu systemy mogą automatycznie podpowiadać lub wypełniać informacje, co znacząco przyspiesza proces obsługi stron.

    Zastosuj tę wytyczną, aby Twoje formularze stały się zrozumiałe nie tylko wizualnie, ale i programowo. Realizacja polega na powiązaniu pól zbierających dane o użytkowniku ze standardową listą celów zdefiniowanych w specyfikacji HTML.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#identify-input-purpose

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#okreslenie-pozadanej-wartosci

    Słownik pojęć

    Określenie celu programowo
    –

    ten termin oznacza, że przeznaczenie pola jest zapisane w kodzie w taki sposób, aby oprogramowanie (np. czytnik ekranu lub funkcja autouzupełniania) mogło je zidentyfikować bez analizy wizualnej etykiety.

    Wpływ na dostępność (Kogo wspierasz?)

    • Użytkownicy mobilni: Na małych ekranach każda pomoc w szybkim wypełnieniu formularza bez użycia klawiatury ekranowej jest na wagę złota.
    • Osoby z dysleksją: Funkcja autouzupełniania minimalizuje konieczność ręcznego wpisywania tekstu, co ogranicza ryzyko popełnienia błędów literowych.
    • Osoby z niepełnosprawnościami poznawczymi: Jasne określenie celu pola redukuje stres i obciążenie pamięci, pomagając zrozumieć, jakie dane są wymagane.
    • Osoby korzystające z technologii sterowania głosem: Systemy te sprawniej operują formularzami, gdy cel każdego elementu jest jasno zdefiniowany w kodzie.
    • Osoby słabowidzące: Czytniki ekranu i programy powiększające mogą dostarczyć dodatkowych informacji o przeznaczeniu pola, korzystając z jego programowej definicji.
    • Wsparcie dla obcokrajowców: Ponieważ tokeny (np. given-name) są niezależne od języka interfejsu, przeglądarka użytkownika może zidentyfikować cel pola nawet na obcojęzycznej stronie.

    Zasady wdrażania i wymagania techniczne

    Aby spełnić to kryterium, musisz wykorzystać atrybut autocomplete w elementach takich jak <input>, <textarea> oraz <select>.

    Atrybut autocomplete="" służy do podpowiadania użytkownikowi wcześniej użytych danych w podobnym polu. Przykładowo z tokenem email (autocomplete="email") wylistuje adresy użyte wcześniej w obrębie przeglądarki. 

    Pamiętaj o stosowaniu poprawnych, ustandaryzowanych tokenów. Każdy z tych tokenów pozwala przeglądarce dopasować zapisane w profilu użytkownika dane do konkretnego pola.

    Oto przykładowe wartości, które powinieneś stosować (kolejność przykładowa):

    • email – dla adresu poczty elektronicznej.
    • tel – dla pełnego numeru telefonu.
    • postal-code – dla kodu pocztowego.
    • street-address – dla adresu zamieszkania (ulica i numer).
    • bday – dla daty urodzenia.
    • country – dla nazwy państwa.
    • new-password – przy ustawianiu nowego hasła.
    • organization – dla nazwy firmy lub organizacji.

    Pełna lista tokenów jest dostępna w specyfikacji WHATWG HTML pod adresem (link otworzy się w nowej karcie):
    https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

    Wyjątki i sytuacje szczególne

    Kryterium nie obowiązuje, gdy:

    • Pole nie dotyczy użytkownika: Na przykład pole „Imię odbiorcy prezentu” lub „Numer telefonu klienta” (jeśli formularz wypełnia pracownik wsparcia) nie wymagają określania celu.
    • Cel pola jest niestandardowy: Jeśli zbierasz dane, dla których nie istnieje odpowiedni token w specyfikacji HTML (np. specyficzny numer polisy).
    • Bezpieczeństwo i prywatność: W sytuacjach, gdzie autouzupełnianie mogłoby ujawnić wrażliwe dane w niebezpieczny sposób.

    Przykłady implementacji

    Najczęstsze błędy

    • F107: Użycie nieprawidłowych lub nieistniejących wartości w atrybucie autocomplete (np. autocomplete="moje-imie").
    • Pomijanie atrybutu w polach zbierających typowe dane kontaktowe użytkownika.
    • Błędne przypisanie celu, np. użycie tokenu tel dla pola przeznaczonego na numer PESEL.

    Najlepsze praktyki

    • Stosuj autocomplete wszędzie tam, gdzie zbierasz dane o użytkowniku – to najprostszy sposób na zgodność.
    • Zawsze sprawdzaj poprawność pisowni tokenów z oficjalną listą WHATWG HTML.
    • Zwróć uwagę, czy atrybut type pola (np. type="email") nie kłóci się z przypisanym celem.
    • Pamiętaj, że autocomplete może przyjmować wartości złożone, jak billing street-address (adres dostawy).

    Metody testowania

    • Narzędzie deweloperskie (ang.) Developer Tools: Sprawdź w kodzie źródłowym, czy pola posiadają atrybut autocomplete i czy jego wartość znajduje się na liście ustandaryzowanych tokenów.
    • Testowanie manualne: Spróbuj wypełnić formularz w przeglądarce (np. Chrome, Firefox), sprawdzając, czy mechanizm autouzupełniania proponuje Twoje dane w odpowiednich miejscach.
    • (ang.) IBM Equal Access Toolkit: To narzędzie flaguje pola formularzy, które wydają się zbierać dane osobowe, a nie posiadają określonego celu.
    • (ang.) W3C Markup Validation Service: Upewnij się, że użyte wartości autocomplete są zgodne ze specyfikacją i nie powodują błędów składniowych.
    • NVDA: Zweryfikuj, czy czytnik przekazuje informację o przeznaczeniu pola, co ułatwia orientację użytkownikom niewidomym.

    Sprawdź swoją wiedzę

    W poniżej podanym linku znajduje się 5 pól formularza. Twoim zadaniem jest sprawdzenie w kodzie (Inspect Element), czy posiadają one poprawny atrybut autocomplete zgodny ze standardem WCAG 1.3.5.

    Notatka: Zanim zajrzysz do rozwiązania, uruchom wybrane narzędzia testowe i zapisz swoje wnioski na kartce.
    Wskazówka: Kliknij prawym przyciskiem myszy na pole i wybierz „Zbadaj” ((ang.) Inspect), aby zobaczyć jego atrybuty.
    Proponowane narzędzia: Narzędzie deweloperskie (ang.) Developer Tools, (ang.) W3C Markup Validation Service, (ang.) IBM Equal Access Toolkit, NVDA

    Link: https://pdc.ambiscale.com/training/wcag-1-3-5/

    #1 DOBRZE

    Dlaczego: Użycie autocomplete=”new-password” informuje przeglądarkę, że jest to pole do utworzenia nowego hasła. Menedżer haseł automatycznie zaproponuje wygenerowanie silnego i bezpiecznego hasła.

    #2 BŁĄD

    Problem: Pole posiada tylko atrybut name, brakuje autocomplete.
    Dlaczego: Przeglądarka musi „zgadywać” przeznaczenie pola, co nie zawsze działa poprawnie. Użytkownik nie korzysta z pełnego wsparcia automatycznego wypełniania danych osobowych.
    Naprawa: Dodać atrybut autocomplete=”given-name”.

    #3 BŁĄD


    Problem:     Użyto ogólnej wartości autocomplete=”on”.
    Dlaczego: Wartość „on” włącza historię wpisywania, ale nie określa semantycznego znaczenia danych (nie mówi, że to ulica). Nie spełnia to wymogu WCAG 1.3.5, który wymaga precyzyjnego określenia typu danych.
    Naprawa: Zmienić na konkretny typ, np. autocomplete=”street-address”.

    #4 BŁĄD

    Problem: Użyto wartości autocomplete=”off”.
    Dlaczego: Celowo wyłącza to pomoc przeglądarki, zmuszając użytkownika (np. z niepełnosprawnością ruchową lub kognitywną) do ręcznego wpisywania numeru telefonu, co jest błędem dostępności.
    Naprawa: Zmienić na autocomplete=”tel”.

    #5 DOBRZE

    Dlaczego: Atrybut autocomplete=”email” precyzyjnie określa, że pole służy do wpisania adresu e-mail. Przeglądarka i menedżery haseł bezbłędnie wypełnią to pole danymi użytkownika.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów