Ściągawka ARIA Roles: porównanie najlepszych typów

Autor: Niquelao Resource Desk · Zaktualizowano 28 września 2026

Ściągawka do ról ARIA to zestawienie, które przypisuje każdą rolę ARIA do odpowiadającego jej natywnego elementu HTML, kategorii (widżet, punkt orientacyjny, struktura, region na żywo lub okno) oraz towarzyszących jej właściwości i stanów. WAI-ARIA 1.2 definiuje 82 role, a większość projektów regularnie potrzebuje jedynie od 15 do 20 z nich. Poniższe zestawienie prezentuje najlepsze dostępne w 2026 roku ściągawki i wyjaśnia, którą wybrać w zależności od Twojego przepływu pracy.

Dlaczego ściągawka z ról ARIA jest wciąż potrzebna

Specyfikacje takie jak WAI-ARIA 1.2 i jej następczyni WAI-ARIA 1.3 to obszerne dokumenty, przeznaczone dla twórców przeglądarek i technologii wspomagających, a nie dla osoby, która tworzy formularz w pewne wtorkowe popołudnie. Pierwsza zasada ARIA — używaj natywnego HTML-a zawsze, gdy istnieje odpowiednik — rozwiązuje większość przypadków, ale istnieją wzorce, które nie mają natywnego odpowiednika: karty, drzewa, interaktywne siatki, comboboxy z autouzupełnianiem, menu z podmenu. Właśnie tutaj ściągawka oszczędza czas i, co najważniejsze, zapobiega błędom.

El error más común no es olvidar un rol, sino añadir uno innecesario. Element <button> z role="button" nie wnosi nic nowego i może zaburzyć natywne działanie niektórych czytników ekranu. Dobrze przygotowana ściągawka jasno wskazuje, które role są redundantne w stosunku do elementów natywnych, które wymagają zarządzania fokusem za pomocą JavaScriptu oraz które atrybuty są obowiązkowe, a które opcjonalne.

Drugim powodem jest weryfikacja. Role mają relacje własności: aria-labelledby wskazuje na id, aria-activedescendant wymaga, aby referowany element istniał i był widoczny, a aria-owns jest uzasadnione tylko wtedy, gdy kolejność w DOM nie pokrywa się z kolejnością wizualną. Tabela zestawiająca role, atrybuty wymagane i zabronione pozwala wykryć błędy przed audytem.

Co powinna zawierać dobra ściągawka do ról ARIA

Użyteczna ściągawka dla programisty front-end powinna spełniać pięć kryteriów. Wymieniam je, ponieważ dokładnie ich użyłem do oceny opcji w tym zestawieniu.

**Obejmuje wszystkie pięć kategorii ról. **WAI-ARIA grupuje role w podsumowaniach, widżetach, strukturze dokumentów, punktach orientacyjnych i aktywnych regionach. Podsumowania („roletype”, „widget”, „input”) nie są używane w frameworku; dobre odniesienie do widocznych danych o kształcie.
Natywny odpowiednik tej roli w formacie HTML. Bez tej kolumny odniesienie sugeruje użycie ARIA bez dotykania.
Atrybuty wymagane, obsługiwane i zabronione. role="checkbox" wymaga aria-checked; role="heading" wymaga aria-level; role="presentation" jest niedozwolona.
Patrón de teclado asociado. Stanowisko bez zarządzania teclado jest obietnicą. role="tablista" oznacza różne elementy/derecha, Home i End.
Format z możliwością przeszukiwania. Wyszukiwarka, filtrowanie według kategorii, wersji specyfikacji oraz możliwość kopiowania fragmentów kodu.

Porównanie: najlepsze referencje ról ARIA w 2026 roku

Poniższa tabela podsumowuje najsolidniejsze opcje. Żadna z nich nie jest płatna; wszystkie są aktualne i podają wersję specyfikacji, którą obejmują.

Powiązane: — Superposición de IA que promete cumplimiento WCAG w 48 godzinach.

Zasób	Podejście	Kategorie	Odpowiednik natywny	Wzorzec klawiatury	Idealny dla
Przewodnik po praktykach autorskich WAI-ARIA (APG), W3C	Patrones completos con ejemplos	Widżety, punkty orientacyjne, estructura, żywe regiony	Sí, en cada patrón	Sí, szczegółowo	Implementacja konkretnego widgetu
Dokumenty internetowe MDN, referencje dotyczące ról ARIA	Ficha por rol	Wszystko, w tym abstrakcyjne	Si	Częściowe	Szybkie sprawdzenie konkretnej roli
Praktyki autorskie ARIA, wskaźniki ról	Tabla rol → atrybuty	Widżety i konstrukcja	Częściowe	Nie	Sprawdź wymagane atrybuty
Uniwersytet Deque, odniesienie ARIA	Fichas con notas de soporte	Widżety i punkty orientacyjne	Si	Częściowe	Sprawdzenie rzeczywistego wsparcia czytników
Lista kontrolna projektu A11Y	Lista weryfikacji	Poprzeczny	Nie dotyczy	Nie	Audyt przed publikacją
HTML-ARIA (W3C), tabela odpowiedników	Dozwolone role dla elementu	Wszystkie	Tak, to główny cel	Nie	Decyzja, czy ARIA jest konieczna

