Formularze

Formularz to element, który umożliwia użytkownikowi przekazywanie danych w polu lub grupie. kilka pól. Formularze mogą być tak proste, jak pojedyncze pole, lub tak skomplikowane, jak wieloetapowy element formularza z wieloma polami na stronie, czasem jest to CAPTCHA.

Formularze są uważane za jeden z najtrudniejszych elementów ułatwień dostępu, ponieważ wymagają one wiedzy o wszystkich elementach, oraz dodatkowe reguły dotyczące tylko formularzy. Niektóre czas, możesz przygotować przystępny formularz, który będzie odpowiadał użytkowników.

Formularze to ostatni moduł modułu w tym kursie. Ten moduł: skup się na wytycznych dotyczących konkretnych formularzy, omawianych we wcześniejszych modułach, strukturę treści, koncentracja na klawiaturze oraz kontrast kolorów, zastosuj także do formularza .

Pola

Podstawą formularzy są pola. Pola to małe, interaktywne wzorce, takie jak: elementu wejściowego lub opcji, które umożliwiają użytkownikom wpisywanie treści lub tworzenie wyboru. Do wyboru masz wiele różnych pól wybrać opcję.

Domyślnie zalecamy używanie ustalonych wzorców HTML zamiast stworzyć coś niestandardowego za pomocą ARIA. Niektóre funkcje funkcje – takie jak stany pól, właściwości i wartości – są w elementach HTML, ale niestandardową ARIA trzeba dodać ręcznie.

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

<form id="sundae-order-form">
  <!-- form content -->
</form>

Oprócz wyboru najbardziej dostępnych wzorców pól formularza, gdzie w odpowiednich przypadkach, dodaj też Atrybuty autouzupełniania HTML do swoich pól. Dodanie atrybutów autouzupełniania umożliwia większą precyzję, definicja lub określenie celu klientów użytkownika i technologii wspomagających osoby z niepełnosprawnością.

Atrybuty autouzupełniania pozwalają użytkownikom personalizować prezentacje wizualne, na przykład ikona tortu urodzinowego w polu z autouzupełnianiem urodzin (bday). Mówiąc ogólniej, atrybuty autouzupełniania sprawiają, łatwiej i szybciej wypełniać formularze. To bardzo przydatne, z zaburzeniami poznawczymi i czytaniem oraz z zaburzeniami rozpoznawania głosu (ATT), np. ekranem czytelników.

<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 otrzymaniu zaznaczenie lub dane wejściowe użytkownika, chyba że użytkownik został ostrzeżony o zachowaniu przed przy użyciu komponentu. Na przykład formularz nie powinien być przesyłany automatycznie gdy pole zostanie zaznaczone lub użytkownik doda do niego treść.

Etykiety

Etykiety informują użytkownika o przeznaczeniu pola, jeśli pole jest wymagane: a także podać informacje o wymaganiach danej pola, np. dane wejściowe . Etykiety muszą być widoczne przez cały czas i dokładnie opisywać formularz użytkownikom.

Jednym z podstawowych założeń form ułatwień dostępu jest ustanowienie jasnego dokładne połączenie między polem a jego etykietą. Dotyczy to zarówno kwestii wizualnych, oraz w sposób zautomatyzowany. Bez tego kontekstu użytkownik może nie wiedzieć, jak wypełnij 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ć automatycznie i wizualnie. Jedną z metod jest użycie zbioru pól/legendy aby pogrupować podobne elementy.

Teksty reklamy

Opisy pól są podobne do etykiet, ponieważ służą do: nadanie szerszego kontekstu branży i wymogom. Opisy pól nie są wymagane na potrzeby ułatwień dostępu, jeśli etykiety lub instrukcje formularza są opisowe wystarczy.

Istnieją jednak sytuacje, w których podanie dodatkowych informacji jest przydatne, aby uniknąć błędów w formularzu, takich jak przekazywanie informacji o minimalnej długości pola hasła lub formatu kalendarza, który ma zostać użyty (np. w formacie MM-DD-RRRR).

Opisy pól można dodawać do formularzami. Jedną z najlepszych metod jest dodanie atrybutu aria-describedby: do elementu formularza, a także do elementu <label>. Ekran czytelnik przeczyta zarówno opis, jak i etykietę.

Jeśli dodasz parametr aria-labelledby, do elementu, wartość atrybutu zastępuje tekst w atrybucie <label> Jak zawsze pamiętaj, by przetestować ostateczny kod na wszystkich stronach ATT który chcesz obsługiwać.

Błędy

Istnieje wiele sposobów, aby uniemożliwić użytkownikom błędów w formularzu. W tym module omówiliśmy w prosty sposób do tworzenia etykiet identyfikujących i dodawania szczegółowych opisów jak to tylko możliwe. Niezależnie od tego, jak zrozumiały byłby Twój formularz – popełni błąd.

Gdy użytkownik napotyka błąd formularza, pierwszym krokiem jest poinformuj nas o błędzie. Pole, w którym wystąpił błąd, musi być wyraźnie oznaczone, a sam błąd musi być opisana w formie tekstowej.

Istnieją różne metody wyświetlania błędów wyświetlania wiadomości, na przykład:

• Wyskakujące okienko 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

Zwróć uwagę na klawiaturę. i opcje regionu aktywnego ARIA podczas ogłaszania błędów.

O ile to możliwe, zaproponuj szczegółowe wskazówki dotyczące rozwiązania . Do powiadamiania użytkowników o błędach są dostępne 2 atrybuty.

• 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, aby udostępnić dostosowany komunikat o błędzie dostawcom usług reklamowych. Wiadomości będą otrzymywać tylko ATT, chyba że dodasz 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, zezwól mu na ponowne przesłanie zgłoszenia. formularz i przekazać opinię o wynikach przesyłania. Błąd informuje użytkownika, że musi jeszcze wprowadzić zmiany, a komunikat o powodzeniu potwierdza, że rozwiązanie wszystkich błędów i przesłanie formularza jest prawidłowe.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o dostępnych formularzach