ARIA i dostępność: label, role, aria-*
Łącz etykiety z kontrolkami, stosuj role ARIA tam, gdzie są potrzebne, oraz używaj aria-label i aria-describedby do obsługi czytników ekranu.
ARIA i dostępność: label, role, aria-* to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 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.
Po co ARIA?
ARIA (Accessible Rich Internet Applications) to zestaw atrybutów HTML, które przekazują technologiom asystującym, takim jak czytniki ekranu, informacje o przeznaczeniu, stanie i właściwościach komponentów interfejsu — szczególnie niestandardowych widżetów, które nie mają natywnego odpowiednika w HTML.
Pierwsza zasada ARIA
Nie należy używać ARIA, jeśli dane zadanie może wykonać natywny element lub atrybut HTML. <button> jest zawsze lepszym wyborem niż <div role="button">. Natywny HTML zapewnia dostępność bez dodatkowego wysiłku.
Role punktów orientacyjnych
Role punktów orientacyjnych ARIA pozwalają użytkownikom czytników ekranu przechodzić bezpośrednio do sekcji strony. Większość z nich wynika z semantycznego HTML: <main> → role=main, <nav> → role=navigation. Jawne role należy dodawać tylko wtedy, gdy nie jest używany element semantyczny.
<div role="main">...</div> <!-- prefer <main> -->
<div role="navigation">...</div> <!-- prefer <nav> -->
<div role="banner">...</div> <!-- prefer <header> at page level -->aria-label
aria-label zapewnia niewidoczną dla użytkownika dostępną nazwę elementu. Należy go użyć, gdy nie ma widocznej etykiety tekstowej, do której można się odwołać. Jest często stosowany w przypadku przycisków zawierających wyłącznie ikony.
<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
<img src="rss-icon.svg" alt="">
</a>aria-labelledby
aria-labelledby wskazuje tekst innego elementu jako etykietę, korzystając z odwołania do identyfikatora. Jest preferowany zamiast aria-label, gdy widoczna etykieta już istnieje.
<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
...
</form>aria-describedby
aria-describedby wskazuje dodatkowy tekst opisowy — na przykład komunikat o błędzie lub podpowiedź — który uzupełnia etykietę. Czytniki ekranu odczytują najpierw etykietę, a następnie opis.
<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>aria-expanded i aria-haspopup
Dynamiczne widżety wymagają atrybutów opisujących stan. aria-expanded informuje, czy widżet ujawniania treści (akordeon, lista rozwijana) jest otwarty czy zamknięty. Po zmianie stanu należy aktualizować ten atrybut w JavaScript.
<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>
<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');aria-hidden
aria-hidden="true" usuwa element i wszystkie jego elementy podrzędne z drzewa dostępności. Należy go używać w przypadku elementów dekoracyjnych, takich jak ikony SVG, które są już opisane widocznym tekstem.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save Draft
</button>Regiony na żywo: aria-live
aria-live informuje czytniki ekranu, że powinny ogłaszać zmiany w tym regionie. polite czeka, aż użytkownik zakończy bieżące działanie. assertive natychmiast przerywa bieżący komunikat (należy używać go oszczędnie).
<div aria-live="polite" aria-atomic="true">
<!-- Status messages announced when updated -->
Form saved successfully.
</div>role="alert"
role="alert" ma niejawnie ustawioną wartość aria-live=assertive. Komunikaty o błędach lub ważne powiadomienia należy umieszczać w elemencie z tą rolą, aby czytniki ekranu ogłosiły je natychmiast.
const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediatelyDostępne komunikaty o błędach formularza
Gdy pole zawiera błąd, należy użyć aria-invalid="true", połączyć komunikat o błędzie za pomocą aria-describedby oraz zaktualizować treść elementu z role="alert". To trzyczęściowe podejście gwarantuje, że czytniki ekranu przekażą wszystkie niezbędne informacje.
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>Szybki test
Który atrybut ARIA zapewnia dostępną nazwę elementu, gdy nie ma widocznej etykiety tekstowej?
Podsumowanie: najważniejsze informacje o ARIA
Należy preferować natywny HTML zamiast ARIA. aria-label służy do oznaczania przycisków zawierających wyłącznie ikony. aria-labelledby pozwala odwołać się do widocznych etykiet. aria-describedby służy do podpowiedzi i komunikatów o błędach. aria-expanded określa stan widżetów ujawniania treści. aria-hidden służy do treści dekoracyjnych. aria-live służy do dynamicznych aktualizacji statusu. aria-invalid + role=alert służą do obsługi błędów formularza.
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 „ARIA i dostępność: label, role, aria-*” jest bezpłatna?
Tak — pełny tekst „ARIA i dostępność: label, role, 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 „ARIA i dostępność: label, role, aria-*”?
Łącz etykiety z kontrolkami, stosuj role ARIA tam, gdzie są potrzebne, oraz używaj aria-label i aria-describedby do obsługi czytników ekranu. Ć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 2 z 4.
Ile czasu zajmuje lekcja „ARIA i dostępność: label, role, 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
- Elementy formularzy: typy input, select, textarea
- ARIA i dostępność: label, role, aria-*
- Semantyczny HTML5: semantyka a zupa divów
- Atrybuty walidacji formularzy