Nazywanie wielu regionów za pomocą aria-label
Rozróżnij dwie sekcje nav, aby użytkownicy wiedzieli, która jest która
Nazywanie wielu regionów za pomocą aria-label 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.
Dwie nawigacje, jeden problem
Wiele stron ma menu główne i menu w stopce. Oba są landmarkami nav, a bez nazw brzmią dla czytnika ekranu identycznie.
Nadaj nazwę regionowi
Dodaj aria-label, aby nadać landmarkowi krótką, odczytywaną na głos nazwę. Dzięki temu czytnik ekranu rozróżni obie nawigacje.
<nav aria-label="Main">...</nav>
<nav aria-label="Footer">...</nav>Zachowaj krótkie etykiety
Element aria-label powinien zawierać kilka słów, na przykład Main lub Breadcrumb. Użytkownicy słyszą tę nazwę, dlatego zwięzłość szanuje ich czas.
Nie powtarzaj roli
Napisz Footer, a nie Footer navigation. Czytnik ekranu już wypowiada słowo navigation, więc jego ponowne dodanie jest tylko zbędnym szumem.
<nav aria-label="Footer">...</nav>Użyj widocznego nagłówka ponownie
Jeśli region ma już widoczny nagłówek, wskaż go za pomocą aria-labelledby zamiast wpisywać nazwę drugi raz.
<nav aria-labelledby="more">
<h2 id="more">More links</h2>
</nav>label a labelledby
Użyj aria-label, gdy nie ma widocznego tekstu, a aria-labelledby, gdy nagłówek lub tekst widoczny na ekranie może posłużyć jako nazwa.
Działa z każdym landmarkiem
Nazwy nie dotyczą tylko nav. Oznacz element aside lub sekcję, aby użytkownicy wiedzieli, co zawiera każdy region.
<aside aria-label="Related">...</aside>Jeden region — pomiń etykietę
Jeśli strona ma tylko jeden element nav, nie potrzebuje on etykiety. Nazwy są najważniejsze, gdy dwa regiony mają tę samą rolę.
Unikatowe nazwy mają znaczenie
Nadaj każdemu regionowi unikatową nazwę. Dwie nawigacje oznaczone jako Menu nie spełniają swojego zadania, ponieważ użytkownicy nadal nie mogą ich rozróżnić.
Usłysz różnicę
Po dodaniu nazw lista landmarków zawiera Main navigation i Footer navigation, dzięki czemu użytkownicy od razu wybierają właściwy element. 🔊
Etykiety nie są widoczne
Element aria-label jest odczytywany na głos, ale nigdy nie pojawia się na ekranie. Nie zmienia więc wyglądu, a jednocześnie pomaga użytkownikom czytników ekranu.
Szybkie sprawdzenie
Masz dwa regiony nav. Jaka jest najlepsza etykieta dla dolnego z nich?
Podsumowanie: nazywaj swoje regiony
Nauczyłeś się oznaczać powtarzalne landmarki za pomocą aria-label lub aria-labelledby, zachowując krótkie, unikatowe nazwy bez nazw ról. 🙌
Często zadawane pytania
Czy lekcja „Nazywanie wielu regionów za pomocą aria-label” jest bezpłatna?
Tak — pełny tekst „Nazywanie wielu regionów za pomocą aria-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 „Nazywanie wielu regionów za pomocą aria-label”?
Rozróżnij dwie sekcje nav, aby użytkownicy wiedzieli, która jest która Ć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 „Nazywanie wielu regionów za pomocą aria-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
- header, nav, main, footer: wielka czwórka
- Umieszczanie treści w main i tylko jednym main
- Nazywanie wielu regionów za pomocą aria-label
- Nawigacja po punktach orientacyjnych: jak użytkownicy przemieszczają się po stronie