W jaki sposób elementy formularza są projektowane, aby były dostępne?

Każdy z nas kiedyś miał do czynienia z formularzami. Kiedyś częściej na papierze. Dziś 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ę przez internet, czy zamawianie produktu, można je znaleźć wszędzie. Wyszukiwanie w internecie, na przykład w Google, również jest utrudnione. Wypełnianie tych formularzy jest trudniejsze dla osób z niepełnosprawnością fizyczną, a nawet poznawczą, a także dla osób niewidomych i niedowidzących. Aby umożliwić wszystkim udział w życiu publicznym, formularze te muszą być zaprojektowane tak, aby były bez barier. Ale: jak właściwie tworzyć dostępne elementy formularzy?

Istnieje kilka technik, które to umożliwiają. Zanim jednak się nimi zajmiemy, warto poznać elementy formularza. Można je podzielić na różne typy. Wśród nich wyróżnia się między innymi następujące typy:

• pola wprowadzania danych jednowierszowych

• obszary wejściowe wielowierszowe

• Listy wyboru

• Przyciski radiowe

• Pola wyboru

• Przyciski Wyślij/Anuluj

Etykietowanie pól formularza

Aby zapewnić dostępność w formularzach, różne elementy sterujące muszą być oznaczone etykietami. Etykiety te umożliwiają technologiom wspomagającym rozpoznawanie funkcji elementów sterujących i informowanie o nich użytkownika. Ważne jest, aby etykiety były wyraźnie powiązane z elementami sterującymi, w przeciwnym razie czytniki ekranu nie będą mogły połączyć się z elementami. W rezultacie użytkownicy mają trudności ze zrozumieniem formularza. Nie są w stanie zidentyfikować, jakie informacje należy wprowadzić w poszczególnych polach. W rezultacie nie są w stanie poprawnie wypełnić formularza i często popełniają błędy. Jednak opisy nie są oznaczone tymi samymi etykietami. Decydującym czynnikiem jest to, czy powinny być widoczne dla wszystkich, czy nie. W języku programowania HTML rozróżnia się zatem element etykiety (label) i atrybuty aria (aria). Element etykiety (label) jest używany dla pól wprowadzania danych, list wyboru, przycisków opcji i pól wyboru i musi być odpowiednio umieszczony. W przypadku pól wprowadzania danych i list wyboru etykieta jest umieszczana przed elementami sterującymi. Natomiast w przypadku przycisków opcji i pól wyboru są one umieszczane za elementem sterującym. Należy dodać atrybut for (for), aby etykiety mogły być również powiązane z odpowiednim elementem.

Atrybut aria jest używany w HTML dla przycisków. Przyciski mogą na przykład reprezentować polecenie „Wyślij” lub „Anuluj” w formularzu. Atrybuty aria sprawiają, że opisy poszczególnych elementów są rozpoznawalne tylko przez technologie wspomagające. Dlatego mogą być również używane dla pól wprowadzania danych, które powinny być widoczne tylko dla czytników ekranu. Istnieje wiele atrybutów aria, które służą do poprawy dostępności stron internetowych. Różnią się one jednak typem i funkcją. Tak zwany atrybut aria-label służy do oznaczania elementu etykietą. Oczywiście możliwe jest również użycie tej samej etykiety dla wielu elementów. Umożliwia to atrybut aria-labelledby.

Pola wejściowe jedno- i wielowierszowe

Pola wprowadzania danych to jedne z najczęściej używanych elementów w formularzach. Mogą być jedno- lub wielowierszowe. Pola jednowierszowe służą do krótkich zapytań, takich jak imię i nazwisko osoby, adres e-mail, adres zamieszkania lub miasto.

Tworzone są w kodzie HTML przy użyciu znacznika input-Tag i atrybutu type.

Ponadto można dodać inne atrybuty definiujące na przykład długość linii.

Pola wielowierszowe są zazwyczaj używane w przypadku większych obszarów tekstowych, takich jak wiadomości tekstowe. Są one następnie tworzone za pomocą znacznika textarea. Deweloper może również określić liczbę i długość wiersza. Jednak aby pola te były dostępne, konieczne jest dodanie znacznika label. Nie jest jednak możliwe utworzenie łącza między etykietą a elementami, jeśli nie są one jednoznacznie przypisane. Muszą one zostać połączone za pomocą atrybutów for i id. W poniższym przykładzie HTML proste etykiety są zaimplementowane w takich polach wprowadzania danych.

<label for="vorname">Twoje imię: </label>

<input type„text” name=„vorname” id=„vorname” />

<br />

