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

Każdy miał kiedyś do czynienia z formularzami. W przeszłości bardziej 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 jest to komunikacja w Internecie, czy zamawianie przedmiotu, można je znaleźć wszędzie. Ma to również wpływ na wyszukiwanie w Internecie, na przykład za pomocą Google. Wypełnianie tych formularzy jest trudniejsze dla osób z upośledzeniami fizycznymi, a nawet poznawczymi, a także dla osób niewidomych i niedowidzących. Aby umożliwić wszystkim ludziom uczestnictwo w życiu publicznym, formularze te muszą być zaprojektowane tak, aby były wolne od barier. Ale: Jak właściwie tworzyć dostępne elementy formularzy?

Istnieje na to kilka technik. Zanim jednak zajmiemy się technikami, należy poznać elementy formularza. Można je podzielić na różne typy. Istnieją między innymi następujące typy

• jednowierszowe pola wejściowe

• wielowierszowe obszary wejściowe

• Listy wyboru

• Przyciski radiowe

• Pola wyboru

• Przyciski przesyłania/anulowania

Etykietowanie pól formularza

Aby osiągnąć dostępność formularzy, różne elementy sterujące muszą być oznaczone etykietami. Etykiety te pozwalają technologiom wspomagającym rozpoznać funkcje elementów sterujących i przekazać je użytkownikowi. Ważne jest, aby etykiety były wyraźnie powiązane z kontrolkami, w przeciwnym razie czytniki ekranu nie będą w stanie połączyć się z elementami. W rezultacie użytkownicy mają trudności ze zrozumieniem formularza. Nie mogą 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 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 kontrolkami. 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ć przesyłanie lub anulowanie w formularzu. Atrybuty aria sprawiają, że opisy odpowiednich elementów są rozpoznawalne tylko dla technologii wspomagających. Dlatego mogą 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ą wykorzystywane do poprawy dostępności stron internetowych. Różnią się one jednak typem i funkcją. Tak zwana aria-label służy do etykietowania elementu. Oczywiście możliwe jest również użycie tej samej etykiety dla wielu elementów. Jest to możliwe dzięki aria-labelledby.

Pojedyncze i wielowierszowe pola wprowadzania

Pola wejściowe są jednym z najczęściej używanych elementów formularzy. Mogą być jednowierszowe lub wielowierszowe. Pola jednowierszowe są używane do krótkich zapytań, takich jak imię i nazwisko osoby, adres e-mail, adres ulicy lub miasto.

Są one tworzone w HTML za pomocą input-Tag i atrybutu type.

Ponadto można dodać inne atrybuty, które definiują na przykład długość linii.

Pola wielowierszowe są zwykle używane dla większych obszarów tekstowych, takich jak wiadomości tekstowe. Są one następnie tworzone za pomocą znacznika textarea. Ponownie, deweloper może określić liczbę linii i długość linii. Aby jednak pola te były dostępne, należy dodać znacznik label. Nie jest jednak możliwe utworzenie powiązania między etykietą a elementami, jeśli nie są one jednoznacznie przypisane. Muszą one zostać połączone 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>

W tym przypadku najpierw tworzone jest jednowierszowe pole wejściowe dla imienia o typie "text". Etykieta "Twoje imię:" jest widoczna dla wszystkich za pomocą elementu label. Jest ona umieszczana przed elementem input, ponieważ jest wyświetlana przed polem input. Atrybut for w elemencie label-Tag i atrybut id w elemencie input łączą ze sobą te obszary. Ważne jest, aby obie zawartości były identyczne, 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 ze znacznikiem "textarea". Etykieta "Twoja wiadomość:" pojawia się tutaj za pośrednictwem elementu label. Również w tym przypadku dwa obszary z tą samą zawartością tekstową są połączone za pomocą atrybutów for i id.

Uwagi ogólne

Ogólnie rzecz biorąc, formularze powinny być jasne i jednoznaczne. Przewidywalność jest również bardzo pomocna. Pozwala to użytkownikom szybko zorientować się, 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ę. Ponadto można je odróżnić 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 możliwość obsługi za pomocą klawiatury. Są ludzie, którzy nie mogą używać myszy z powodu swojej niepełnosprawności. Dlatego tym ważniejsze jest projektowanie formularzy w taki sposób, aby można było po nich nawigować również za pomocą klawiatury. Użycie elementów etykiet i atrybutów aria sprawia, że formularze są łatwiejsze do zrozumienia i obsługi. Innym sposobem na uproszczenie obsługi za pomocą klawiatury jest użycie skrótów klawiaturowych. W tym przypadku elementy formularza mogą być przechowywane ze skrótami klawiaturowymi. 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 wstawiany do elementu, dla którego ma być używany. Tam po prostu przypisywany jest klawisz, który jest następnie używany do polecenia klawiaturowego. 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).

