Formularz jest przeznaczony dla ludzi. Ludzie korzystają z różnych urządzeń. Część urządzeń obsługuje mysz, inne urządzenia dotykowe, inne klawiaturę, a jeszcze inne urządzenia sterowane ruchami gałek ocznych. Niektóre są wyposażone w czytnik ekranu, inne na małym ekranie, a jeszcze inne używają oprogramowania do powiększania tekstu. Wszyscy chcą użyć Twojego formularza. Dowiedz się, co zrobić, aby formularz był łatwo dostępny dla wszystkich.
Zadbaj o to, by użytkownicy rozumieli przeznaczenie pola formularza
Masz do wyboru wiele ustawień formularzy.
Co łączy je wszystkie?
Każdy element sterujący formularza musi mieć powiązany element <label>.
Element <label> opisuje przeznaczenie elementu sterującego formularza.
Tekst <label> jest wizualnie powiązany z elementem sterującym formularza i jest odczytywany przez czytniki ekranu.
Dodatkowo kliknięcie <label> powoduje wyświetlenie powiązanego elementu sterującego formularza, dzięki czemu staje się on większym celem.
Używaj zrozumiałego kodu HTML, aby korzystać z wbudowanych funkcji przeglądarki.
Teoretycznie możesz utworzyć formularz, używając tylko elementów <div>.
Możesz nawet nadać jej wygląd jak rodzimy język <form>.
Na czym polega problem z użyciem elementów niesemantycznych?
Wbudowane elementy formularzy mają wiele wbudowanych funkcji. Przeanalizujmy przykład.
Pod względem wizualnym element <input> (pierwszy w przykładzie) i <div> wyglądają tak samo.
W obu przypadkach możesz wstawić tekst, ponieważ <div> ma atrybut contenteditable.
Istnieje jednak wiele różnic między użyciem odpowiedniego elementu <input> a użyciem elementu <div> wyglądającego jak <input>.
Użytkownik czytnika ekranu nie rozpoznaje <div> jako elementu wejściowego i nie może wypełnić formularza.
Użytkownik czytnika ekranu usłyszy tylko „Nazwa” bez wskazania, że element to element sterujący do dodawania tekstu.
Kliknięcie <div>Name</div> nie powoduje zaznaczenia elementu <div>, który się z nim kontaktuje, natomiast obiekty <label> i <input> są połączone za pomocą atrybutów for i id.
Po przesłaniu formularza dane podane w polu <div> nie zostaną uwzględnione w prośbie.
Dołączanie danych za pomocą JavaScriptu jest możliwe, ale <input> robi to domyślnie.
Wbudowane elementy formularzy mają inne funkcje.
Na przykład przy odpowiednich elementach formularza i prawidłowym inputmode lub type odpowiednie znaki są wyświetlane na klawiaturze ekranowej. Nie można tego zrobić przy użyciu atrybutu inputmode elementu <div>.
Sprawdź, czy użytkownicy znają oczekiwany format danych
Możesz zdefiniować różne reguły weryfikacji dla elementu sterującego formularza.
Załóżmy, że pole formularza powinno zawsze zawierać co najmniej 8 znaków.
Używasz atrybutu minlength, który wskazuje regułę weryfikacji przeglądarkom.
Co zrobić, aby użytkownicy też wiedzieli o regule weryfikacji? Powiedz im.
Dodaj informacje o oczekiwanym formacie bezpośrednio pod elementem sterującym formularza.
Aby było jasne dla urządzeń wspomagających, użyj atrybutu aria-describedby w sterowaniu formularza i atrybutu id w komunikacie o błędzie z tą samą wartością, aby połączyć oba elementy.
Ułatwianie użytkownikom znalezienia komunikatu o błędzie dotyczącego elementu sterującego formularza
W poprzednim module poświęconym weryfikacji omówiliśmy, jak wyświetlać komunikaty o błędach w przypadku nieprawidłowego wprowadzenia danych.
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
Jeśli na przykład pole ma atrybut required i wpisane są nieprawidłowe dane, podczas przesyłania formularza przeglądarka wyświetli komunikat o błędzie obok elementu sterującego formularza. Czytniki ekranu również odczytują ten komunikat o błędzie.
Możesz też zdefiniować własny komunikat o błędzie:
W tym przykładzie trzeba wprowadzić więcej zmian, aby połączyć komunikat o błędzie z elementem sterującym formularza.
Prostym sposobem jest użycie atrybutu aria-describedby w elemencie sterującym formularza, który jest zgodny z atrybutem id w elemencie komunikatu o błędzie.
Następnie użyj aria-live="assertive", aby wyświetlić komunikat o błędzie.
Aktywne regiony ARIA informują użytkowników czytników ekranu o błędzie w momencie wyświetlenia błędu.
Problem z tym podejściem w przypadku formularzy z wieloma polami polega na tym, że w przypadku wielu błędów aria-live zazwyczaj informuje o pierwszym błędzie.
Jak wyjaśniliśmy w tym artykule dotyczącym wielu ogłoszeń aria-live dotyczących tego samego działania, możesz utworzyć 1 wiadomość przez połączenie wszystkich błędów. Inną metodą jest informowanie o błędach, a następnie ogłaszanie poszczególnych błędów, gdy pole jest zaznaczone.
Sprawdź, czy użytkownicy rozpoznają błędy
Czasami projektanci oznaczają nieprawidłowy stan na czerwony, używając pseudoklasy :invalid.
Jednak przy informowaniu o błędzie lub sukcesie
nie należy polegać tylko na kolorze.
Dla osób z ślepotą na czerwono-zielone obramowanie
zielone i czerwone obramowanie wygląda prawie tak samo.
Nie można sprawdzić, czy komunikat jest związany z błędem.
Oprócz koloru użyj ikony lub poprzedź komunikat o błędzie typ błędu.
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
Pomóż użytkownikom poruszać się po formularzu
Kolejność elementów sterujących formularza możesz zmieniać za pomocą CSS. Rozłączenie między porządkiem wizualnym a nawigacją za pomocą klawiatury (kolejność DOM) stanowi problem dla użytkowników czytników ekranu i klawiatury.
Dowiedz się więcej o tym, jak zadbać o to, aby porządek wizualny na stronie był zgodny z kolejnością DOM.
Pomaganie użytkownikom w identyfikacji aktualnie zaznaczonego elementu sterującego formularza
Aby poruszać się po tym formularzu, użyj klawiatury.
Czy wiesz, że po aktywowaniu elementów sterujących formularza zmienił się ich styl?
Jest to domyślny styl fokusu.
Możesz ją zastąpić pseudoklasą CSS :focus.
Niezależnie od stylów używanych w funkcji :focus zawsze upewnij się, że różnica wizualna między stanem domyślnym a stanem zaznaczenia jest rozpoznawalna.
Dowiedz się więcej o projektowaniu wskaźników ostrości.
Zadbaj o to, aby formularz był użyteczny
Aby zidentyfikować wiele częstych problemów, wypełnij formularz na różnych urządzeniach. Używaj tylko klawiatury, czytnika ekranu (np. NVDA w systemie Windows lub VoiceOver na Macu) lub powiększ stronę do 200%. Zawsze testuj formularze na różnych platformach, zwłaszcza na urządzeniach lub ustawieniach, których nie używasz codziennie. Znasz kogoś, kto używa czytnika ekranu lub oprogramowania do powiększania tekstu? Poproś o wypełnienie formularza. Opinie o ułatwieniach dostępu są świetne, a testowanie z udziałem prawdziwych użytkowników jest jeszcze lepsze.
Dowiedz się więcej o sprawdzaniu ułatwień dostępu i o testach z udziałem prawdziwych użytkowników.