aria-describedby dla dodatkowego kontekstu
Dołącz wskazówki i pomoc odczytywane po nazwie.
aria-describedby dla dodatkowego kontekstu to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 3 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.
Poza nazwą
Czasami kontrolka potrzebuje czegoś więcej niż nazwy. aria-describedby dołącza dodatkowy kontekst, który czytnik ekranu odczytuje po nazwie.
Odwołuje się do identyfikatorów
Podobnie jak labelledby, aria-describedby zawiera identyfikator innego elementu. Przeglądarka pobiera tekst tego elementu i używa go jako opisu.
<input aria-describedby="hint">
<p id="hint">Use 8+ characters</p>Najpierw nazwa, potem opis
Czytnik ekranu najpierw odczytuje nazwę, następnie robi krótką pauzę, a potem odczytuje opis. Taka kolejność pomaga szybko zrozumieć przeznaczenie kontrolki.
Idealne do wskazówek
Wskazówki dotyczące pól, takie jak reguły formatu, należy umieszczać w aria-describedby, aby były automatycznie odczytywane po przeniesieniu fokusu na pole.
<input aria-describedby="fmt">
<p id="fmt">Format: DD/MM/YYYY</p>Nie zastępuje nazwy
Opis ma charakter dodatkowy. Jeśli element ma tylko aria-describedby i nie ma nazwy, nadal pozostaje w praktyce nieopisany.
Połącz wiele identyfikatorów
Przekaż do aria-describedby kilka identyfikatorów oddzielonych spacjami, a przeglądarka połączy ich tekst. Przydaje się to na przykład w przypadku wskazówki i komunikatu o błędzie.
<input aria-describedby="hint err">Błędy też są opisami
Wskaż w aria-describedby komunikat walidacyjny, aby błąd został odczytany razem z polem, zamiast pozostawać gdzieś indziej na stronie.
<input aria-describedby="err">
<p id="err">Email is required</p>Opisy powinny być krótkie
Opis powinien być krótkim zdaniem. Długi tekst aria-describedby jest odczytywany w całości za każdym razem, co szybko staje się męczące.
Pozostaje widoczny
W przeciwieństwie do ukrytej etykiety wskazówka, do której następuje odwołanie, zwykle pozostaje widoczna na ekranie, pomagając jednocześnie użytkownikom widzącym.
Obsługa może się różnić
Większość czytników ekranu obsługuje aria-describedby, ale niektóre odczytują je tylko w określonych trybach, dlatego należy przetestować wskazówkę za pomocą rzeczywistego czytnika.
describedby a labelledby
Użyj aria-labelledby do określenia, jak nazywa się kontrolka, a aria-describedby do przekazania dodatkowych informacji na jej temat. Te atrybuty pełnią różne funkcje.
Szybki test
Chcesz, aby reguła dotycząca hasła została odczytana po nazwie pola. Który atrybut będzie odpowiedni?
Podsumowanie: dodawanie kontekstu
Dowiedział się Pan, że aria-describedby odwołuje się do identyfikatorów, aby odczytywać wskazówki i błędy po nazwie, uzupełniając ją, ale nigdy jej nie zastępując. 💬
Często zadawane pytania
Czy lekcja „aria-describedby dla dodatkowego kontekstu” jest bezpłatna?
Tak — pełny tekst „aria-describedby dla dodatkowego kontekstu” 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 „aria-describedby dla dodatkowego kontekstu”?
Dołącz wskazówki i pomoc odczytywane po nazwie. Ć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 3 z 4.
Ile czasu zajmuje lekcja „aria-describedby dla dodatkowego kontekstu”?
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
- Obliczanie dostępnej nazwy bez tajemnic
- aria-label a aria-labelledby
- aria-describedby dla dodatkowego kontekstu
- Typowe błędy nazewnictwa wyciszające kontrolki