Role i atrybuty ARIA
Proszę stosować role punktów orientacyjnych, regiony na żywo i atrybuty aria-*, aby ulepszać komponenty tam, gdzie natywny HTML nie wystarcza.
Role i atrybuty ARIA to bezpłatna lekcja Frontend 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym jest ARIA?
ARIA (Accessible Rich Internet Applications) to zestaw atrybutów HTML opisujących rolę, stan i właściwości elementów dla technologii asystujących. Stanowi pomost dla niestandardowych komponentów, których nie da się wyrazić za pomocą natywnego HTML.
Pierwsza zasada ARIA: nie używaj ARIA
Jeśli natywny element wykonuje potrzebne działanie, należy go użyć. <button> jest lepszy niż <div role="button">. Niewłaściwie użyte ARIA jest gorsze niż jego brak — sprawia wrażenie dostępności, a jednocześnie pozostawia użytkowników bez pomocy.
Kategorie atrybutów ARIA
Istnieją trzy kategorie: role (czym coś jest), właściwości (względnie statyczne — aria-label, aria-describedby) oraz stany (dynamiczne — aria-expanded, aria-pressed, aria-checked).
Role punktów orientacyjnych
Identyfikują główne obszary strony. Większość z nich ma odpowiedniki w HTML5 i należy preferować właśnie te odpowiedniki.
<!-- HTML5 (preferred): -->
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<!-- ARIA equivalents (use only when HTML5 won't work): -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="complementary">...</div>aria-label i aria-labelledby
aria-label: podaje nazwę dostępną za pomocą ciągu znaków. aria-labelledby: wskazuje tekst innego elementu jako nazwę. Należy ich używać, gdy widoczny tekst nie istnieje lub jest niewystarczający.
<!-- Icon-only button needs a label: -->
<button aria-label="Close dialog">
<svg>...</svg>
</button>
<!-- Section labelled by its heading: -->
<section aria-labelledby="settings-title">
<h2 id="settings-title">Settings</h2>
...
</section>aria-describedby dla wskazówek
aria-describedby łączy element z dłuższym opisem. Jest przydatny w przypadku wskazówek w formularzach, komunikatów o błędach i podpowiedzi.
<label for="password">Password</label>
<input id="password" type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 12 characters with a number and symbol.</p>aria-expanded dla elementów ujawniających treść
Przyciski przełączające widoczność panelu powinny udostępniać aria-expanded = true/false.
<button aria-expanded="false" aria-controls="faq-1" onclick="toggle()">
How do I cancel?
</button>
<div id="faq-1" hidden>
Visit Settings > Billing to cancel.
</div>aria-pressed dla przycisków przełączających
Przyciski ze stanem włączone/wyłączone (wyciszenie, pogrubienie) powinny używać aria-pressed.
<button aria-pressed="true" onclick="toggleBold()">
Bold
</button>Regiony dynamiczne: aria-live
Treści aktualizowane dynamicznie (powiadomienia, wyniki wyszukiwania, podsumowania błędów) powinny znajdować się w regionie dynamicznym, aby czytniki ekranu odczytywały zmiany. polite czeka na przerwę, a assertive przerywa bieżący komunikat.
<!-- Toast container -->
<div aria-live="polite" aria-atomic="true" id="toast-region"></div>
<!-- Critical alert -->
<div role="alert">Session expired. Please log in again.</div>Skrót role="alert"
role="alert" to skrócony zapis asertywnego regionu dynamicznego z aria-atomic. Należy używać go oszczędnie — każdy alert przerywa użytkownikowi pracę.
aria-hidden dla treści dekoracyjnych
aria-hidden="true" usuwa element z drzewa dostępności. Należy używać go w przypadku dekoracyjnych ikon umieszczonych obok etykiet tekstowych — w przeciwnym razie czytniki ekranu odczytają je ponownie.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>Testuj z czytnikiem ekranu
Jedynym sposobem sprawdzenia, czy ARIA działa, jest przeprowadzenie testów. VoiceOver (macOS/iOS, bezpłatny), NVDA (Windows, bezpłatny), TalkBack (Android, bezpłatny). 10 minut z VoiceOver ujawni więcej problemów niż dowolne narzędzie audytowe.
Szybkie sprawdzenie
Jaki atrybut ARIA należy ustawić na przycisku zawierającym tylko ikonę, który nie ma widocznej etykiety tekstowej?
Podsumowanie: ARIA
ARIA opisuje rolę, właściwości i stan dla technologii asystujących. Przed użyciem ARIA należy preferować natywny HTML. aria-label/aria-labelledby zapewniają dostępne nazwy. aria-describedby służy do wskazówek. aria-expanded/aria-pressed służą do elementów przełączających. aria-live służy do dynamicznych komunikatów. aria-hidden służy do treści dekoracyjnych. Zawsze należy testować rozwiązanie z prawdziwym czytnikiem ekranu.
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
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „Role i atrybuty ARIA” jest bezpłatna?
Tak — pełny tekst „Role i atrybuty ARIA” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Role i atrybuty ARIA”?
Proszę stosować role punktów orientacyjnych, regiony na żywo i atrybuty aria-*, aby ulepszać komponenty tam, gdzie natywny HTML nie wystarcza. Ćwiczysz Frontend 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ąć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend 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 „Role i atrybuty ARIA”?
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 Frontend Academy?
Tak. Każda lekcja Frontend 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
- Poziomy WCAG: A, AA, AAA
- Semantyczny HTML jako fundament
- Role i atrybuty ARIA
- Nawigacja klawiaturą i zarządzanie fokusem