Upewnij się jednak, że ten skrót klawiaturowy nie jest już używany dla innego polecenia w przeglądarce.

Redukcja do minimum

Podobnie, zaleca się ograniczenie całej sprawy do niezbędnego minimum, aby nie nakładać niepotrzebnego obciążenia na osoby niepełnosprawne. Dlatego należy żądać tylko absolutnie niezbędnych danych. Należy zrezygnować z zapytań o już istniejące dane. 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, gdy są potrzebne. Na przykład zapytanie o wiek dzieci nie ma sensu, jeśli wcześniej wybrano, że nie ma dzieci.

Pomoc i komunikaty o błędach

Ponadto powinna być oferowana pomoc przy wprowadzaniu danych. Może ona mieć formę okna dialogowego lub podpowiedzi. Z ich pomocą dane wejściowe mogą być wyjaśnione bardziej szczegółowo. Inną możliwością byłoby umieszczenie linku do osobnej strony pomocy. Ogromnie zwiększyłoby to wskaźnik sukcesu. Błędy wciąż się zdarzają. Ważne 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. Poprawne byłoby tutaj: "Wprowadzone hasło jest nieprawidłowe. Wprowadź poprawne hasło". 

Istnieje kilka rodzajów 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ć, gdy wprowadzona zostanie nieprawidłowa wartość pomimo prawidłowego formatu. Przykładem może być wprowadzenie wartości 34 dla znacznika daty. Komunikat brzmiałby wówczas na przykład: "Miesiąc marzec ma 31 dni. Wprowadź znacznik ponownie".

Innym rodzajem błędu są nieprawidłowe dane wejściowe. W tym przypadku deweloper określa wartości, które są nieprawidłowe. Wreszcie, istnieje typ błędu, gdy nie wprowadzono żadnych danych dla pól obowiązkowych. Dzieje się tak na przykład, 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. Na wielu stronach internetowych nie będzie 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 "*" wyświetlane 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świetlenie tych obowiązkowych pól 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 to czytnik ekranu, że jest to wymagane pole.

Symbol zastępczy

Jednym ze sposobów na uczynienie formularzy jeszcze bardziej zrozumiałymi i przyjaznymi dla użytkownika jest użycie 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 skupieniu się na nim i można je zastąpić rzeczywistą zawartością pola formularza. Symbole zastępcze można łatwo wstawić do elementu wejściowego HTML pola formularza za pomocą atrybutu placeholder.

Zapisywanie danych wejściowych

Wszyscy użytkownicy powinni mieć możliwość zapisywania swoich wpisów. Problemy pojawiają się wielokrotnie w przypadku dłuższych formularzy. Aby uniknąć utraty danych, można je zapisać. W tym celu można zaimplementować przycisk, który zapisuje bieżący stan. Ułatwia to wypełnianie złożonych formularzy. Ma to również tę zaletę, że brakujące wpisy można uzupełnić w późniejszym czasie. Dzieje się tak, ponieważ powtarzanie tych wpisów powoduje, że niektórzy użytkownicy przestają wypełniać formularz. 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. Jest to jednak również jedna z barier, które wciąż się pojawiają. Często występują one na stronach internetowych, gdzie wymagane jest logowanie. Aby jednak były one dostępne dla wszystkich, formularze muszą być zaprojektowane tak, aby były wolne od barier. Wynika to z faktu, że w wielu przypadkach procedury uwierzytelniania są ograniczone czasowo. Ludzie mają 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 ograniczać czasu wprowadzania danych.

Captcha stanowią kolejny problem. Są one używane 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 muszą zostać kliknięte, na przykład te przedstawiające samochód. Jednak nie zawsze są one pozbawione barier. Osoby niewidome lub niedowidzące nie mogą rozpoznać tych obrazów. Aby obejść tę barierę, należy zaoferować opcję audio.

Podsumowując, dostępne projektowanie pól formularzy jest ważnym krokiem na drodze do dostępnego środowiska cyfrowego. Zastosowanie prawidłowych oznaczeń, przejrzystego i uporządkowanego układu, a także obsługa za pomocą klawiatury i odpowiednie komunikaty o błędach zwiększają prawdopodobieństwo, że osoby niepełnosprawne będą również w stanie samodzielnie wypełniać formularze.