Identyfikacja błędów

Silktide analizuje wymagane pola formularzy, które wydają się używać własnej walidacji zamiast wbudowanego sprawdzania przeglądarki, i ostrzega, gdy nie ma widocznego sposobu, aby komunikat o błędzie dotarł do osób korzystających z technologii wspomagających.

Dlaczego to ważne

Gdy formularz odrzuca nieprawidłową odpowiedź, użytkownicy widzący zwykle widzą czerwoną ramkę lub komunikat obok pola. Użytkownik nie otrzymuje żadnej z tych informacji, chyba że strona udostępnia błąd w kodzie: formularz po prostu odmawia wysłania, bez wyjaśnienia, co poszło nie tak ani gdzie. W rezultacie formularz po cichu uniemożliwia części odwiedzających jego użycie.

Przeglądarki automatycznie ogłaszają własne wbudowane komunikaty walidacyjne. Ryzyko pojawia się, gdy strona wyłącza tę funkcję lub zastępuje ją własną walidacją i zapomina połączyć zamiennik z .

Jak to naprawić

Zapewnij każdemu polu z własną walidacją programowy sposób przekazania komunikatu o błędzie, za pomocą :

<!-- Problem: własna walidacja bez dostępnego kanału błędów -->
<form novalidate>
  <input type="text" required>
  <span class="error">Wpisz swoje imię</span>
</form>

<!-- Rozwiązanie: pole wskazuje komunikat o błędzie -->
<form novalidate>
  <input type="text" required aria-describedby="name-error">
  <span id="name-error" class="error">Wpisz swoje imię</span>
</form>

Każde z poniższych rozwiązań spełnia wymagania kontroli:

aria-errormessage w polu, wskazujące element wypełniany tekstem błędu (ustaw aria-invalid="true", gdy wyświetlany jest błąd).
aria-describedby w polu, wskazujące element komunikatu.
wewnątrz formularza — element z role="alert", role="status" lub aria-live — do którego walidacja zapisuje tekst błędu.

Alternatywnie usuń dostosowanie i pozwól natywnej walidacji przeglądarki zgłaszać błędy, co jest domyślnie dostępne.

Jak Silktide wykonuje tę kontrolę

Znajduje widoczne wymagane pola — pola wejściowe, obszary tekstowe i listy wyboru oznaczone jako required lub aria-required="true".
Zachowuje tylko pola, dla których istnieją przesłanki, że natywna walidacja przeglądarki jest pomijana lub zastępowana: formularz ma novalidate, kontrolka wysyłania ma formnovalidate, pole jest oznaczone jako aria-invalid, używa aria-required bez natywnego atrybutu required albo pole lub formularz zawiera wskazówki dotyczące własnej walidacji (takie jak atrybuty związane z błędami lub kontenery komunikatów o błędach).
Dla każdego takiego pola wyszukuje dostępny kanał błędów: prawidłowe odwołanie aria-errormessage, prawidłowe odwołanie aria-describedby albo obszar na żywo w formularzu.
Ostrzega o polach, które nie mają żadnego z nich. Jest to ostrzeżenie, a nie potwierdzony błąd, ponieważ nie można w pełni zaobserwować zachowania walidacji w czasie działania na podstawie kodu strony.

Rozwiązywanie problemów

Moje błędy są poprawnie ogłaszane

Kontrola wyszukuje strukturę, która umożliwia ogłaszanie, a nie samo ogłoszenie. Jeśli Twój framework wstawia obszar na żywo lub odwołania ARIA dopiero w momencie wystąpienia błędu, załadowana strona nie pokazuje kanału, a pole zostaje oznaczone. Dodanie z góry (pustego) elementu komunikatu i odwołania rozwiązuje ten problem, a także jest bardziej niezawodne.

Element komunikatu, do którego prowadzi odwołanie, jeszcze nie istnieje

Odwołania muszą wskazywać elementy istniejące na stronie. Wskazanie przez aria-describedby identyfikatora, który jest tworzony dopiero później, jest traktowane jak brak kanału.