Powiązywanie błędów z polami za pomocą aria-describedby
Spraw, aby komunikat był odczytywany razem z polem wejściowym.
Powiązywanie błędów z polami za pomocą aria-describedby to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Samotny komunikat o błędzie
Komunikat o błędzie umieszczony obok pola wygląda na powiązany z nim dla osoby widzącej. Dla czytnika ekranu jest jednak tylko luźnym tekstem, którego użytkownik może nigdy nie usłyszeć. ⚠️
Rozwiązaniem jest link
Komunikat trzeba formalnie powiązać z jego polem. Służy do tego atrybut aria-describedby, który umieszcza się na polu.
Wskaż id
Elementowi komunikatu o błędzie należy nadać id, a następnie ustawić w polu aria-describedby tę samą wartość id. W ten sposób oba elementy zostają formalnie powiązane.
<input id="email" aria-describedby="email-err">
<p id="email-err">Enter a valid email.</p>Co słyszy użytkownik
Gdy fokus znajdzie się na polu, czytnik ekranu odczyta etykietę, typ, a następnie opis. Błąd nie będzie już osierocony.
Najpierw nazwa, potem opis
aria-describedby nie zastępuje etykiety. Etykieta określa nazwę, a describedby dodaje dodatkowe informacje odczytywane po niej.
Wiele opisów
Można podać kilka identyfikatorów, rozdzielając je spacjami. Przeglądarka odczyta je w tej kolejności, dzięki czemu można połączyć wskazówkę i komunikat o błędzie.
<input aria-describedby="hint err">Tylko wtedy, gdy ma zastosowanie
Id błędu należy dodawać do aria-describedby tylko wtedy, gdy błąd jest wyświetlany. Wskazanie pustego lub ukrytego węzła może spowodować odczytanie niczego albo zdezorientować użytkowników.
Niech tekst będzie prawdziwy
Opisywany element musi zawierać rzeczywisty, widoczny tekst. aria-describedby odczytuje jego treść, więc pusty span nie przekazuje żadnych użytecznych informacji.
Ukryte cele pozostają ciche
Jeśli cel ma display none, większość czytników ekranu go pomija. Tekst błędu powinien być wyrenderowany i widoczny, aby opis został rzeczywiście odczytany.
Działa z aria-invalid
Na tym samym polu należy połączyć describedby z aria-invalid. Jeden atrybut mówi, że walidacja się nie powiodła, a drugi — dlaczego. Razem przekazują pełną informację.
Nie tylko do błędów
Ten sam atrybut może również zawierać wskazówki dotyczące formatu, na przykład reguły haseł. Błędy to jedno z jego typowych zastosowań, ale nie jedyne.
<input aria-describedby="pw-rule">
<p id="pw-rule">At least 8 characters.</p>Szybkie sprawdzenie
Jak sprawić, aby czytnik ekranu odczytał błąd razem z powiązanym polem?
Podsumowanie
Błędy należy powiązać z polami za pomocą aria-describedby wskazującego rzeczywiste, widoczne id. Czytnik ekranu odczyta wtedy pole i jego błąd razem. ✅
Często zadawane pytania
Czy lekcja „Powiązywanie błędów z polami za pomocą aria-describedby” jest bezpłatna?
Tak — pełny tekst „Powiązywanie błędów z polami za pomocą aria-describedby” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Powiązywanie błędów z polami za pomocą aria-describedby”?
Spraw, aby komunikat był odczytywany razem z polem wejściowym. Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Powiązywanie błędów z polami za pomocą aria-describedby”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Powiązywanie błędów z polami za pomocą aria-describedby
- Oznaczanie nieprawidłowego stanu za pomocą aria-invalid
- Przenoszenie fokusu do pierwszego błędu
- W tekście, po utracie fokusu czy po wysłaniu: czas ma znaczenie