Typowe błędy nazewnictwa wyciszające kontrolki
Unikaj wzorców, które pozostawiają elementy bez nazwy.
Typowe błędy nazewnictwa wyciszające kontrolki 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.
Gdy kontrolki milkną
Kontrolka bez obliczonej nazwy jest odczytywana po prostu jako przycisk lub link. Takie błędy nazewnictwa sprawiają, że użytkownicy muszą zgadywać, do czego służy element.
Przyciski zawierające tylko ikony
Przycisk zawierający tylko ikonę często nie ma obliczonej nazwy. Dodaj aria-label, aby kontrolka bez tekstu nadal komunikowała swoją funkcję.
<button aria-label="Delete">🗑️</button>Placeholder nie jest nazwą
placeholder nie jest wiarygodną dostępną nazwą. Znika po rozpoczęciu pisania, a wiele czytników go pomija, dlatego należy dodać prawdziwą etykietę.
<input placeholder="Email">Nieprawidłowe identyfikatory labelledby
Atrybut aria-labelledby wskazujący brakujący lub błędnie zapisany identyfikator nie tworzy żadnej nazwy, po cichu niwecząc zamierzone oznaczenie.
<button aria-labelledby="ttl">x</button>Pusty aria-label
Ustawienie aria-label na pusty ciąg usuwa nazwę. Element nie ma wtedy niczego, co czytnik ekranu mógłby odczytać.
<button aria-label="">Save</button>Ukrywanie jedynego tekstu
Umieszczenie aria-hidden na jedynym tekście wewnątrz przycisku usuwa źródło jego nazwy, przez co kontrolka staje się anonimowa dla czytników.
<button><span aria-hidden="true">Next</span></button>Ogólny tekst linku
Linki o nazwach „Czytaj więcej” lub „Kliknij tutaj” mają wprawdzie nazwę, ale są bezużyteczne bez kontekstu, ponieważ użytkownik nie dowiaduje się, dokąd prowadzą.
<a href="/post">Read more</a>Poleganie wyłącznie na title
Poleganie na title jako jedynej nazwie jest ryzykowne. To źródło o najniższym priorytecie, a kilka czytników ekranu całkowicie je pomija.
Pola bez label
Zwykły input bez powiązanego elementu label często nie ma obliczonej nazwy, przez co użytkownik nie wie, co wpisać w polu.
<input type="text">Zduplikowane nazwy
Dziesięć przycisków o nazwie Edytuj zmusza użytkownika do zgadywania, którego wiersza dotyczą. Nadaj każdemu unikatową nazwę zawierającą informację o elemencie docelowym.
<button aria-label="Edit profile">Edit</button>Sprawdź za pomocą inspektora
Otwórz w przeglądarce panel ułatwień dostępu i odczytaj obliczoną nazwę każdej kontrolki. Jeśli jest pusta, trzeba naprawić błąd.
Szybki test
Przycisk z ikoną pokazuje tylko symbol kosza. Dlaczego może być niemy?
Podsumowanie: zadbaj o nazwy kontrolek
Dowiedział się Pan, jakie pułapki powodują, że kontrolki milkną — od przycisków zawierających tylko ikony po nieprawidłowe identyfikatory — oraz jak sprawdzać każdą nazwę w inspektorze. ✅
Często zadawane pytania
Czy lekcja „Typowe błędy nazewnictwa wyciszające kontrolki” jest bezpłatna?
Tak — pełny tekst „Typowe błędy nazewnictwa wyciszające kontrolki” 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 „Typowe błędy nazewnictwa wyciszające kontrolki”?
Unikaj wzorców, które pozostawiają elementy bez nazwy. Ć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 „Typowe błędy nazewnictwa wyciszające kontrolki”?
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