Błędy? Zdarzają się każdemu!
Każdy z nas popełnia błędy – w życiu i w internecie. Ale na szczęście strony internetowe i aplikacje mogą nas o nich informować i pomóc nam je poprawić. I właśnie tym zajmuje się **WCAG 3.3.1 – Identyfikacja błędów** – zapewnieniem, że użytkownik zostanie poinformowany, gdy coś pójdzie nie tak.
Co dokładnie określa WCAG 3.3.1?
Kryterium to mówi, że jeśli użytkownik popełni błąd, powinien być o tym poinformowany w jasny i dostępny sposób. Dotyczy to przede wszystkim formularzy – jeśli użytkownik źle wypełni pole lub pominie wymagane dane, powinien otrzymać czytelną informację o tym, co poszło nie tak.
Kto najbardziej skorzysta na spełnieniu tego kryterium?
Każdy użytkownik strony może skorzystać z dobrze zaprojektowanego systemu identyfikacji błędów, ale szczególnie:
- **Osoby niewidome i słabowidzące** – odpowiednie komunikaty błędów powinny być powiązane z polami formularza i dostępne dla czytników ekranu.
- **Osoby z trudnościami poznawczymi** – precyzyjne, klarowne komunikaty pomagają uniknąć dezorientacji.
- **Osoby starsze** – czytelne oznaczenie błędów sprawia, że poprawianie ich staje się prostsze.
- **Osoby z dysleksją i innymi trudnościami w czytaniu** – komunikaty powinny być napisane prostym, zrozumiałym językiem.
Jak zapewnić spełnienie WCAG 3.3.1?
Jest kilka kluczowych zasad, które warto wdrożyć:
- **Jasne oznaczenie pól wymaganych** – pola obowiązkowe powinny być oznaczone np. poprzez **label** z dopiskiem „(wymagane)”, a dodatkowo powinny posiadać atrybut `aria-required="true"` dla technologii asystujących.
- **Precyzyjne komunikaty błędów** – użytkownik powinien wiedzieć **co** zrobił źle i **jak** może to poprawić. Przykład:
- Niepoprawnie: *„Błąd!”*
- Poprawnie: *„Numer telefonu powinien zawierać 9 cyfr”*
- **Wizualne wyróżnienie błędów** – oznaczenie błędu nie powinno opierać się wyłącznie na kolorze (np. czerwona ramka), ponieważ użytkownicy z daltonizmem mogą tego nie zauważyć. Dobrym rozwiązaniem jest dodatkowy tekstowy komunikat błędu lub ikona ostrzegawcza.
- **Łączenie komunikatów błędów z polami** – każda informacja o błędzie powinna być powiązana z polem, którego dotyczy. Można do tego użyć `aria-describedby`, aby czytnik ekranu przekazał użytkownikowi właściwe informacje.
- **Dodatkowe wskazówki przed wypełnieniem** – zamiast pozwolić użytkownikowi popełnić błąd, warto podać mu pomocne instrukcje wcześniej, np. *„Hasło powinno zawierać co najmniej 8 znaków, w tym jedną cyfrę i jeden znak specjalny”*.
- **Podsumowanie błędów na początku formularza** – jeśli formularz zawiera kilka błędów, warto umieścić na górze komunikat zbiorczy, np.:
„W Twoim formularzu znajdują się błędy: - Imię i nazwisko jest wymagane. - Adres e-mail musi być w formacie
Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript. . - Numer telefonu powinien zawierać 9 cyfr.”
Jakie błędy często popełniamy?
Oprócz tego, co powinniśmy robić, warto pamiętać o typowych błędach, które mogą sprawić, że system identyfikacji błędów nie będzie działał prawidłowo:
- **Brak komunikatu błędu** – użytkownik nie wie, co zrobił źle i dlaczego nie może przejść dalej.
- **Zbyt ogólny komunikat** – np. *„Błąd w formularzu”* nie mówi użytkownikowi, co dokładnie wymaga poprawy.
- **Komunikaty błędów wyłącznie w kolorze** – czerwony tekst może być niewidoczny dla osób z daltonizmem.
- **Automatyczne przesyłanie formularza bez ostrzeżenia** – użytkownik powinien mieć możliwość sprawdzenia danych przed wysłaniem.
Podsumowanie – Identyfikacja błędów w praktyce
Spełnienie kryterium WCAG 3.3.1 to nie tylko wymóg dostępności, ale też dobra praktyka UX. Informowanie użytkowników o błędach i pomaganie im w ich poprawieniu sprawia, że korzystanie z formularzy i interaktywnych elementów strony staje się wygodniejsze i bardziej intuicyjne dla wszystkich.
Odpowiednie komunikaty błędów powinny być:
- **Czytelne** – napisane prostym, zrozumiałym językiem.
- **Widoczne** – umieszczone w pobliżu błędnego pola, ale także podsumowane w jednym miejscu.
- **Dostępne** – poprawnie powiązane z polem formularza, aby czytniki ekranu mogły je odczytać.
