Formularze

Formularze są powszechnie używane do zapewnienia interakcji użytkownika na stronach internetowych i aplikacjach internetowych. Na przykład logowanie, rejestracja, komentowanie i zakup. Ten samouczek pokazuje, jak tworzyć dostępne formularze. Te same pojęcia dotyczą wszystkich formularzy niezależnie od tego, czy są przetwarzane po stronie klienta czy po stronie serwera.
Poza aspektami technicznymi użytkownicy preferują zwykle proste i krótkie formularze. Poproś tylko użytkowników o wprowadzenie tego, co jest wymagane do zakończenia transakcji lub procesu; jeśli są wymagane nieistotne lub nadmierne dane, użytkownicy są skłonni porzucić formularz.

  • Etykietowanie elementów sterujących: użyj elementu <label>, a w konkretnych przypadkach innych mechanizmów (np. WAI-ARIA, atrybutu title itd.), aby zidentyfikować każdą kontrolkę formularza.
  • Sterowanie grupowaniem: użyj elementów <fieldset> i <legend> do grupowania i powiązania pokrewnych formantów formularza.
  • Instrukcje dotyczące formularza: podaj instrukcje, które pomogą użytkownikom zrozumieć, jak wypełnić formularz i indywidualne formanty formularza.
  • Sprawdzanie poprawności danych wejściowych: sprawdzanie poprawności wprowadzonych przez użytkownika i udostępnianie opcji cofania zmian i potwierdzania wprowadzania danych.
  • Powiadomienia użytkowników : Powiadamiaj użytkowników o pomyślnym wykonaniu zadania, o wszelkich błędach i udziel instrukcji pomagających im poprawić pomyłki.
  • Formularze wielostronicowe: podziel długie formularze na kilka mniejszych, które stanowią szereg logicznych kroków lub etapów i informują użytkowników o ich postępie.
  • Niestandardowe elementy sterujące: użyj stylizowanych elementów formularza i innych stopniowych technik akwizycji w celu zrozumienia niestandardowych formantów.

Notatka dotycząca terminów

Jeśli to możliwe, formularze nie powinny podlegać ograniczeniom czasu, aby umożliwić użytkownikom wypełnienie formularza w swoim tempie. Jeśli na przykład czas musi być określony, ze względów bezpieczeństwa, użytkownik powinien mieć możliwość jego wyłączenia lub przedłużenia. Ograniczenie to nie ma zastosowania, jeśli termin jest związany z wydarzeniem na żywo, na przykład aukcją lub grą, lub jeśli czas na wypełnienie formularza ma kluczowe znaczenie dla prawidłowego wyniku.

Dlaczego to jest ważne?

Formularze mogą być wizualnie i poznawczo złożone. Dostępne formularze są łatwiejsze w obsłudze dla wszystkich, w tym dla osób niepełnosprawnych.

  • Osoby z zaburzeniami poznawczymi mogą lepiej zrozumieć formularz i jak go wypełnić, ponieważ dostępny formularz ma czytelną strukturę układu, instrukcje i opinie.
  • Osoby używające mechanizmów wprowadzania mowy mogą używać etykiet za pomocą poleceń głosowych, aby włączyć kontrolki i przenieść fokus do pól, które mają wypełnić.
  • Osoby o ograniczonej sprawności korzystają z dużych klikalnych obszarów, które zawierają etykiety, zwłaszcza w przypadku mniejszych formantów, takich jak przyciski i pola wyboru.
  • Osoby korzystające z czytników ekranu mogą łatwiej identyfikować i zrozumieć formanty formularzy, ponieważ są powiązane z etykietami, zestawami pól i innymi elementami strukturalnymi.
Powiązane zasoby WCAG 2.0
Te samouczki zapewniają najlepsze praktyczne wskazówki dotyczące wdrażania dostępności w różnych sytuacjach. Na tej stronie zostały połączone następujące kryteria sukcesu WCAG 2.0 i techniki z różnych poziomów zgodności:
Kryteria powodzenia:

  • 1.3.1 Informacje i relacje: Informacje, struktura i relacje przekazywane przez prezentację mogą być programowo określone lub dostępne w tekście. (Poziom A)
  • 2.4.6 Nagłówki i etykiety: nagłówki i etykiety opisują temat lub cel. (Poziom AA)
  • 3.3.2 Etykiety lub instrukcje: etykiety lub instrukcje są dostarczane, gdy zawartość wymaga wprowadzenia przez użytkownika. (Poziom A)
  • 4.1.2 Nazwa, rola, wartość: dla wszystkich elementów interfejsu użytkownika (w tym między innymi: elementy formularza, linki i komponenty generowane przez skrypty), nazwę i rolę można określić programowo; stany, właściwości i wartości, które mogą być ustawione przez użytkownika, można programowo ustawić; a powiadomienia o zmianach w tych pozycjach są dostępne dla agentów użytkowników, w tym technologii wspomagających. (Poziom A)

Dalej: Etykietowanie elementów sterujących

Na podstawie:
https://www.w3.org/WAI/tutorials/forms/

Popularne posty z tego bloga

Walidatory

Notepad++

Github