Formularz, który tworzysz, jest przeznaczony dla ludzi. Użytkownicy korzystają z różnych urządzeń. Niektórzy używają myszy, innych urządzeń dotykowych, a jeszcze innych klawiatury. To urządzenie sterowane ruchami gałek ocznych. Niektóre używają czytnika ekranu, inne małego ekranu, a jeszcze inne oprogramowanie do powiększania tekstu. Wszyscy chcą korzystać z Twojego formularza. Dowiedz się, jak ułatwić wszystkim korzystanie z formularza.
Upewnij się, że użytkownicy rozumieją przeznaczenie pola formularza
Masz do wyboru wiele ustawień formularza.
Co mają ze sobą wspólnego?
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 formularzem i odczytywany przez czytniki ekranu.
Oprócz tego kliknięcie <label> powoduje zaznaczenie określonego elementu sterującego formularza.
co sprawia, że ten cel jest większy.
Używaj zrozumiałego kodu HTML, aby uzyskać dostęp do wbudowanych funkcji przeglądarki
Teoretycznie można by utworzyć formularz, używając tylko elementów <div>.
Możesz nawet sprawić, że urządzenie będzie wyglądać jak natywne <form>.
Na czym polega problem z korzystaniem
niesemantyczne?
Wbudowane elementy formularza mają wiele wbudowanych funkcji. Przeanalizujmy przykład.
Wizualnie <input> (pierwsza w przykładzie) i <div> wyglądają tak samo.
Możesz nawet wstawić tekst w obu tych miejscach, ponieważ <div> ma
Atrybut contenteditable.
Istnieje jednak wiele różnic między używaniem odpowiedniego elementu <input> a <div>
wygląda jak <input>.
Użytkownik czytnika ekranu nie rozpoznaje elementu <div> jako elementu wejściowego.
i nie może wypełnić formularza.
Użytkownik czytnika ekranu słyszy tylko „Nazwa”,
bez wskazania, że jest to element sterujący formularza do dodawania tekstu.
Kliknięcie <div>Name</div> nie powoduje zaznaczenia pola <div>, który jest z nim powiązany. Klawisze <label> i
<input> są połączone za pomocą atrybutów for i id.
Po przesłaniu formularza dane podane w formularzu <div> nie zostaną uwzględnione w prośbie.
Chociaż można dołączać dane za pomocą kodu JavaScript,
<input> domyślnie.
Wbudowane elementy formularzy mają też inne funkcje.
Na przykład z odpowiednimi elementami formularza i właściwymi atrybutami inputmode lub type,
klawiatura ekranowa pokazuje odpowiednie znaki. Użycie atrybutu inputmode w tagu <div>
nie może tego zrobić.
Upewnij się, że użytkownicy znają oczekiwany format danych
Możesz zdefiniować różne reguły weryfikacji dla elementu sterującego formularza.
Załóżmy, że pole formularza zawsze powinno zawierać co najmniej osiem znaków.
Należy użyć atrybutu minlength, który wskazuje przeglądarkom regułę weryfikacji.
Co możesz zrobić, aby użytkownicy wiedzieli o regule weryfikacji? Powiedz im o tym.
Dodaj informacje o oczekiwanym formacie bezpośrednio pod elementami sterującymi formularza.
Aby ułatwić użytkownikom korzystanie z urządzeń wspomagających,
użyj atrybutu aria-describedby w elemencie sterującym formularza,
i id w komunikacie o błędzie z tą samą wartością, aby połączyć oba te elementy.
Pomóż użytkownikom znaleźć komunikat o błędzie dotyczący elementu sterującego formularza
W poprzednim module poświęconym weryfikacji Wiesz już, jak wyświetlać komunikaty o błędach w przypadku wprowadzania nieprawidłowych danych.
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
Jeśli na przykład pole ma atrybut required i wpiszą nieprawidłowe dane, przeglądarka wyświetli
komunikat o błędzie obok elementu sterującego formularzem, gdy formularz zostanie przesłany. Czytniki ekranu przekazują też 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 pasuje do id w elemencie komunikatu o błędzie.
Następnie użyj pola aria-live="assertive" w przypadku komunikatu o błędzie.
Regiony aktywne ARIA informują użytkowników czytników ekranu o błędzie, gdy tylko się on pojawia.
Problem z tym podejściem w przypadku formularzy z wieloma polami
jest to, że w przypadku wystąpienia kilku błędów aria-live zazwyczaj informuje tylko o pierwszym błędzie.
Jak wyjaśniliśmy w tym artykule o kilku ogłoszeniach aria-live dotyczących tego samego działania, możesz utworzyć 1 wiadomość, łącząc wszystkie błędy. Innym sposobem jest informowanie o błędach, a następnie informowanie o poszczególnych błędach po zaznaczeniu pola.
Sprawdź, czy użytkownicy rozpoznają błędy
Czasami projektanci kolorują nieprawidłowy stan na czerwono,
przy użyciu pseudoklasy :invalid.
Aby jednak przekazać komunikat o błędzie lub sukcesie,
nie należy polegać wyłącznie na kolorze.
W przypadku osób ze ślepotą na czerwono-zielone barwy
zielone i czerwone obramowanie wyglądają prawie tak samo.
Nie można sprawdzić, czy komunikat jest związany z błędem.
Oprócz koloru użyj ikony lub poprzedź komunikaty o błędach odpowiednim typem błędu.
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
Pomóż użytkownikom poruszać się po formularzu
Za pomocą CSS możesz zmienić kolejność elementów sterujących formularza. Odłączenie między kolejnością wizualną a nawigacją przy użyciu klawiatury (kolejność DOM) to problem dla użytkowników czytników ekranu i klawiatury.
Dowiedz się więcej, jak sprawdzić, czy kolejność wizualna na stronie jest zgodna z kolejnością DOM.
Pomóż użytkownikom rozpoznać aktualnie aktywny element sterujący formularza
Do nawigacji użyj klawiatury
ten formularz.
Czy wiesz, że styl elementów sterujących formularza zmienił się, gdy były aktywne?
To jest domyślny styl zaznaczenia.
Możesz go zastąpić kodem
:focus Pseudoklasa CSS.
Niezależnie od tego, jakich stylów użyjesz w aplikacji :focus,
Zadbaj o to, by wizualna różnica między stanem domyślnym a stanem zaznaczenia była rozpoznawalna.
Więcej informacji o projektowanie wskaźników ostrości.
Sprawdzanie, czy formularz jest użyteczny
Wiele typowych problemów można znaleźć, wypełniając formularz na różnych urządzeniach. Korzystaj tylko z klawiatury i 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 urządzeniach lub ustawieniach, których nie używasz na co dzień. Czy znasz kogoś, kto używa czytnika ekranu, lub programu do powiększania tekstu? Poproś go 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 tym, weryfikacja ułatwień dostępu i o tym, jak przeprowadzać testy wśród prawdziwych użytkowników.