Każdy z nas 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 przy zamawianiu 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?
Są na to różne techniki. Zanim jednak zajmą się Państwo tymi technikami, należy zapoznać się z elementami formularza. Można je podzielić na różne typy. Istnieją między innymi następujące typy
- Jednowierszowe pola wprowadzania
- wieloliniowe obszary wejściowe
- Listy wyboru
- Przyciski radiowe
- Pola wyboru
- Przyciski wysyłania/anulowania
Etykietowanie pól formularza
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 w ten sam sposób. Decydującym czynnikiem jest to, czy powinny one być widoczne dla wszystkich, czy też nie. W języku programowania HTML rozróżnia się zatem element label i atrybuty aria. Element etykiety 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. Można je zatem stosować również do pól wejściowych, które powinny być widoczne tylko dla czytnika ekranu. Istnieje wiele atrybutów aria, które są wykorzystywane 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 z input-Tag i atrybutem type.
Można również dodać dodatkowe atrybuty, np. w celu określenia długości linii.
Pola wielowierszowe są zwykle używane w przypadku większych obszarów tekstowych, takich jak wiadomości tekstowe. Są one następnie tworzone za pomocą textarea-Tag . 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ć etykietę-Tag . 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 "Pana/Pani imię:" jest widoczna dla wszystkich za pomocą elementu label. Jest on umieszczany przed elementem input, ponieważ jest wyświetlany przed polem input. Atrybut for w elemencie label-Tag i atrybut id w elemencie input służą do łączenia tych obszarów. Ważne jest, aby obie treś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 wejściowy o nazwie Tag "textarea". Element label wyświetla następnie napis "Państwa 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ż oddzielić wizualnie. 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 projektowania pól formularzy jest ich obsługa za pomocą klawiatury. Są osoby, które ze względu na swoją niepełnosprawność nie mogą korzystać z myszy. 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 po prostu przypisywany do tego elementu. Na przykład, jeśli przypiszemy 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. W związku z tym należy żądać jedynie 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 wybrali Państwo, ż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 je wykorzystać 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ą zatem 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 są nieprawidłowe" nie powinien się pojawić. Lepiej jest odfiltrować błąd. Prawidłowe byłoby tutaj: "Wprowadzone hasło jest nieprawidłowe. Proszę wprowadzić 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 daty Tag . Komunikat brzmiałby wtedy: "Miesiąc marzec ma 31 dni. Proszę wprowadzić Tag 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, jeśli 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 również mogli je 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. Powtarzanie tych wpisów prowadzi do tego, że niektórzy użytkownicy nie wypełniają 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. Jest to jednak również jedna z barier, które pojawiają się raz po raz. Często występują one na stronach internetowych, na których 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 wykorzystywane 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 wszystkie obrazy muszą być również kliknięte, na przykład te przedstawiające 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 ustrukturyzowanego 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ą również w stanie samodzielnie wypełnić formularze.
