Dostępnik o przyjemnych formularzach

Już kilka razy pisałem o tworzeniu formularzy, bo ich dostępność jest często kluczowa dla korzystania ze strony internetowej. Jednak wydaje mi się, że nadal warto. Uwaga! Raczej dla technicznych.

Feb 06, 2025

Może nie zdajesz sobie z tego sprawy, ale formularze są kręgosłupem współczesnego internetu. Na samym początku internet był jednokierunkowy: ktoś do nas pisał na stronie internetowej, a ja mogłem tylko czytać te informacje, a interakcja ograniczała się do kliknięcia łącza. Od kiedy jednak jesteśmy współtwórcami treści internetowych, to właśnie formularze są kluczowe, bo zapewniają możliwość dodawania własnych treści. To może być bardzo podstawowa treść, na przykład serduszko ❤ lub kciuk w górę 👍 które dodajemy pojedynczym przyciskiem. Jednak możemy robić więcej, na przykład dopisywać komentarze, rozmawiać przez chat, wysyłać zgłoszenia do Szkoły Dostępności Cyfrowej. Tam wszędzie są formularze. Dobrze by było, żeby były wygodne w używaniu.

Podstawowe zasady

Osobiście wymyśliłem i daję Ci za darmo te proste wytyczne. Aby formularz był dostępny w podstawowym stopniu, osoba wypełniająca powinna mieć 3 istotne informacje:

Co wpisać? To nam załatwiają przede wszystkim etykiety, zarówno te dotyczące konkretnego pola, jak LABEL, czy zbioru pól, czyli LEGEND wewnątrz FIELDSET. Przy czym etykieta musi być zawsze widoczna, więc nie zastąpi jej PLACEHOLDER.
Gdzie wpisać? Tu odpowiedzią są semantyczne powiązania pól i ich etykiet. Sama etykieta mówi bowiem dopiero to, co należy wpisać, a połączenie jej z polem rysuje strzałkę, gdzie te dane należy wpisać. Co więcej - dowiązanie etykiety do pola to ułatwienie dla wszystkich, bo nie trzeba już celować myszą w ten mały kwadracik i można kliknąć w etykietę, która zazwyczaj jest większym celem.
Jak wpisać? To z kolei załatwiają nam instrukcje. Nie zawsze są konieczne, bo są przecież etykiety które są zrozumiałe od kopa, na przykład imię lub nazwisko. Jeżeli jednak dasz tylko 1 pole na wpisanie imienia i nazwiska, to może się zdarzyć, że istotna będzie kolejność ich wpisania. Czasem zaś instrukcja jest bardzo ważna, bo przeciętna osoba nie będzie umiała wypełnić formularza. Instrukcjami są także komunikaty o błędach, które powinny powiedzieć, co zepsuliśmy i jak to naprawić.

To jest absolutna podstawa dostępności formularzy, ale przecież można zrobić o wiele więcej.

Zadbajmy o wygodę

Wcale nie jestem pewien, czy podam Ci wyczerpującą listę takich podpowiedzi. Jednak ostatnio przedzierałem się z deweloperami przez liczne i rozbudowane formularze, więc zebrałem trochę takich podpowiedzi. A ponieważ Cię lubię, to wymieniam je tutaj..

Używaj odpowiednich typów pól

HTML dostarcza cały bogaty wybór typów pól do wprowadzania danych. Już od dawna nie jest ograniczony do TEXT czy "PASSWORD. Zerknij choćby na te:

