Ogłaszanie tekstu pomocy i wymaganych pól
Udostępniaj podpowiedzi i wymagania technologiom wspomagającym
Ogłaszanie tekstu pomocy i wymaganych pól to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 4 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.
Etykiety to dopiero początek
Pole często potrzebuje czegoś więcej niż nazwy. Podpowiedzi i wymagania muszą być dostępne dla technologii asystujących, a nie tylko dla osób widzących. 📝
Połącz podpowiedzi za pomocą aria-describedby
Umieść tekst pomocy w elemencie, a następnie wskaż jego identyfikator w atrybucie aria-describedby pola wejściowego. Podpowiedź zostanie odczytana po etykiecie.
<input id="pw" aria-describedby="pwhelp">
<p id="pwhelp">At least 8 characters</p>Najpierw nazwa, potem opis
Czytniki ekranu odczytują najpierw etykietę, a następnie tekst opisany przez described-by. Użytkownik słyszy nazwę i podpowiedź w naturalnej kolejności.
Odwołuj się do wielu identyfikatorów
aria-describedby może zawierać kilka identyfikatorów oddzielonych spacjami. Można połączyć podpowiedź i komunikat o błędzie dla tego samego pola.
<input aria-describedby="hint err">Oznaczanie pól wymaganych
Dodaj atrybut required, aby przeglądarka wymuszała jego wypełnienie i informowała technologie asystujące, że pole musi zostać uzupełnione.
<input id="name" required>Odczytywane automatycznie
Po dodaniu required czytnik ekranu wypowiada słowo „wymagane” po ustawieniu fokusu. Otrzymujesz to automatycznie, bez dodatkowego ARIA.
Pułapka gwiazdki
Sama czerwona gwiazdka nie przekazuje informacji i łatwo ją przeoczyć. Należy połączyć ją z atrybutem required lub widocznym tekstem „wymagane”.
Wyjaśnij znaczenie gwiazdki
Jeśli używasz gwiazdki, dodaj w pobliżu formularza legend informującą, że oznacza ona pola wymagane. Nigdy nie pozostawiaj tego symbolu bez wyjaśnienia.
aria-required jako rozwiązanie zastępcze
W przypadku niestandardowych elementów sterujących bez natywnej walidacji wartość true atrybutu aria-required przekazuje czytnikom ekranu ten sam stan.
<div role="textbox" aria-required="true"></div>Oznaczaj pola opcjonalne
Gdy większość pól jest wymagana, oznacz zamiast tego nieliczne pola opcjonalne. Jest mniej bałaganu, a schemat pozostaje jasny.
Nie ukrywaj pomocy
Wyświetlaj podpowiedzi na ekranie, a nie tylko odczytuj je użytkownikom czytników ekranu. Każdy skorzysta z możliwości poznania zasad przed popełnieniem błędu.
Szybki test
Jak dołączyć tekst pomocy do pola, aby był odczytywany przez czytniki ekranu?
Podsumowanie
Połącz podpowiedzi za pomocą aria-describedby, a pola wymagające wypełnienia oznacz atrybutem required. Teraz każdy użytkownik usłyszy nazwę, pomoc i zasady. ✅
Często zadawane pytania
Czy lekcja „Ogłaszanie tekstu pomocy i wymaganych pól” jest bezpłatna?
Tak — pełny tekst „Ogłaszanie tekstu pomocy i wymaganych pól” 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 „Ogłaszanie tekstu pomocy i wymaganych pól”?
Udostępniaj podpowiedzi i wymagania technologiom wspomagającym Ć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 4 z 4.
Ile czasu zajmuje lekcja „Ogłaszanie tekstu pomocy i wymaganych pól”?
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
- Każde pole wejściowe potrzebuje prawdziwego label
- Placeholder to nie etykieta
- Grupowanie pól za pomocą fieldset i legend
- Ogłaszanie tekstu pomocy i wymaganych pól