3.3.1 Identyfikacja błędów (A) - WCAG 2.0

Każdy serwis internetowy posiada jakiś formularz, a jeśli nie posiada - to powinien. Bez względu na jego przeznaczenie, czy to będzie wyszukiwarka, newsletter, rejestracja, kontakt itp., w każdym przypadku musimy sprawdzić poprawność wprowadzanych danych. W sytuacji, gdy użytkownik niepoprawnie wypełni pole lub pominie pole wymagane, musimy go o tym fakcie poinformować.

Trudno jednoznacznie określić, jaki sposób jest najodpowiedniejszy, ponieważ charakter komunikatów i ich obsługa będzie się różnić, w zależności od funkcji formularza oraz tego, w jaki sposób nastąpi sprawdzenie poprawności danych, czy po stronie klienta (np. Java Script) czy po stronie serwera (np. PHP).
Jedno jest pewne: informacja musi być skuteczna, intuicyjna i przede wszystkim dostępna dla wszystkich użytkowników, bez względu na to, czy posiadają dysfunkcje czy nie.
Musi pozwolić użytkownikowi jednoznacznie na zidentyfikowanie błędu oraz na łatwe rozwiązanie problemu i powtórne przesłanie danych z formularza.

Na poniższym zrzucie widać jasne komunikaty (walidacja nastąpiła po stronie serwera), które jednoznacznie wskazują, gdzie nastąpił błąd we wprowadzaniu danych.

Przykład komunikatów źle wypełnionych pól formularza

Komunikaty możemy wyświetlić przy danym polu, ale aby były one czytelne i łatwe do zidentyfikowania przez osoby korzystające z programów czytających, musimy przed formularzem poinformować o wystąpieniu błędu. Następnie, przy każdym źle wypełnionym polu zamieścić informację o błędzie. Nie PO, ale PRZED polem, ponieważ użytkownik musi najpierw uzyskać informację o błędzie a potem wypełnić poprawnie pole. Oczywiście w CSS można dowolnie komunikat sformatować, aby był odpowiednio wyróżniony i umiejscowiony.

Z powodzeniem można przeprowadzić walidację po stronie klienta. Musimy przy tym pamiętać, że komunikaty muszą być dostępne. Możemy użyć popularnej funkcji alert() z Java Script. Jest ona skutecznie obsługiwana przez programy czytające.
Ze stosowaniem wszelkich komunikatów, generowanych za pomocą metod typu innerHTML należy uważać, ponieważ ich nieumiejętne stosowanie skutecznie może utrudnić, a wręcz uniemożliwić obsługę błędów w formularzu. Pamiętając, że programy czytające przetwarzają stronę internetową liniowo, wyobraźmy sobie sytuację, w której użytkownik wypełnia pole daty urodzenia. Myli się w formacie a skrypt przy pomocy innerHTML wkleja kawałek kodu HTML-owego: warstwę div z komunikatem o błędzie ponad miejscem, w którym użytkownik aktualnie się znajduje. Oczywiście, warstwa jest odpowiednio sformatowana w CSS i pojawia się jako okienko na środku ekranu. Użytkownik widzący doskonale błąd zidentyfikuje i odczyta, natomiast dla użytkownika niewidomego nie zaszła żadna zmiana na stronie. Nie wie, że powyżej został dodany jakiś kod HTML.

Powrót do: Wytyczna 3.3 Pomoc przy wprowadzaniu danych