Każdy miał kiedyś do czynienia z formularzami. Dawniej częściej w formie papierowej. Dzisiaj coraz częściej są to formularze cyfrowe, ponieważ służą one interakcji użytkownika ze stroną internetową. Niezależnie od tego, czy chodzi o komunikację w Internecie, czy o zamówienie produktu, można je znaleźć wszędzie. Dotyczy to również wyszukiwania w Internecie, na przykład za pomocą Google. Wypełnianie tych formularzy jest utrudnione dla osób z niepełnosprawnością fizyczną lub poznawczą, a także dla osób niewidomych i niedowidzących. Aby umożliwić wszystkim ludziom uczestnictwo w życiu publicznym, formularze te muszą być zaprojektowane w sposób zapewniający dostępność. Ale: jak właściwie tworzy się elementy formularzy zapewniające dostępność?
Istnieją różne techniki służące do tego celu. Zanim jednak zajmiemy się tymi technikami, warto zapoznać się z elementami formularza. Można je bowiem podzielić na różne typy. Wyróżnia się między innymi następujące typy:
- pola wprowadzania danych w jednym wierszu
- wielowierszowe pola wprowadzania danych
- Listy wyboru
- Przyciski opcji
- Pola wyboru
- Przyciski „Wyślij”/„Anuluj”
Oznaczenia pól formularza
Aby zapewnić dostępność formularzy, należy opisać poszczególne elementy sterujące. Opisy te umożliwiają technologiom wspomagającym rozpoznanie funkcji elementów sterujących i przekazanie tej informacji użytkownikowi. Ważne jest, aby opisy były jednoznacznie powiązane z elementami sterującymi, ponieważ w przeciwnym razie czytniki ekranu nie będą w stanie ustalić powiązania z tymi elementami. W konsekwencji użytkownicy mają trudności ze zrozumieniem formularza. Nie są w stanie rozpoznać, jakie informacje należy wprowadzić w poszczególnych polach. W związku z tym nie mogą poprawnie wypełnić formularza i często popełniają błędy. Opisy nie są jednak oznaczane w ten sam sposób. Decydujące znaczenie ma to, czy mają być widoczne dla wszystkich, czy nie. W języku programowania HTML rozróżnia się zatem element `label` od atrybutów `aria`. Element `label` jest stosowany w przypadku pól wprowadzania danych, list rozwijanych, przycisków opcji i pól wyboru i musi być odpowiednio umieszczony. W przypadku pól wprowadzania danych i list rozwijanych etykieta `label` znajduje się przed elementami sterującymi. Natomiast w przypadku przycisków opcji i pól wyboru umieszcza się ją za elementem sterującym. Aby etykiety mogły zostać powiązane z odpowiednim elementem, należy dodatkowo dodać atrybut `for`.
Atrybut aria jest używany w HTML w przypadku przycisków. Przyciski mogą np. służyć w formularzu do wysłania lub anulowania. Dzięki atrybutom aria opisy poszczególnych elementów stają się rozpoznawalne wyłącznie dla technologii wspomagających. Można je zatem stosować również w przypadku pól wprowadzania danych, które mają być widoczne wyłącznie dla czytnika ekranu. Istnieje wiele atrybutów aria, które są wykorzystywane w celu poprawy dostępności w Internecie. Różnią się one jednak pod względem rodzaju i funkcji. Do oznaczenia elementu służy tzw. aria-label. Oczywiście możliwe jest również użycie tej samej etykiety dla kilku elementów. Umożliwia to atrybut aria-labelledby.
Pola wprowadzania danych jedno- i wielowierszowe
Pola wprowadzania danych należą do najczęściej stosowanych elementów w formularzach. Mogą być jedno- lub wielowierszowe. Pola jednowierszowe służą do wprowadzania krótkich danych, np. imienia i nazwiska osoby, adresu e-mail, nazwy ulicy lub miejscowości.
Tworzy się je w HTML za pomocą tagu `input` i atrybutu `type`.
Dodatkowo można dodać inne atrybuty, które np. określają długość wiersza.
Pola wielowierszowe są zazwyczaj wykorzystywane w przypadku większych obszarów tekstowych, takich jak wiadomości tekstowe. Tworzy się je za pomocą tagu `textarea`. Również w tym przypadku programista może określić liczbę wierszy oraz długość wiersza. Aby jednak pola te były dostępne dla osób niepełnosprawnych, należy dodatkowo dodać tag `label`. Nie jest jednak możliwe ustanowienie powiązania między etykietą a elementami, jeśli nie są one jednoznacznie przypisane. Należy je wówczas powiązać ze sobą za pomocą atrybutu „for” i atrybutu „id”. W poniższym przykładzie HTML zaimplementowano proste etykiety w takich polach wprowadzania danych.
<label for=“vorname“>Ihr Vorname: </label>
<input type“text“ name=“vorname“ id=“vorname“ />
<br />
<label for=“nachricht“>Ihre Nachricht: </label>
<textarea name=“nachricht“ id=“nachricht“> </textarea>
W tym miejscu tworzone jest najpierw jednowierszowe pole wprowadzania imienia o typie „text”. Etykieta „Twoje imię:” jest wyświetlana wszystkim użytkownikom za pomocą elementu `label`. Znajduje się ona przed elementem `input`, ponieważ jest wyświetlana przed polem wprowadzania danych. Obszary te są ze sobą powiązane za pomocą atrybutu `for` w tagu `label` oraz atrybutu `id` w elemencie `input`. Ważne jest, aby obie treści były identyczne, ponieważ w przeciwnym razie nie będzie można ich powiązać. Atrybut name służy jako identyfikator tego pola i jest niezbędny do przesłania danych na stronę serwera.
Następnie za pomocą tagu „textarea” tworzone jest wielowierszowe pole wprowadzania danych. Za pomocą elementu label pojawia się tu napis „Twoja wiadomość:”. Również w tym przypadku oba pola o tej samej treści są ze sobą powiązane za pomocą atrybutów for i id.
Ogólne wskazówki
Ogólnie rzecz biorąc, formularze powinny być jasne i jednoznaczne. Bardzo pomocna jest również przewidywalność. Dzięki temu użytkownicy mogą szybko zorientować się, czego się od nich oczekuje. Bardzo ważna jest również przejrzysta i sensowna struktura. Elementy merytoryczne powiązane ze sobą można pogrupować. Jednostki logicznie odrębne można również oddzielić wizualnie. Ułatwia to orientację. Dodatkowo można je wyróżnić kolorystycznie. Ważne jest, aby zachować minimalny kontrast wynoszący 4,5:1.
Obsługa klawiatury
Jedną z najważniejszych cech projektowania pól formularzy z uwzględnieniem dostępności jest możliwość obsługi za pomocą klawiatury. Są osoby, które ze względu na swoją niepełnosprawność nie są w stanie posługiwać się myszą. Tym ważniejsze jest więc projektowanie formularzy w taki sposób, aby można było poruszać się po nich za pomocą klawiatury. Wykorzystanie elementów `label` i atrybutów `aria` ułatwia zrozumienie i obsługę formularzy. Kolejnym sposobem na uproszczenie obsługi za pomocą klawiatury jest stosowanie skrótów klawiaturowych. Pozwala to przypisać kombinacje klawiszy do poszczególnych elementów formularza. Może to pomóc w szybszym dotarciu do określonych obszarów lub w szybszym korzystaniu z funkcji. W tym celu w HTML stosuje się atrybut `accesskey`. Atrybut ten umieszcza się w elemencie, dla którego ma być używany. W tym miejscu po prostu przypisuje się klawisz, który będzie następnie służył jako skrót klawiaturowy. Jeśli więc np. polu lub przyciskowi przypiszemy klawisz „n”, w systemie Windows można je obsługiwać za pomocą skrótu klawiaturowego (Alt + n).
Należy jednak upewnić się, że ten skrót klawiszowy nie jest już używany dla innego polecenia w przeglądarce.
Ograniczenie do minimum
Warto również ograniczyć całość do niezbędnego minimum, aby nie obciążać niepotrzebnie osób niepełnosprawnych. Należy zatem zbierać wyłącznie dane absolutnie niezbędne. Należy zrezygnować z pobierania danych, które już są dostępne. Dodatkowo widoczność pól formularza można dostosować do sytuacji. Opcjonalne pola wprowadzania danych lub pola powiązane z warunkami nie muszą być widoczne. Można je wyświetlić, gdy są potrzebne. Na przykład pytanie o wiek dzieci nie ma sensu, jeśli wcześniej zaznaczono, że nie ma dzieci.
Wskazówki i komunikaty o błędach
Dodatkowo należy zapewnić pomoc przy wprowadzaniu danych. Może to przybrać formę okna dialogowego lub podpowiedzi. Dzięki nim można dokładniej wyjaśnić sposób wprowadzania danych. Inną możliwością byłoby umieszczenie linku do własnej strony pomocy. Znacznie zwiększyłoby to wskaźnik powodzenia. Błędy jednak się zdarzają. Ważne są wtedy sensowne komunikaty o błędach. Jeśli na przykład podczas logowania wprowadzono nieprawidłowe hasło, nie powinien pojawiać się komunikat „Nieprawidłowa nazwa użytkownika lub hasło”. Lepiej jest sprecyzować błąd. Prawidłowe brzmienie komunikatu to: „Wprowadzone hasło jest nieprawidłowe. Proszę wprowadzić prawidłowe hasło”.
Istnieją różne rodzaje błędów. Po pierwsze, błąd formatowania. W tym przypadku hasło zostało wprowadzone w nieprawidłowym formacie. Na przykład zamiast cyfr wprowadzono litery. Mogą również wystąpić błędy wartości. Dzieje się tak, gdy pomimo prawidłowego formatu wprowadzono nieprawidłową wartość. Przykładem może być wpisanie wartości 34 jako dnia w dacie. Komunikat brzmiałby wówczas na przykład: „Miesiąc marzec ma 31 dni. Proszę ponownie wprowadzić dzień”.
Kolejnym rodzajem błędu są nieprawidłowe dane wprowadzane przez użytkownika. W tym przypadku programista określa wartości, które są nieprawidłowe. Ostatnim rodzajem błędu jest brak wpisu w polach obowiązkowych. Dzieje się tak na przykład wtedy, gdy pole adresu e-mail jest obowiązkowe, a użytkownik zapomniał go wypełnić. Często zdarza się to jednak również w przypadku ogólnych warunków handlowych. Na wielu stronach internetowych nie można przejść dalej bez wyrażenia zgody na te warunki.
Pola obowiązkowe
Formularze często zawierają pola obowiązkowe. Muszą one być odpowiednio oznaczone. Często stosowanym symbolem oznaczającym pole obowiązkowe jest znak „*”, wyświetlany obok pola formularza. W tym przypadku należy jednak już na początku formularza zaznaczyć, że pola oznaczone gwiazdką są polami obowiązkowymi. Inną możliwością jest wyróżnienie tych pól obowiązkowych innym kolorem lub cieniowaniem. Nie jest to jednak rozwiązanie dostępne dla wszystkich. Aby użytkownicy czytników ekranu również mogli je rozpoznać, należy dodatkowo zastosować atrybut „required” lub „aria-required”. Dzięki temu czytnik ekranu otrzymuje informację, że dane pole jest obowiązkowe.
Symbol zastępczy
Jednym ze sposobów na uczynienie formularzy jeszcze bardziej zrozumiałymi i przyjaznymi dla użytkownika jest stosowanie tekstów zastępczych w polach formularza. Teksty zastępcze to tymczasowe teksty wyświetlane w polu formularza, które wskazują użytkownikowi, jaki rodzaj informacji należy wprowadzić. Teksty te znikają, gdy tylko kliknie się pole formularza lub zostanie ono zaznaczone, i mogą zostać zastąpione rzeczywistą treścią tego pola. Teksty zastępcze można łatwo wstawić do elementu HTML pola formularza, używając atrybutu placeholder.
Zapisz wprowadzone dane
Wszyscy użytkownicy powinni mieć możliwość zapisywania wprowadzonych danych. W przypadku dłuższych formularzy często pojawiają się problemy. Aby uniknąć utraty danych, można je zapisać. W tym celu można zaimplementować przycisk, który zapisuje aktualny stan formularza. Ułatwia to wypełnianie złożonych formularzy. Ma to również tę zaletę, że brakujące dane można uzupełnić w późniejszym terminie. Powtarzanie tych samych wpisów może bowiem sprawić, że niektórzy użytkownicy zrezygnują z dalszego wypełniania formularza. Może to być irytujące zarówno dla operatora strony internetowej, jak i dla użytkownika.
Uwierzytelnianie i limit czasu
Uwierzytelnianie zwiększa bezpieczeństwo w Internecie. Stanowi jednak również jedną z barier, które pojawiają się nieustannie. Często spotyka się je na stronach internetowych, gdzie wymagane jest zalogowanie się. Aby jednak strony te były dostępne dla wszystkich, formularze muszą być zaprojektowane zgodnie z zasadami dostępności. W wielu przypadkach procedury uwierzytelniania są bowiem ograniczone czasowo. Użytkownik ma wtedy bardzo mało czasu na zalogowanie się. Często jest to zaledwie 30 lub 60 sekund. Dla wielu osób z niepełnosprawnościami ten czas nie wystarcza na zalogowanie się. Dlatego ważne jest, aby nie ograniczać wprowadzania danych limitem czasowym.
Kolejnym problemem są captcha. Służą one do zidentyfikowania użytkownika jako człowieka, a nie komputera. W tym przypadku użytkownik jest proszony o rozpoznanie zniekształconego obrazka i wpisanie wyniku w polu formularza. Często jednak trzeba również kliknąć wszystkie obrazki, na których widnieje na przykład samochód. Nie zawsze są one jednak dostępne dla osób niepełnosprawnych. Osoby niewidome lub niedowidzące nie są w stanie rozpoznać tych obrazków. Aby ominąć tę barierę, należy udostępnić opcję audio.
Podsumowując, można stwierdzić, że projektowanie pól formularzy z uwzględnieniem zasad dostępności stanowi ważny krok w kierunku stworzenia środowiska cyfrowego bez barier. Stosowanie poprawnych etykiet, przejrzysta i uporządkowana struktura, obsługa za pomocą klawiatury oraz odpowiednie komunikaty o błędach zwiększają prawdopodobieństwo, że również osoby niepełnosprawne będą mogły samodzielnie wypełniać formularze.
