Formularz to element, który umożliwia użytkownikowi wpisywanie danych w polu lub grupie pól. Formularze mogą być proste w postaci pojedynczych pól lub tak skomplikowane, jak wieloetapowe elementy formularza z wieloma polami na stronie, weryfikacja danych wejściowych, czasami CAPTCHA.
Formularze są uważane za jeden z najtrudniejszych elementów do prawidłowego określenia ułatwień dostępu, ponieważ wymagają znajomości wszystkich elementów, które omówiliśmy, a także dodatkowych reguł specyficznych tylko dla formularzy. Potrzeba trochę czasu i wiedzy, by stworzyć przystępny formularz, który będzie odpowiadał Tobie i Twoim użytkownikom.
Formularze to ostatni moduł dotyczący konkretnych komponentów w tym kursie. W tym module skoncentrujemy się na wytycznych związanych z formularzami, ale do elementów formularza mają zastosowanie również wszystkie inne wskazówki omówione w poprzednich modułach, takie jak struktura treści, zaznaczenie klawiatury i kontrast kolorów.
Pola
Szkieletem formularzy są pola. Pola to małe interaktywne wzorce, takie jak element do wprowadzania danych lub przycisk opcji, które umożliwiają użytkownikom wpisywanie treści lub dokonywanie wyboru. Do wyboru jest wiele różnych pól formularza.
Domyślnie zalecamy użycie istniejących wzorców HTML zamiast niestandardowych za pomocą ARIA, ponieważ niektóre funkcje, takie jak stany pól, właściwości i wartości, są od razu wbudowane w elementy HTML, podczas gdy niestandardowe elementy ARIA trzeba dodać ręcznie.
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<form id="sundae-order-form"> <!-- form content --> </form>
Oprócz wybierania najczęściej dostępnych wzorców pól formularza musisz też dodać do pól atrybuty autouzupełniania HTML. Dodanie atrybutów autouzupełniania umożliwia bardziej szczegółową definicję lub identyfikację celu klientów użytkownika i technologii wspomagających.
Atrybuty autouzupełniania umożliwiają użytkownikom personalizację prezentacji wizualnych, np. wyświetlanie ikony tortu urodzinowego w polu z przypisanym do niego atrybutem autouzupełniania urodzin (bday). Atrybuty autouzupełniania ułatwiają i przyspieszają wypełnianie formularzy. Jest to szczególnie przydatne dla osób z zaburzeniami funkcji poznawczych i czytania oraz osób korzystających z transmisji mitów na wczesnym etapie, takich jak czytniki ekranu.
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
Wreszcie pola formularza nie powinny powodować zmian kontekstowych, gdy otrzymują fokus lub dane wejściowe użytkownika, chyba że użytkownik otrzymał ostrzeżenie o zachowaniu przed użyciem komponentu. Na przykład formularz nie powinien być przesyłany automatycznie, gdy pole zostanie zaznaczone lub gdy użytkownik doda do niego treść.
Etykiety
Etykiety informują użytkownika o przeznaczeniu pola (jeśli jest ono wymagane). Mogą też zawierać informacje o wymaganiach dotyczących pól, np. o formacie danych wejściowych. Etykiety muszą być zawsze widoczne i dokładnie opisywać pole formularza dla użytkowników.
Jedną z podstawowych zasad dostępności formularzy jest ustanowienie wyraźnego i precyzyjnego powiązania pola z jego etykietą. Dzieje się tak zarówno wizualnie, jak i automatycznie. Bez tego kontekstu użytkownik może nie wiedzieć, jak wypełnić pola w formularzu.
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
Poza tym powiązane pola formularza, takie jak adres pocztowy, muszą być pogrupowane automatycznie i wizualnie. Jedną z metod jest użycie wzorca fieldset/legend do zgrupowania podobnych elementów.
teksty reklamy;
Opisy pól są podobne do etykiet pod tym względem, że dostarczają więcej informacji o polu i wymaganiach. Opisy pól nie są wymagane w przypadku ułatwień dostępu, jeśli etykiety lub instrukcje dotyczące formularza są wystarczająco opisowe.
Zdarzają się jednak sytuacje, w których dodawanie dodatkowych informacji pozwala uniknąć błędów w formularzu, na przykład przez przekazywanie informacji o minimalnej długości pola hasła lub poinformowanie użytkownika, jakiego formatu kalendarza należy użyć (np. MM-DD-RRRR).
Opisy pól do formularzy można dodawać za pomocą wielu różnych metod. Jedną z najlepszych metod jest dodanie do elementu formularza atrybutu aria-describedby oprócz elementu <label>. Czytnik ekranu odczyta zarówno opis, jak i etykietę.
Jeśli dodasz do elementu atrybut aria-labelledby, jego wartość zastąpi tekst w elemencie <label>. Jak zawsze pamiętaj, aby przetestować ostateczną wersję kodu ze wszystkimi platformami AT, które planujesz obsługiwać.
Błędy
Tworząc ułatwienia dostępu, możesz zrobić wiele rzeczy, by użytkownicy nie popełnili błędów w formularzach. Na początku tego modułu omówiliśmy wyraźnie oznaczanie pól, tworzenie etykiet identyfikujących i dodawanie szczegółowych opisów, gdy tylko było to możliwe. Niezależnie od tego, jak zrozumiały jest Twój formularz, w końcu użytkownik popełni błąd.
Gdy użytkownik napotyka błąd w formularzu, najpierw poinformuj go o tym. Pole, w którym wystąpił błąd, musi być wyraźnie oznaczone, a sam błąd musi być opisany użytkownikowi w formie tekstowej.
Istnieją różne metody wyświetlania komunikatów o błędach, na przykład:
- Wyskakujące okienko w tekście w pobliżu miejsca, w którym wystąpił błąd.
- Zbiór błędów pogrupowany w jeden większy komunikat u góry strony
Pamiętaj, aby przy ogłaszaniu błędów zwracać uwagę na zaznaczony obszar klawiatury i opcje aktywnego regionu ARIA.
W miarę możliwości przedstaw użytkownikowi szczegółową wskazówkę dotyczącą rozwiązania problemu. Istnieją 2 atrybuty umożliwiające powiadamianie użytkowników o błędach.
- Możesz użyć atrybutu HTML required. Przeglądarka wyświetli ogólny komunikat o błędzie na podstawie podanych parametrów weryfikacji.
- Możesz też użyć atrybutu aria-required, by udostępnić u specjalistom spersonalizowane komunikaty o błędach. Wiadomość będzie otrzymywać tylko operatorzy AT, chyba że dodasz dodatkowy kod, który sprawi, że wiadomość będzie widoczna dla wszystkich użytkowników.
Gdy użytkownik uzna, że wszystkie błędy zostały naprawione, pozwól mu ponownie przesłać formularz i przekazać opinię o wynikach przesyłania. Komunikat o błędzie informuje użytkownika, że musi wprowadzić więcej zmian, a komunikat o pomyślnym działaniu informuje o usunięciu wszystkich błędów i przesłaniu formularza.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o dostępnych formularzach
Która z poniższych odpowiedzi jest najłatwiejsza w obsłudze danych w formularzu?
Email address: <input type="email" required><label>Email address: <input type="email" required></label><label>Email address: <input type="email" required autocomplete="email"></label><label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>