Przyciski jasno informujące o swoim działaniu
Wyraźnie opisuj działania użytkownikom, którzy nie mogą ich zobaczyć
Przyciski jasno informujące o swoim działaniu 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.
Przyciski wymagają nazw
Przycisk jest użyteczny tylko wtedy, gdy użytkownicy wiedzą, co robi. Jego dostępna nazwa to tekst, który czytnik ekranu odczytuje na głos przed naciśnięciem przycisku.
Tekst staje się nazwą
W przypadku zwykłego przycisku widoczny tekst umieszczony w jego wnętrzu jest dostępną nazwą. Jasne słowa oznaczają jasny komunikat.
<button>Save changes</button>Nazwij działanie
Opisz przycisk działaniem, które wykonuje, na przykład „Zapisz”, „Usuń” lub „Dodaj do koszyka”. Czasownik dokładnie informuje użytkowników, co się stanie.
Unikaj niejasnych etykiet
Etykiety takie jak „OK”, „Wyślij” lub „Przejdź” są niejasne, gdy używa ich kilka przycisków. Nazwij konkretne działanie, aby każdy przycisk był zrozumiały samodzielnie.
Problem przycisku zawierającego tylko ikonę
Przycisk zawierający ikonę bez tekstu nie ma dostępnej nazwy. Czytnik ekranu może powiedzieć tylko „przycisk”, pozostawiając użytkownika w niepewności. 🤔
<button><svg>...</svg></button>Nazwij przycisk z ikoną
Nadaj pozbawionemu tekstu przyciskowi nazwę za pomocą aria-label. Ikona nadal będzie widoczna, ale technologie asystujące ogłoszą, co przycisk robi.
<button aria-label="Close dialog"><svg>...</svg></button>Ukrywaj ikony dekoracyjne
Gdy etykieta już opisuje działanie, oznacz wewnętrzną ikonę jako aria-hidden, aby nie była odczytywana jako zbędny dodatkowy tekst.
<svg aria-hidden="true">...</svg>Ogłaszaj zmiany stanu
Przełącznik w formie przycisku powinien przekazywać swój stan. Użyj aria-pressed, aby czytniki ekranu informowały, czy jest włączony, czy wyłączony.
<button aria-pressed="true">Mute</button>Rozwijanie zawartości
Przycisk, który pokazuje lub ukrywa panel, powinien mieć aria-expanded, aby użytkownicy słyszeli, czy panel jest otwarty, czy zwinięty.
<button aria-expanded="false">Details</button>Etykiety powinny być krótkie i zgodne z prawdą
Dobra etykieta jest krótka, ale zgodna z prawdą. Dokładnie obiecuje to, co stanie się po naciśnięciu przycisku, bez żadnych niespodzianek.
Dopasuj tekst widoczny i dostępny
Jeśli przycisk ma widoczny tekst, zachowaj te słowa w jego dostępnej nazwie, aby użytkownicy sterujący głosem mogli wypowiedzieć widoczną etykietę.
Szybkie sprawdzenie
Przycisk zamykania zawierający tylko ikonę pokazuje znak X. Jak nadać mu dostępną nazwę?
Podsumowanie
Nazywaj każdy przycisk zgodnie z wykonywanym działaniem, nadawaj nazwy przyciskom zawierającym tylko ikony i ujawniaj stan za pomocą atrybutów aria. Dzięki temu użytkownicy zawsze wiedzą, co robią przyciski. 👍
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 jasno informujące o swoim działaniu” jest bezpłatna?
Tak — pełny tekst „Przyciski jasno informujące o swoim działaniu” 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 jasno informujące o swoim działaniu”?
Wyraźnie opisuj działania użytkownikom, którzy nie mogą ich zobaczyć Ć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 jasno informujące o swoim działaniu”?
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
- Linki prowadzą w różne miejsca, a przyciski wykonują działania
- Tekst linku zrozumiały poza kontekstem
- Przyciski jasno informujące o swoim działaniu
- Antywzorzec kotwicy bez href