TEL: pozwala na wpisanie numeru telefonu. Wartość nie jest parsowana, bo numery są przecież bardzo różne.
URL: pozwala na wpisanie adresu internetowego i od razu sprawdza, czy jest poprawny składniowo. Na klawiaturze dotykowej pojawią się znaki w rodzaju "/" i ":", co upraszcza wprowadzanie tekstu.
EMAIL: oczywiście pozwala na wpisanie adresu email i od razu waliduje, czy ma poprawny format. Na klawiaturze mobilnej pojawią się przynajmniej znaki "@" i ".". Jeżeli to jest zwykłe pole tekstowe, to muszę 6 razy przestawiać klawiaturę z literowej na cyfrową.
DATE: masz gotową i dostępną kontrolkę do wprowadzania daty. Koniec z niedostępnymi kalendarzami do klikania myszką.
MONTH, WEEK: wybieranie miesiąca i tygodnia. Ja nie znajduję zastosowania, ale głęboko wierzę, że koordynatorzy projektów potrzebują tych pól.
TIME: tu możesz poręcznie wprowadzić czas, zgodnie z ustawieniami Twojego systemu operacyjnego.
DATETIME-LOCAL: a tu możesz ustawić zarówno datę, jak i czas lokalny.
NUMBER: służy do wprowadzania liczb i niczego innego. Nie używaj tego typu pola do wprowadzania telefonu lub numeru PESEL, bo można w nim bardzo łatwo zmienić wartość za pomocą klawiszy kursora.
RANGE: podobnie jak number pozwala wprowadzać liczby, ale takie bardziej skwantyfikowane, na przykład ocena w szkole lub gwiazdki w Uberze.
COLOR: wybieranie kolorów.

Nie będę opisywał reszty typów, bo są powszechnie znane. Te jednak często nie trafiły jeszcze do powszechnej świadomości.

Automatyczne uzupełnianie

Teraz pochylmy się nad rewelacyjnym atrybutem, jakim jest AUTOCOMPLETE. Prawidłowo użyty przyśpiesza wypełnianie formularzy tak bardzo, że czasem nie trzeba nic robić. I wcale nie przesadzam, bo spotykałem takie formularze. A zatem - jak to działa?

Przeglądarka internetowa zapamiętuje różne rzeczy za nas. Między innymi hasła, jeżeli jej na to pozwolisz. Ja bardzo polecam taki menedżer haseł wbudowany w przeglądarkę, a jeszcze bardziej taki rozszerzający. Ja używam Bitwarden i bez niego trudno mi się już obyć.

Przeglądarka zapamiętuje także inne rzeczy, na przykład dane wpisane w formularzach. Czasem są to pojedyńcze dane, na przykład adres email, a czasem cały profil, w którym jest imię, nazwisko, email, telefon, adres i inne dane. Dobrym przykładem jest formularz wprowadzania danych karty kredytowej, bo przeglądarka może wpisać za Ciebie numer karty, imię i nazwisko oraz datę ważności. Dla siebie zachowaj te 3 cyferki z odwrotu.

Skąd przeglądarka wie, jakie dane wpisać w które pole? Ma na to swoje sposoby, chociaż czasem się myli. Wtedy trzeba ręcznie poprawiać dane i magia znika. Te decyzje można jednak przeglądarce wybitnie ułatwić. Pierwszą metodą są typy pól, a drugą - właśnie AUTOCOMPLETE.

Ten atrybut możesz dodać do pola tekstowego, żeby jasno poinstruować przeglądarkę, jakie dane ma wpisać za Ciebie. A czasem, że nie wolno jej niczego wpisywać. Przyjrzyjmy się zatem bliżej wartościom, jakie może przyjmować AUTOCOMPLETE.

OFF: wyłącza automatyczne uzupełnianie. Wbrew pozorom jest to ważne, bo wypełnić pole można błędnie przez zwykłą nieuwagę. Problem ten spotykam dość często w formularzach kontaktowych, gdzie w treść wiadomości wkleja mi się coś z pamięci przeglądarki. Pasuje rodzaj pola, a że tym razem to bez sensu, bo inna sprawa lub inny formularz... No nie lubię.

ON: włącza autouzupełnianie na ogólnych zasadach. W prostych formularzach można go używać, szczególnie jeżeli pola mają określony typ. To jednak jest uproszczone podejście.

Możesz podpowiedzieć przeglądarce bardzo dokładnie, co ma wklepać do pola edycyjnego. Tu podam tylko kilka przykładów, bo tych tokenów jest sporo..

Osobiste

given-name: imię.
additional-name: drugie imię
family-name: nazwisko
honorific-prefix: czyli literki przed nazwiskiem, jak Pan, dr, inż, arch, prof
gender: płeć i to jest pole tekstowe, a nie przycisk z 2 opcjami..

Służbowe

