Przyciski ikonowe, które nadal mają nazwę
Nadaj przyciskowi bez tekstu jasną dostępną etykietę.
Przyciski ikonowe, które nadal mają nazwę 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.
Problem z niemym przyciskiem
Przycisk zawierający tylko ikonę wygląda na oczywisty dla widzącego użytkownika, ale czytnik ekranu może powiedzieć jedynie button, nie wyjaśniając, do czego służy. 🔇
Każdy element sterujący potrzebuje nazwy
Każdy interaktywny element sterujący musi mieć dostępną nazwę. W przypadku przycisków tekstowych zapewnia ją tekst, ale przycisk zawierający wyłącznie ikonę nie ma tekstu, który mógłby przejąć.
Dodaj aria-label do przycisku
Najprostsze rozwiązanie: umieść aria-label bezpośrednio na przycisku, aby nazwać działanie, nawet gdy jego zawartością jest tylko ikona.
<button aria-label="Close">
<svg aria-hidden="true">...</svg>
</button>Ukryj ikonę wewnątrz
Oznacz wewnętrzną ikonę za pomocą aria-hidden="true". Nazwę ma przycisk, a po dodaniu etykiety ikona jest wyłącznie dekoracją.
<button aria-label="Search">
<svg aria-hidden="true" focusable="false">...</svg>
</button>Możesz też użyć tekstu ukrytego wizualnie
Wolisz prawdziwy tekst? Dodaj element span z klasą visually-hidden. Widzący użytkownicy zobaczą tylko ikonę, a czytniki ekranu odczytają słowa.
<button>
<svg aria-hidden="true">...</svg>
<span class="sr-only">Add to cart</span>
</button>Jak wygląda CSS sr-only
Klasa visually-hidden przycina tekst do jednego piksela, nie używając display none, które ukryłoby go również przed czytnikami ekranu.
.sr-only {
position: absolute;
width: 1px; height: 1px;
clip-path: inset(50%);
}Nazwij działanie, nie ikonę
Opisz to, co się stanie, a nie obrazek. Użyj Delete, a nie trash can. Użytkownicy potrzebują czasownika, a nie opisu glifu.
Nigdy nie używaj samego atrybutu title
Atrybut HTML title jest zawodny jako nazwa: całkowicie pomija użytkowników dotykających ekranu i korzystających z klawiatury. Zamiast niego użyj aria-label lub ukrytego tekstu.
Przyciski przełączające potrzebują stanu
W przypadku przełącznika ikonowego, takiego jak wyciszenie, dodaj również aria-pressed, aby przycisk informował, czy jest obecnie włączony, czy wyłączony.
<button aria-label="Mute" aria-pressed="false">
<svg aria-hidden="true">...</svg>
</button>Zachowaj zgodność nazwy ze stanem
Jeśli przycisk z ikoną zmienia znaczenie, zaktualizuj również jego nazwę. Przycisk odtwarzania, który stał się przyciskiem pauzy, musi teraz odczytywać Pause, a nie Play.
Zweryfikuj odczytywaną nazwę
W inspektorze dostępności wybierz przycisk i odczytaj jego obliczoną nazwę. Powinna odpowiadać działaniu i nigdy nie być pusta.
Szybkie sprawdzenie
Masz przycisk zawierający wyłącznie element SVG z lupą i żadnego tekstu. Jak nadać mu dostępną nazwę?
Podsumowanie: nazwij każdy przycisk z ikoną
Nadaj przyciskom zawierającym wyłącznie ikony nazwę za pomocą aria-label lub tekstu ukrytego wizualnie, ukryj ikonę i nazwij działanie. Teraz każdy przycisk przemawia. ✅
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Przyciski ikonowe, które nadal mają nazwę” jest bezpłatna?
Tak — pełny tekst „Przyciski ikonowe, które nadal mają nazwę” 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 „Przyciski ikonowe, które nadal mają nazwę”?
Nadaj przyciskowi bez tekstu jasną dostępną etykietę. Ć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 „Przyciski ikonowe, które nadal mają nazwę”?
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
- Wbudowany SVG: role img i title
- Ukrywanie dekoracyjnych ikon za pomocą aria-hidden
- Przyciski ikonowe, które nadal mają nazwę
- Czcionki ikon i problemy z ich dostępnością