Formularz to element, który umożliwia użytkownikowi wprowadzanie danych w polu lub grupie pól. Formularze mogą składać się z jednego pola lub być złożone i wielostopniowe, z wieloma polami na stronie, weryfikacją danych wejściowych i zabezpieczeniem CAPTCHA.
Formularze są uważane za jedne z najtrudniejszych elementów do prawidłowego wdrożenia z punktu widzenia dostępności, ponieważ wymagają znajomości wszystkich elementów, które już omówiliśmy, a także dodatkowych reguł dotyczących tylko formularzy. Poświęć trochę czasu na zrozumienie zasad tworzenia dostępnych formularzy, aby dostosować je do swoich potrzeb i potrzeb użytkowników.
Formularze to ostatni moduł w tym kursie poświęcony konkretnym komponentom. Ta część skupia się na wytycznych dotyczących formularzy, ale wcześniejsze wytyczne z poprzednich części, takie jak struktura treści, skupienie klawiatury i kontrast kolorów, mają również zastosowanie do elementów formularza.
Pola
Podstawą formularzy są pola. Pola to małe interaktywne wzorce, takie jak element wejściowy lub przycisk opcji, które umożliwiają użytkownikom wprowadzanie treści lub dokonywanie wyboru. Możesz wybierać spośród wielu różnych pól formularza.
Domyślnym zaleceniem jest używanie sprawdzonych wzorców HTML zamiast tworzenia niestandardowych rozwiązań z ARIA, ponieważ niektóre funkcje, takie jak stany, właściwości i wartości pól, są wbudowane w elementy HTML. W przypadku pól niestandardowych musisz ręcznie dodać ARIA.
Niezalecane – niestandardowy HTML z ARIA
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
Zalecane – standardowy HTML
<form id="sundae-order-form">
<!-- form content -->
</form>
Oprócz wybrania najbardziej dostępnych wzorców pól formularza, w stosownych przypadkach należy też dodać do pól atrybuty autouzupełniania HTML. Dodanie atrybutów autouzupełniania umożliwia dokładniejsze określenie lub zidentyfikowanie celu dla programów użytkownika i technologii wspomagających.
Atrybuty autouzupełniania umożliwiają użytkownikom personalizowanie prezentacji wizualnych, np. wyświetlanie ikony tortu urodzinowego w polu z przypisanym atrybutem autouzupełniania daty urodzin (bday). Ogólnie rzecz biorąc, atrybuty autouzupełniania ułatwiają i przyspieszają wypełnianie formularzy. Jest to szczególnie przydatne dla osób z zaburzeniami poznawczymi i trudnościami w czytaniu oraz dla użytkowników technologii wspomagających, 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>
Pola formularza nie powinny powodować zmian kontekstowych po uzyskaniu fokusu lub wprowadzeniu danych wejściowych użytkownika, chyba że użytkownik został wcześniej ostrzeżony o takim działaniu przed użyciem komponentu. Na przykład formularz nie powinien być automatycznie przesyłany, gdy pole zostanie zaznaczone lub gdy użytkownik doda do niego treść.
Etykiety
Etykiety informują użytkownika o przeznaczeniu pola, o tym, czy jest ono wymagane, a także mogą zawierać informacje o wymaganiach dotyczących pola, np. o formacie danych wejściowych. Etykiety muszą być zawsze widoczne i dokładnie opisywać użytkownikom pole formularza.
Jedną z podstawowych zasad dostępnych formularzy jest ustanowienie jasnego i dokładnego połączenia między polem a jego etykietą. Dotyczy to zarówno wyglądu, jak i programowania. 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>
Dodatkowo powiązane pola formularza, takie jak adres pocztowy, muszą być zgrupowane programowo i wizualnie. Jedną z metod jest użycie wzorca fieldset i legend do grupowania podobnych elementów.
Teksty reklamy
Opisy pól są podobne do etykiet, ponieważ służą do przekazywania dodatkowych informacji o polu i wymaganiach. Opisy pól nie są wymagane w celu zapewnienia dostępności, jeśli etykiety lub instrukcje formularza są wystarczająco opisowe.
Są jednak sytuacje, w których dodanie dodatkowych informacji jest przydatne, aby uniknąć błędów w formularzu, np. przekazanie informacji o minimalnej długości danych wejściowych w polu hasła lub poinformowanie użytkownika, jakiego formatu kalendarza ma użyć (np. MM-DD-RRRR).
Opisy pól w formularzach możesz dodawać na wiele sposobów. Jedną z najlepszych metod jest dodanie do elementu formularza atrybutu aria-describedby oraz elementu <label>. Czytnik ekranu odczyta zarówno opis, jak i etykietę.
Jeśli do elementu dodasz atrybut aria-labelledby, wartość atrybutu zastąpi tekst w elemencie <label>. Jak zawsze, przetestuj końcowy kod za pomocą wszystkich technologii wspomagających, które chcesz obsługiwać.
Błędy
Podczas tworzenia formularzy dostępnych dla osób z niepełnosprawnościami możesz zrobić wiele, aby zapobiec popełnianiu błędów przez użytkowników. Wcześniej w tym module omówiliśmy wyraźne oznaczanie pól, tworzenie etykiet identyfikacyjnych i dodawanie szczegółowych opisów, gdy tylko jest to możliwe. Niezależnie od tego, jak przejrzysty wydaje Ci się formularz, w końcu użytkownik popełni błąd.
Gdy użytkownik napotka błąd w formularzu, pierwszym krokiem jest poinformowanie go o tym. Pole, w którym wystąpił błąd, musi być wyraźnie wskazane, a sam błąd musi być opisany użytkownikowi w formie tekstowej.
Istnieją różne metody wyświetlania komunikatów o błędach, takie jak:
- w oknie modalnym, w pobliżu miejsca, w którym wystąpił błąd;
- Zbiór błędów zgrupowanych w jednym większym komunikacie u góry strony
Podczas ogłaszania błędów zwracaj uwagę na fokus klawiatury i opcje aktywnego regionu ARIA.
W miarę możliwości zaproponuj użytkownikowi szczegółowe rozwiązanie problemu. Do powiadamiania użytkowników o błędach służą 2 atrybuty.
- Możesz użyć atrybutu HTML required. Przeglądarka wyświetla ogólny komunikat o błędzie na podstawie parametrów weryfikacji pliku.
- Możesz też użyć atrybutu aria-required, aby udostępnić technologiom wspomagającym niestandardowy komunikat o błędzie. Ten komunikat jest odbierany tylko przez technologie wspomagające, chyba że dodasz kod, aby był widoczny dla wszystkich użytkowników.
Gdy użytkownik uzna, że wszystkie błędy zostały rozwiązane, zezwól mu na ponowne przesłanie formularza i przekazanie opinii o wynikach przesłania. Komunikat o błędzie informuje użytkownika, że musi wprowadzić więcej zmian, a komunikat o sukcesie potwierdza, że rozwiązał wszystkie problemy i przesłał formularz.
Dodatkowe kryteria sukcesu
W WCAG 2.2 wprowadzono te kryteria sukcesu, które koncentrują się na bardziej dostępnych formularzach: