Każdy miał kiedyś do czynienia z formularzami. W przeszłości bardziej na papierze. Obecnie są to coraz częściej formularze cyfrowe, ponieważ są one wykorzystywane do interakcji użytkownika ze stroną internetową. Czy to podczas komunikacji online, czy zamawiania produktu, można je znaleźć wszędzie. Ma to również wpływ na wyszukiwanie w Internecie, na przykład w Google. Wypełnianie tych formularzy jest trudne dla osób z upośledzeniami fizycznymi lub poznawczymi, a także dla osób niewidomych i niedowidzących. Aby umożliwić wszystkim uczestnictwo w życiu publicznym, formularze te muszą być zaprojektowane tak, aby były dostępne. Ale jak właściwie tworzyć dostępne elementy formularzy?
Istnieją na to różne techniki. Zanim jednak przejdziesz do technik, powinieneś zapoznać się z elementami formularza. Można je podzielić na różne typy. Istnieją między innymi następujące typy
- Pola wejściowe jednowierszowe
- wieloliniowe obszary wejściowe
- Listy wyboru
- Przyciski radiowe
- Pola wyboru
- Przyciski wysyłania/anulowania
Etykietowanie pól formularzy
Aby zapewnić dostępność formularzy, różne elementy sterujące muszą być oznaczone etykietami. Etykiety te umożliwiają technologiom wspomagającym rozpoznanie funkcji elementów sterujących i przekazanie ich użytkownikowi. Ważne jest, aby etykiety były wyraźnie powiązane z elementami sterującymi, w przeciwnym razie czytniki ekranu nie będą w stanie nawiązać połączenia z elementami. W rezultacie użytkownicy będą mieli trudności ze zrozumieniem formularza. Nie będą w stanie rozpoznać, które 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 nie wszystkie opisy są oznaczone tak samo. Decydującym czynnikiem jest to, czy powinny być one widoczne dla wszystkich, czy też nie. W języku programowania HTML rozróżnia się zatem element label i atrybuty aria. Element label jest używany dla pól wejściowych, list wyboru, przycisków radiowych i pól wyboru i musi być odpowiednio umieszczony. W przypadku pól wejściowych i list wyboru etykieta jest umieszczana przed elementami sterującymi. Jednak w przypadku przycisków radiowych i pól wyboru są one umieszczane po elemencie sterującym. Atrybut for musi zostać dodany, 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ć funkcję wysyłania lub anulowania w formularzu. Dzięki atrybutom aria opisy odpowiednich elementów są rozpoznawalne tylko dla technologii wspomagających. Mogą więc być również używane do pól wejściowych, które powinny być widoczne tylko dla czytnika ekranu. Istnieje wiele atrybutów aria, które są używane do poprawy dostępności w Internecie. Różnią się one jednak typem i funkcją. Tak zwana aria-label służy do oznaczania elementu. Oczywiście możliwe jest również użycie tej samej etykiety dla kilku elementów. Jest to możliwe dzięki aria-labelledby.
Pojedyncze i wielowierszowe pola wprowadzania
Pola wejściowe są jednymi z najczęściej używanych elementów formularzy. Mogą być jednowierszowe lub wielowierszowe. Pola jednowierszowe są używane do krótkich zapytań, np. o imię i nazwisko osoby, adres e-mail, ulicę lub miasto.
Są one tworzone w HTML za pomocą znacznika input i atrybutu type.
Można również dodać dodatkowe atrybuty, np. w celu zdefiniowania długości linii.
Pola wielowierszowe są zwykle używane do większych obszarów tekstowych, takich jak wiadomości tekstowe. Są one następnie tworzone za pomocą znacznika textarea. Również w tym przypadku programista może określić liczbę wierszy i długość wiersza. Aby jednak te pola były dostępne, należy dodać znacznik etykiety. Nie jest jednak możliwe utworzenie powiązania między etykietą a elementami, jeśli nie są one wyraźnie przypisane. Muszą one być połączone ze sobą za pomocą atrybutu for i atrybutu id. W poniższym przykładzie HTML proste etykiety są zaimplementowane w takich polach wejściowych.
<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>
Najpierw tworzone jest jednowierszowe pole wejściowe dla imienia o typie "text". Etykieta "Twoje imię:" jest widoczna dla wszystkich za pomocą elementu label. Jest on umieszczony przed elementem input, ponieważ jest wyprowadzany przed polem input. Obszary te są połączone ze sobą za pomocą atrybutu for w znaczniku label i atrybutu id w elemencie input. Ważne jest, aby obie zawartości były identyczne, ponieważ w przeciwnym razie nie można ich połączyć. Atrybut name służy jako identyfikator tego pola i jest wymagany do przesyłania danych na stronę serwera.
Następnie tworzony jest wielowierszowy obszar wprowadzania za pomocą znacznika "textarea". Element label wyświetla następnie napis "Twoja wiadomość:". Również w tym przypadku dwa obszary z tą samą zawartością tekstową są ze sobą połączone za pomocą atrybutów for i id.
Informacje ogólne
Ogólnie rzecz biorąc, formularze powinny być jasne i jednoznaczne. Przewidywalność jest również bardzo pomocna. Pozwala to użytkownikom szybko rozpoznać, czego się od nich wymaga. Bardzo ważna jest również przejrzysta i sensowna struktura. Powiązane elementy treści można grupować razem. Logicznie oddzielone jednostki można również wizualnie rozdzielić. Ułatwia to orientację. Można je również oddzielić od siebie kolorem. Ważne jest, aby zachować minimalny kontrast 4,5:1.
Obsługa klawiatury
Jedną z najważniejszych cech dostępnego projektu pól formularzy jest to, że można je obsługiwać za pomocą klawiatury. Są ludzie, którzy nie mogą używać myszy z powodu swojej niepełnosprawności. Tym ważniejsze jest projektowanie formularzy w taki sposób, aby można było po nich nawigować również za pomocą klawiatury. Korzystanie z elementów etykiet i atrybutów aria ułatwia zrozumienie i korzystanie z formularzy. Innym sposobem na uproszczenie obsługi za pomocą klawiatury jest użycie skrótów klawiaturowych. Elementom formularza można tutaj przypisać kombinacje klawiszy. Może to pomóc w szybszym dotarciu do niektórych obszarów lub szybszej obsłudze funkcji. Do tego celu służy atrybut accesskey w HTML. Atrybut ten jest dodawany do elementu, dla którego ma być używany. Klawisz, który jest następnie używany do polecenia klawiaturowego, jest tam po prostu przypisany. Na przykład, jeśli przypiszesz klawisz "n" do pola lub przycisku, można go obsługiwać w systemie Windows za pomocą skrótu klawiaturowego (Alt + n).
Ważne jest jednak, aby upewnić się, że ten skrót nie jest już używany dla innego polecenia w przeglądarce.
Redukcja do minimum
Zaleca się również ograniczenie całego procesu do niezbędnego minimum, aby nie obciążać niepotrzebnie osób niepełnosprawnych. Dlatego należy żądać tylko absolutnie niezbędnych danych. Istniejące dane nie powinny być wymagane. Ponadto widoczność pól formularza można dostosować do sytuacji. Opcjonalne pola wejściowe lub pola powiązane z warunkami nie muszą być widoczne. Mogą być wyświetlane, jeśli są wymagane. Na przykład nie ma sensu pytać o wiek dzieci, jeśli wcześniej wybrano, że nie ma dzieci.
Pomoc i komunikaty o błędach
Należy również zapewnić pomoc przy wprowadzaniu danych. Może ona przybrać formę okna dialogowego lub podpowiedzi. Można ich użyć do bardziej szczegółowego wyjaśnienia wprowadzanych danych. Inną opcją może być link do osobnej strony pomocy. Ogromnie zwiększyłoby to wskaźnik sukcesu. Błędy wciąż się zdarzają. Istotne są wtedy znaczące komunikaty o błędach. Na przykład, jeśli hasło zostało wprowadzone nieprawidłowo podczas logowania, komunikat "Nazwa użytkownika lub hasło jest nieprawidłowe" nie powinien się pojawiać. Lepiej jest odfiltrować błąd. Prawidłowe byłoby tutaj: "Wprowadzone hasło jest nieprawidłowe. Wprowadź poprawne hasło".
Istnieją różne rodzaje błędów. Po pierwsze, błąd formatu. W tym przypadku hasło jest wprowadzane w niewłaściwym formacie. Na przykład litery są wprowadzane zamiast cyfr. Mogą również wystąpić błędy wartości. Może się to zdarzyć, jeśli wprowadzona zostanie nieprawidłowa wartość pomimo prawidłowego formatu. Przykładem może być wprowadzenie wartości 34 dla dnia daty. Komunikat brzmiałby wtedy: "Miesiąc marzec ma 31 dni. Wprowadź ten dzień ponownie".
Innym rodzajem błędu są nieprawidłowe wpisy. W tym przypadku deweloper określa wartości, które są nieprawidłowe. Wreszcie, istnieje typ błędu, gdy nie dokonano wpisu dla pól obowiązkowych. Dzieje się tak na przykład, gdy zapytanie o adres e-mail jest polem obowiązkowym, a wpis został zapomniany. Jednak często zdarza się to również w przypadku ogólnych warunków. Na wielu stronach internetowych nie można kontynuować bez wyrażenia zgody na to oświadczenie.
Pola obowiązkowe
Formularze często zawierają pola obowiązkowe. Muszą one być oznaczone jako takie. Często używanym symbolem oznaczającym pole obowiązkowe jest "*", który jest wyświetlany obok pola formularza. W takim przypadku należy jednak wskazać na początku formularza, że pola oznaczone gwiazdką są obowiązkowe. Inną opcją jest wyświetlenie tych obowiązkowych pól w innym kolorze lub odcieniu. 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 to czytnik ekranu, że jest to pole obowiązkowe.
Symbol zastępczy
Jednym ze sposobów na uczynienie formularzy jeszcze łatwiejszymi do zrozumienia i bardziej przyjaznymi dla użytkownika jest użycie symboli zastępczych w polach formularza. Placeholdery to tymczasowe teksty, które są wyświetlane w polu formularza, aby wskazać użytkownikowi, jaki rodzaj informacji należy wprowadzić. Teksty te znikają, gdy tylko pole formularza zostanie kliknięte lub skupione i mogą zostać zastąpione rzeczywistą zawartością pola formularza. Symbole zastępcze można łatwo wstawić do elementu wejściowego HTML pola formularza za pomocą atrybutu placeholder.
Zapisywanie wpisów
Wszyscy użytkownicy powinni mieć możliwość zapisywania swoich wpisów. Zawsze występują problemy z dłuższymi formularzami. Aby uniknąć utraty danych, można je zapisać. W tym celu można zaimplementować przycisk, który zapisuje bieżący status. Ułatwia to wypełnianie złożonych formularzy. Ma to również tę zaletę, że brakujące wpisy można dodać w późniejszym terminie. Dzieje się tak, ponieważ powtarzanie tych wpisów prowadzi do tego, że niektórzy użytkownicy nie wypełniają dalej formularza. Może to być irytujące zarówno dla operatora strony, jak i użytkownika.
Uwierzytelnianie i limit czasu
Uwierzytelnianie zwiększa bezpieczeństwo w Internecie. Jednak jest to również jedna z barier, które pojawiają się raz po raz. Często występują one na stronach internetowych, gdzie wymagane jest logowanie. Aby jednak zapewnić, że są one dostępne dla wszystkich, formularze muszą być zaprojektowane tak, aby były wolne od barier. W wielu przypadkach procedury uwierzytelniania są ograniczone czasowo. Użytkownik ma wtedy bardzo mało czasu na zalogowanie się. Często jest to tylko 30 lub 60 sekund. Dla wielu osób niepełnosprawnych nie jest to wystarczający czas na zalogowanie się. Dlatego ważne jest, aby nie ustawiać limitu czasu na logowanie.
Captcha stanowią kolejny problem. Są one używane do identyfikacji użytkownika jako osoby, a nie komputera. W tym przypadku użytkownik jest proszony o zidentyfikowanie zniekształconego obrazu i wprowadzenie wyniku w polu formularza. Często jednak konieczne jest kliknięcie wszystkich obrazów przedstawiających na przykład samochód. Nie zawsze są one jednak dostępne. Osoby niewidome lub niedowidzące nie mogą rozpoznać tych obrazów. Aby pokonać tę barierę, należy zaoferować opcję audio.
Podsumowując, można powiedzieć, że dostępne projektowanie pól formularzy jest ważnym krokiem w kierunku dostępnego środowiska cyfrowego. Zastosowanie prawidłowego oznakowania, przejrzystego i uporządkowanego układu, a także obsługa za pomocą klawiatury i odpowiednich komunikatów o błędach zwiększają prawdopodobieństwo, że osoby niepełnosprawne będą w stanie samodzielnie wypełnić formularze.