organization: nazwa firmy, organizacji, uczelni itp
organization-title: nazwa stanowiska, na przykład ekspert do spraw dostępności

Bezpieczeństwo

current-password: aktualne hasło
new-password: miejsce na wpisanie nowego hasła. To też informacja dla menedżera haseł, że można zaproponować jakieś porządne hasło od siebie
one-time-code: jednorazowy kod autoryzacyjny. Tak - przeglądarka może sama go wstawić.

Poza tym są tokeny opisujące adres i jego elementy, dane dotyczące płatności i kilka innych. Pełną listę znajdziesz w tabeli na tej stronie.

A skąd przeglądarka ma wiedzieć, który adres wybrać, jeżeli pamięta 2? Na to też są sposoby i zachęcam do ich poszukania. W każdym razie są i warto z nich korzystać, żeby wpisywały się dane adresowe dostawy do domu, a nie do pracy.

Czy WCAG tego wymagają?

Takie pytania padają często, więc przypomnę. WCAG niczego nie wymagają. Dają wytyczne, których jest obecnie 13. Dla każdej wytycznej pokazują kryteria sukcesu, żeby każda osoba mogła stwierdzić, czy jest dobrze. Jeżeli jednak potrzebujesz takiej listy, to służę. Tutaj lista kryteriów sukcesu:

1.3.1 Informacje i relacje: mamy relacje między elementami formularza i jego etykietami
1.3.5 Określenie pożądanej wartości: stosowanie etykiet i typów pól
3.3.1 Identyfikacja błędu: komunikaty o błędach
3.3.2 Etykiety lub instrukcje: etykiety, instrukcje, komunikaty o błędach
3.3.3 Sugestie korekty błędów: walidacja danychw przeglądarce w przypadku części typów pól
3.3.7 Ponowne wpisy: automatyczne uzupełnianie
4.1.2 Nazwa, rola, wartość: semantyczne łączenie pól z etykietami i typy pól

Oczywiście to nie wszystko, co można zrobić z formularzami. Tu skupiłem się na tym, żeby ułatwiać ich wypełnianie, czyli chodzi o komfort. Ten komfort jest dla wszystkich, bo chyba każdy woli robić mniej niż więcej. Poza Ewą.

A tu jeszcze link do strony z kilkoma przykładami elementów formularzy z różnymi typami i właściwościami. Zrobiłem te przykłady i większość pól mi się wypełnia. Ciekawy jestem, co Ci się wyświetliło w podpowiedziach.

Wieści o dostępności

Polityka w Dostępniku? Oczywiście. Rzecznik Praw Obywatelskich zaprasza na warsztaty dla wszystkich tych, którzy chcą przypilnować dostępności kampanii prezydenckiej. Zgłosić się może każda osoba, a ludzie z biura RPO i PFRONopowiedzą, jak docisnąć kandydatów i kandydatki. Tylko trzeba się śpieszyć, bo to już w przyszłym tygodniu.

AutomaticA11y 2025 już się kształtuje. Od przyszłego tygodnia zacznę informować kto i oczym chce opowiedzieć podczas wydarzenia. Mam też nadzieję potwierdzić termin i miejsce. A na razie - trzymaj kciuki za organizację. Możesz też dorzucić się do organizacji stawiając małą kawkę.

Szkolenia w Szkole Dostępności Cyfrowej rozkręcają się. Zainteresowanie jest duże i wciąż pojawiają się kolejne pytania. Dlatego na 5 marca zaplanowaliśmy kolejny webinar informacyjny. Jeżeli jeszcze nie wiesz, czym jest SDC, to zerknij na stronę projektu. Pojawił się też harmonogram szkoleń wakacyjnych w fajnych miejscach. Za to trzeba poświęcić 4 tygodnie swojego czasu. Idealne dla absolwentów i absolwentek szkół średnich i dla osób studiujących. Może też dla Ciebie. Tu troszkę więcej informacji.

I to by było na tyle. Nurtuje mnie pytanie, jak się teraz czują fani i fanki Donalda Trumpa. Ja nie wiem, czy coś nam pomoże ten Kościuszko, Pułaski i Wałęsa:) Na szczęście nie jesteśmy Grenlandią. Dobrego dnia i tygodnia.

Dostępnik