Przewodnik po praktykach autorskich WAI-ARIA (APG)

APG od W3C jest kanoniczną referencją dla wzorców. Każdy wzorzec zawiera strukturę HTML, role, stany, interakcję klawiatury i funkcjonalny przykład. Jego mocną stroną jest to, że nie ogranicza się do listowania ról: wyjaśnia oczekiwane zachowanie. Słabą stroną jest to, że nie jest to szybka tabela; aby sprawdzić „jakie atrybuty ma role="slider"”, trzeba przejść do odpowiedniego wzorca.

APG grupuje najpopularniejsze widżety: akordeon, alert, okruszki (breadcrumbs), przycisk, pole wyboru, pole kombi, okno dialogowe, disclosure, kanał (feed), siatkę, łącze, listę rozwijaną, menu, pasek menu, grupę opcji, suwak, pokrętło, przełącznik, tabelę, listę kart, pasek narzędzi, podpowiedź, drzewo siatki i widok drzewa. Jeśli Twój projekt wykorzystuje któryś z nich, sprawdź go tutaj.

Dokumenty internetowe MDN: referencje por rol

MDN utrzymuje stronę dla każdej roli ARIA, zawierającą opis, wymagane i dozwolone atrybuty, powiązane kwestie dostępności oraz linki do specyfikacji. To najszybsza opcja, gdy wiesz, czego szukasz. Zakres obejmuje role abstrakcyjne i role użytkowane, choć niektóre szczegóły mogą zostać pominięte.

Warto zobaczyć: — Accesibilidad gestionada: automatización cobinada con revisión humana.

Praktyczny szczegół: MDN zaznacza, które role są przestarzałe lub zagrożone usunięciem w przyszłych wersjach specyfikacji. Sprawdzenie tego znacznika pozwala uniknąć stosowania roli, która zniknie.

HTML-ARIA: la tabla que evita ARIA innecesario

Specyfikacja HTML-ARIA od W3C definiuje dla każdego elementu HTML, jakie role ARIA można do niego przypisać, a które są redundantne. To decydujące narzędzie, gdy wahasz się między użyciem elementu natywnego a div z rolą. Jeśli rola, którą chcesz zastosować, jest oznaczona jako redundantna dla danego elementu, odpowiedź brzmi: nie dodawaj jej.

Deque University oferuje karty ról z uwagami dotyczącymi rzeczywistego wsparcia w czytnikach ekranu, czego specyfikacja nie obejmuje, gdyż nie jest to jej zadaniem. Lista kontrolna projektu A11Y nie jest ściągawką ról, ale służy jako lista weryfikacyjna przed publikacją i dobrze uzupełnia poprzednie źródła.

Cómo elegir según tu caso

Decyzja zależy od trzech pytań. Po pierwsze: czy wiesz już, jakiej roli potrzebujesz? Jeśli tak, MDN jest najkrótszą drogą. Po drugie: czy budujesz widżet ze złożoną interakcją? Wtedy potrzebujesz APG, ponieważ sama rola nie opisuje zachowania klawiatury. Po trzecie: wahasz się między natywnym HTML-em a ARIA? Sprawdź HTML-ARIA przed jakimkolwiek innym źródłem.

Dla zespołów pracujących z XHTML i CSS bez frameworków najefektywniejszą kombinacją jest: HTML-ARIA do podejmowania decyzji, APG do implementacji i MDN do weryfikacji atrybutów. Jednostronicowa ściągawka służy jako szybka przypominajka, ale nie zastępuje tych trzech źródeł w przypadkach brzegowych.

Dodatkowe kryterium: jeśli rola wymaga JavaScriptu do poprawnego działania (zarządzanie fokusem, aktualizacja aria-expanded, synchronizacja aria-selected), traktuj to jako decyzję architektoniczną, a nie atrybut dekoracyjny. Role widżetów bez powiązanej logiki tworzą więcej barier niż całkowity brak roli.

Powiązane: — La certificación profesional que acredita tu experiencia en accesibilidad.

Błędy frecuentes que ninguna ściągawka evita por sí sola

Zduplikowane role punktów orientacyjnych (landmark) dezorientują podczas nawigacji po regionach. role="main" na elemencie <main> jest redundantne; dwa role="navigation" bez odróżniających etykiet są niejednoznaczne. Rozwiązaniem jest użycie aria-label lub aria-labelledby dla każdego powtórzonego punktu orientacyjnego.