<label for="message">Twoja wiadomość: </label>

<textarea name="message" id="message"> </textarea>

W tym przypadku najpierw tworzone jest jednowierszowe pole wprowadzania imienia typu „text”. Etykieta „Twoje imię:” jest widoczna dla wszystkich dzięki elementowi label. Jest on umieszczony przed elementem input, ponieważ jest on wyświetlany przed polem input. Atrybut for w tagu label oraz atrybut id w elemencie input łączą te obszary. Ważne jest, aby obie zawartości były identyczne, w przeciwnym razie nie będzie można ich połączyć. Atrybut name służy jako identyfikator tego pola i jest wymagany do przesłania danych na stronę serwera.

Następnie tworzony jest wielowierszowy obszar wprowadzania tekstu za pomocą tagu „textarea”. Etykieta „Twoja wiadomość:” pojawia się tutaj za pośrednictwem elementu label. Również tutaj dwa obszary z tą samą treścią tekstową są połączone za pomocą atrybutów for i id.

Uwagi ogólne

Ogólnie rzecz biorąc, formularze powinny być przejrzyste i jednoznaczne. Przewidywalność jest również bardzo pomocna. Pozwala ona użytkownikom szybko zorientować się, czego się od nich oczekuje. Przejrzysta i logiczna struktura jest również bardzo ważna. Powiązane elementy treści można grupować. Logicznie oddzielone jednostki można również oddzielić wizualnie. Ułatwia to orientację. Dodatkowo, można je od siebie oddzielić kolorem. Ważne jest zachowanie minimalnego kontrastu 4,5:1.

Obsługa klawiatury

Jedną z najważniejszych cech dostępnych pól formularzy jest możliwość obsługi za pomocą klawiatury. Niektóre osoby z powodu niepełnosprawności nie mogą korzystać z myszy. Dlatego tym ważniejsze jest projektowanie formularzy w taki sposób, aby można było się po nich poruszać również za pomocą klawiatury. Zastosowanie elementów label i atrybutów aria ułatwia zrozumienie i obsługę formularzy. Innym sposobem na uproszczenie obsługi za pomocą klawiatury jest korzystanie ze skrótów klawiaturowych. W tym przypadku elementy formularza można zapisywać za pomocą skrótów klawiaturowych. Może to pomóc w szybszym dotarciu do określonych obszarów lub szybszym wykonywaniu funkcji. W tym celu w HTML wykorzystywany jest atrybut accesskey. Atrybut ten jest wstawiany do elementu, dla którego ma być użyty. Tam po prostu przypisywany jest klawisz, który jest następnie używany do wywołania polecenia klawiaturowego. Na przykład, jeśli przypiszesz klawisz „n” do pola lub przycisku, w systemie Windows można go obsługiwać za pomocą skrótu klawiaturowego (Alt + n).

Upewnij się jednak, że ten skrót klawiaturowy nie został już użyty w innym poleceniu w przeglądarce.

Redukcja do minimum

Podobnie, wskazane jest ograniczenie się do najistotniejszych elementów, aby nie obciążać niepotrzebnie osób z niepełnosprawnościami. Dlatego należy żądać tylko absolutnie niezbędnych danych. Należy zrezygnować z wyszukiwania danych już istniejących. Ponadto widoczność pól formularza można dostosować do sytuacji. Pola opcjonalne lub powiązane z warunkami nie muszą być widoczne. Można je wyświetlić w razie potrzeby. Na przykład zapytanie o wiek dzieci nie ma sensu, jeśli wcześniej zaznaczono, że nie ma w nich dzieci.

Pomoc i komunikaty o błędach

Dodatkowo powinna być dostępna pomoc dotycząca wprowadzania danych. Może ona mieć formę okna dialogowego lub podpowiedzi. Dzięki nim można bardziej szczegółowo wyjaśnić wprowadzane dane. Inną możliwością jest link do osobnej strony pomocy. To znacznie zwiększyłoby prawdopodobieństwo sukcesu. Błędy nadal się zdarzają. Ważne są wtedy zrozumiałe komunikaty o błędach. Na przykład, jeśli hasło zostało wprowadzone nieprawidłowo podczas logowania, komunikat „Nieprawidłowa nazwa użytkownika lub hasło” nie powinien się pojawiać. Lepiej odfiltrować błąd. Poprawny komunikat w tym przypadku brzmiałby: „Wprowadzone hasło jest nieprawidłowe. Proszę podać poprawne hasło”.

