Każde pole wejściowe potrzebuje prawdziwego label
Łącz etykiety z polami, aby dotykanie i odczytywanie działało poprawnie
Każde pole wejściowe potrzebuje prawdziwego label 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.
Dlaczego etykiety mają znaczenie
Pole formularza bez nazwy jest tajemniczą skrzynką. Prawdziwa etykieta dokładnie informuje każdego użytkownika, widzącego lub nie, co należy wpisać. 🏷️
Element label
Element label to wbudowany w HTML sposób nazywania pola. Przeglądarka, czytniki ekranu i obszary dotyku rozumieją go automatycznie.
Połącz za pomocą for i id
Najprostszym połączeniem jest użycie for w etykiecie i dopasowanie go do id pola input. W ten sposób elementy są formalnie powiązane.
<label for="email">Email</label>
<input id="email" type="email">Identyfikatory muszą być unikatowe
Wskazywany id musi być unikatowy na stronie. Dwa pola input z tym samym id po cichu psują to powiązanie.
Opakowanie również działa
Możesz też umieścić pole input wewnątrz elementu label. Id nie jest wtedy potrzebne, ponieważ zagnieżdżenie jasno tworzy powiązanie.
<label>Email
<input type="email">
</label>Większy obszar kliknięcia
Powiązana etykieta zapewnia użytkownikom większy obszar kliknięcia. Dotknięcie tekstu ustawia fokus lub zaznacza pole, co pomaga osobom o mniej stabilnych dłoniach i użytkownikom małych ekranów.
Czytniki ekranu ją odczytują
Gdy fokus znajdzie się na powiązanym polu input, czytnik ekranu najpierw odczytuje etykietę. Bez niej użytkownik słyszy tylko typ pola.
title to za mało
Atrybut title może wyświetlać się po najechaniu kursorem, ale jest zawodny na urządzeniach dotykowych i przy obsłudze klawiaturą. Nie zastępuje prawdziwej etykiety.
Pola wyboru również wymagają etykiet
Pola wyboru i przyciski jednokrotnego wyboru wydają się wizualnie oczywiste, ale to etykieta sprawia, że można ich dotknąć i że są ogłaszane. Nigdy nie pozostawiaj ich bez etykiet.
<input id="terms" type="checkbox">
<label for="terms">I agree</label>Widoczne jest lepsze niż ukryte
Jeśli możesz, zachowuj etykiety widoczne. Widzący użytkownicy obciążeni poznawczo odnoszą z tego taką samą korzyść jak użytkownicy czytników ekranu.
Kiedy trzeba ją ukryć
Jeśli w polu wyszukiwania nie ma miejsca na tekst, ukryj etykietę za pomocą klasy visually-hidden, nigdy za pomocą display none, aby nadal docierała do technologii asystujących.
Szybkie sprawdzenie
Skąd etykieta wie, które pole input nazywa?
Podsumowanie
Każde pole input wymaga prawdziwej etykiety, połączonej za pomocą for i id albo przez zagnieżdżenie. Ten jeden nawyk sprawia, że formularze można łatwo obsługiwać dotykiem, odczytywać i rozumieć. ✅
Często zadawane pytania
Czy lekcja „Każde pole wejściowe potrzebuje prawdziwego label” jest bezpłatna?
Tak — pełny tekst „Każde pole wejściowe potrzebuje prawdziwego label” 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 „Każde pole wejściowe potrzebuje prawdziwego label”?
Łącz etykiety z polami, aby dotykanie i odczytywanie działało poprawnie Ć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 „Każde pole wejściowe potrzebuje prawdziwego label”?
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