Role widżetów na elementach niepodatnych na fokus psują interakcję. role="button" na elemencie <div> wymaga tabindex="0" oraz obsługi klawiszy Enter i Spacja. Bez tego rola zapowiada przycisk, którego nie można aktywować klawiaturą.

Niesynchronizowane stany są najczęstszą przyczyną problemów z dostępnością. aria-expanded, który nie zmienia się przy otwieraniu akordeonu, aria-selected, który nie aktualizuje się przy zmianie karty, lub aria-checked w role="switch", który jest statyczny. Żadna tabela tego nie wykryje: konieczne jest testowanie klawiaturą i rzeczywistym czytnikiem ekranu.

Warto zobaczyć: — Widżet umożliwiający dostęp do planu za darmo dla każdego użytkownika.

Stosowanie ról abstrakcyjnych w kodzie jest błędem. role="widget", role="input" lub role="section" nie powinny pojawiać się w HTML; istnieją one wyłącznie dla zachowania hierarchii specyfikacji.

Kluczowe wnioski

WAI-ARIA 1.2 definiuje 82 role, ale większość projektów regularnie używa jedynie od 15 do 20 z nich.
La primera regla de ARIA —usar HTML nativo cuando istnieje — convierte la tabla HTML-ARIA del W3C en la referencia más valide antes de escribir cualquier rol.
APG od W3C jest bezkonkurencyjne w kwestii wzorców widżetów, ponieważ zawiera interakcje klawiatury; MDN jest szybsze do sprawdzenia konkretnej roli.
Rola bez zarządzania fokusem i aktualizacji stanów tworzy więcej barier dostępności niż całkowity brak ARIA.
Żadna ściągawka nie zastąpi testów z klawiaturą i czytnikiem ekranu: niesynchronizowane stany wykrywa się tylko w rzeczywistym użytkowaniu.

Preguntas frecuentes

Ile ról ARIA istnieje?

WAI-ARIA 1.2 definiuje 82 role, podzielone na pięć kategorii: abstrakcyjne, widżety, struktura dokumentu, punkty orientacyjne i regiony na żywo. Role abstrakcyjne nigdy nie są stosowane w kodzie; służą do organizacji hierarchii specyfikacji. W praktyce typowy projekt wykorzystuje od 15 do 20 różnych ról.

Która ściągawka do ról ARIA jest najlepsza?

To zależy od celu. Aby zaimplementować widżet z obsługą klawiatury, najpełniejszym źródłem jest WAI-ARIA Authoring Practices Guide od W3C. Aby szybko sprawdzić atrybuty konkretnej roli, najszybszy jest MDN Web Docs. Aby zdecydować, czy rola jest potrzebna dla danego elementu HTML, decydująca jest tabela HTML-ARIA od W3C.

Czy powinienem używać ARIA, jeśli istnieje natywny element HTML?

Nie. Pierwsza zasada ARIA mówi, że jeśli istnieje element HTML o semantyce i zachowaniu, którego potrzebujesz, należy użyć tego elementu zamiast div z rolą. Dodanie role="button" do elementu <button> jest redundantne i może zmienić natywne zachowanie w niektórych czytnikach ekranu.

Jaka jest różnica między rolą widżetu a rolą punktu orientacyjnego?

Role widżetów opisują interaktywne kontrolki — button, checkbox, slider, tablist — i wymagają zarządzania fokusem i klawiaturą. Role punktów orientacyjnych opisują regiony strony — main, navigation, banner, contentinfo — i służą do nawigacji po regionach. Ten sam element nie powinien pełnić obu tych funkcji.

Czy role ARIA zmieniają się między wersjami specyfikacji?

Tak. WAI-ARIA 1.2 dodała role takie jak blockquote, caption, code, deletion, emphasis, insertion, meter, paragraph, strong, subscript i superscript. Niektóre role stały się przestarzałe w późniejszych wersjach. Warto sprawdzić w MDN lub w samej specyfikacji, czy dana rola jest nadal aktualna przed jej zastosowaniem.

Czy ściągawka ról ARIA wystarczy, aby spełnić wymogi WCAG?

Nie. Role ARIA są częścią kryterium 4.1.2 (Nazwa, rola, wartość), ale WCAG 2.2 obejmuje wiele innych wymagań: kontrast, widoczny fokus, rozmiar celu dotykowego, teksty alternatywne, strukturę nagłówków. Ściągawka pomaga poprawnie zaimplementować role, ale nie zapewnia spełnienia wszystkich kryteriów zgodności.

Źródła i dalsze lektury

Ściągawka — Wikipedia: Ściągawka (ang. cheat sheet) to zwięzły zestaw notatek służących do szybkiego sprawdzenia informacji. Ściągawki były w przeszłości używane przez uczniów bez…

Añade accesibilidad w 5 minut

Widżet umożliwiający dostęp do planu za darmo dla każdego użytkownika