Istnieje kilka rodzajów błędów. Po pierwsze, błąd formatu. Hasło jest wpisane w niewłaściwym formacie. Na przykład zamiast cyfr wprowadzono litery. Mogą również wystąpić błędy wartości. Może się to zdarzyć, gdy wprowadzono nieprawidłową wartość, pomimo prawidłowego formatu. Przykładem może być wpisanie wartości 34 dla znacznika daty. Komunikat będzie wtedy brzmiał na przykład: „Marzec ma 31 dni. Proszę ponownie wprowadzić znacznik”.

Innym rodzajem błędu są nieprawidłowe dane wejściowe. W tym przypadku programista określa nieprawidłowe wartości. Ostatnim typem błędu jest brak danych w polach obowiązkowych. Dzieje się tak na przykład wtedy, gdy adres e-mail jest polem obowiązkowym, a dane wejściowe zostały zapomniane. Często zdarza się to również w przypadku ogólnych warunków umowy. Na wielu stronach internetowych nie można kontynuować bez zaakceptowania tego oświadczenia.

Pola obowiązkowe

Formularze często zawierają pola obowiązkowe. Muszą one być odpowiednio oznaczone. Często używanym symbolem oznaczającym pole obowiązkowe jest znak „*” wyświetlany obok pola formularza. W takim przypadku należy jednak zaznaczyć na samym początku formularza, że pola oznaczone gwiazdką są polami obowiązkowymi. Inną opcją jest wyświetlanie tych pól obowiązkowych w innym kolorze lub cieniowaniu. Nie są one jednak dostępne dla wszystkich. Aby użytkownicy czytników ekranu mogli je również rozpoznać, należy również użyć atrybutu „required” lub „aria-required”. Informuje on czytnik ekranu, że jest to pole obowiązkowe.

Symbol zastępczy

Jednym ze sposobów na uczynienie formularzy jeszcze bardziej zrozumiałymi i przyjaznymi dla użytkownika jest stosowanie symboli zastępczych w polach formularza. Symbole zastępcze to tymczasowe teksty, które pojawiają się w polu formularza, aby wskazać użytkownikowi, jaki rodzaj informacji należy wprowadzić. Teksty te znikają po kliknięciu pola formularza lub ustawieniu na nim fokusu i można je zastąpić jego rzeczywistą zawartością. Symbole zastępcze można łatwo wstawić do elementu wejściowego HTML pola formularza za pomocą atrybutu placeholder.

Zapisz dane wejściowe

Wszyscy użytkownicy powinni mieć możliwość zapisywania swoich danych. Problemy często pojawiają się w przypadku dłuższych formularzy. Aby uniknąć utraty danych, można je zapisać. W tym celu można wdrożyć przycisk zapisywania aktualnego stanu. Ułatwia to wypełnianie skomplikowanych formularzy. Ma to również tę zaletę, że brakujące dane można uzupełnić później. Dzieje się tak, ponieważ powtarzanie tych samych danych powoduje, że niektórzy użytkownicy rezygnują z wypełniania formularza. Może to być uciążliwe zarówno dla operatora strony internetowej, jak i użytkownika.

Uwierzytelnianie i limit czasu

Uwierzytelnianie zwiększa bezpieczeństwo w Internecie. Jest to jednak również jedna z barier, które stale się pojawiają. Często występują one na stronach internetowych, gdzie wymagane jest logowanie. Aby jednak były dostępne dla wszystkich, formularze muszą być zaprojektowane tak, aby były bezproblemowe. Wynika to z faktu, że w wielu przypadkach procedury uwierzytelniania są ograniczone czasowo. Użytkownicy mają 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 to za mało czasu na zalogowanie. Dlatego ważne jest, aby nie ograniczać czasu wprowadzania danych.

Captcha stwarzają kolejny problem. Służą one do identyfikacji użytkownika jako człowieka, a nie komputera. W tym przypadku użytkownik jest proszony o zidentyfikowanie zniekształconego obrazu i wprowadzenie wyniku w polu formularza. Często jednak wszystkie obrazy, na przykład te przedstawiające samochód, muszą zostać kliknięte. Nie zawsze jednak są one dostępne bez barier. Osoby niewidome lub niedowidzące nie są w stanie rozpoznać tych obrazów. Aby ominąć tę barierę, należy zaoferować opcję audio.

Podsumowując, dostępność pól formularzy to ważny krok na drodze do dostępnego środowiska cyfrowego. Stosowanie prawidłowych oznaczeń, przejrzysty i uporządkowany układ, a także obsługa za pomocą klawiatury i komunikatów o błędach zwiększają prawdopodobieństwo, że osoby z niepełnosprawnościami będą mogły samodzielnie wypełniać formularze.