Role ARIAExplained

77 of 77 rows

Rola↕	Przeznaczenie↕	Zastosowanie↕
Punkt orientacyjny
⤢banner	Identyfikuje nagłówek witryny u góry strony.	Logo marki, główny slogan, masthead u góry strony.
⤢navigation	Grupuje zbiór linków nawigacyjnych.	Menu główne, breadcrumby, nawigacja w obrębie strony.
⤢main	Oznacza dominującą treść dokumentu.	Unikalna główna część strony.
⤢complementary	Oznacza treść wspierającą, oddzielną od main.	Paski boczne, powiązane linki, wyróżnione uwagi.
⤢contentinfo	Grupuje metadane stopki dotyczące dokumentu nadrzędnego.	Linie z prawami autorskimi, linki prywatności, stopka prawna.
⤢search	Oznacza region zawierający formularz wyszukiwania.	Wyszukiwarka witryny, formularze filtrów, pola znajdowania.
⤢region	Oznacza nazwaną, dostrzegalną sekcję strony.	Własne sekcje z dostępną nazwą.
⤢form	Oznacza region zawierający zestaw pól formularza.	Nazwane formularze wyszukiwania, panele filtrów, sekcje ankiet.
⤢application	Oznacza region zachowujący się jak aplikacja programowa.	Edytory pełnostronicowe, mapy, powierzchnie gier.
Dokument
⤢article	Oznacza samodzielną kompozycję.	Wpisy blogowe, wiadomości, karty produktów.
⤢heading	Oznacza nagłówek dla sekcji treści.	Tytuły sekcji, gdy natywne h1-h6 nie mają zastosowania.
⤢list	Grupuje listę powiązanych elementów.	Własne listy punktowane lub numerowane.
⤢listitem	Oznacza pojedynczy element wewnątrz listy.	Jeden wiersz własnej listy.
⤢group	Grupuje zestaw powiązanych kontrolek formularza.	Zestawy pól formularza, grupy przycisków radio, powiązane pola.
⤢figure	Oznacza treść graficzną połączoną z podpisem.	Obrazy, diagramy, wykresy z etykietą.
⤢table	Oznacza dane ułożone w wiersze i kolumny.	Dane tabelaryczne zbudowane z własnych elementów.
⤢caption	Oznacza widoczną etykietę tabeli, siatki lub figury.	Tytuły nad tabelami danych, etykiety figur.
⤢rowgroup	Grupuje zestaw powiązanych wierszy w tabeli.	Pasma nagłówka, treści i stopki tabeli.
⤢row	Oznacza jedną linię komórek w tabeli lub siatce.	Pojedyncza linia rekordu własnej tabeli.
⤢columnheader	Oznacza komórkę nagłówka dla kolumny tabeli.	Górne etykiety tabeli danych.
⤢rowheader	Oznacza komórkę nagłówka dla wiersza tabeli.	Prowadząca etykieta każdego wiersza tabeli.
⤢cell	Oznacza jedną komórkę danych wewnątrz wiersza.	Poszczególne wartości wiersza własnej tabeli.
⤢term	Oznacza słowo lub frazę, które jest definiowane.	Klucze słownikowe, terminy list definicji.
⤢definition	Oznacza znaczenie poprzedzającego terminu.	Opis pod zdefiniowanym terminem.
⤢note	Oznacza uwagę umieszczoną obok głównej treści.	Wskazówki, wtrącenia, uwagi w stylu przypisu.
⤢directory	Oznacza listę odniesień do członków grupy.	Spisy treści i indeksy linków (przestarzałe w ARIA 1.2).
⤢feed	Oznacza przewijaną listę sekcji artykułów.	Strumienie z nieskończonym przewijaniem, doładowujące więcej treści.
⤢math	Oznacza treść zapisaną w notacji matematycznej.	Wzory renderowane z LaTeX-a lub MathML.
⤢meter	Oznacza wartość skalarną w znanym zakresie.	Paski użycia dysku, wyniki, wskaźniki siły.
⤢time	Oznacza konkretny moment lub czas trwania.	Znaczniki czasu, daty wydarzeń, czasy trwania.
⤢paragraph	Oznacza blok tekstu ciągłego.	Bloki tekstu niezapisane jako natywne elementy p.
⤢blockquote	Oznacza cytat pochodzący z innego źródła.	Cytaty wyróżnione i cytowane fragmenty.
⤢code	Oznacza fragment kodu komputerowego.	Wstawki inline i nazwy poleceń w tekście.
⤢emphasis	Oznacza tekst niosący nacisk.	Zaakcentowane słowa wewnątrz zdania.
⤢strong	Oznacza tekst o dużej wadze.	Ostrzeżenia, kluczowe frazy, etykiety obowiązkowe do przeczytania.
⤢subscript	Oznacza tekst renderowany poniżej linii bazowej.	Wzory chemiczne takie jak H2O.
⤢superscript	Oznacza tekst renderowany powyżej linii bazowej.	Znaczniki przypisów i wykładniki.
⤢generic	Oznacza zwykły kontener bez specjalnego znaczenia.	Wrappery układu i punkty zaczepienia stylów.
⤢presentation / none	Zdejmuje semantykę z elementu.	Obrazy dekoracyjne, tabele układu, elementy separatorów.
⤢img	Oznacza element jako pojedynczy obraz.	Spiry ikon, grupy SVG, grafika rysowana CSS-em.
Widżet
⤢button	Oznacza klikalną kontrolkę wyzwalającą akcję.	Własne przyciski, przyciski ikonowe, wyzwalacze akcji.
⤢link	Oznacza link do innego zasobu lub lokalizacji.	Własne kotwice i linki tras w aplikacji.
⤢checkbox	Oznacza przełącznik pojedynczej opcji.	Własne pola wyboru, przełączniki akceptacji warunków.
⤢radio	Oznacza jeden wybór w grupie wykluczającej się wzajemnie.	Własne przyciski radio wewnątrz grupy radio.
⤢switch	Oznacza binarny przełącznik wł./wył.	Przełączniki motywu, wyciszenia i ustawień.
⤢tablist	Grupuje etykiety zestawu kart.	Pasek kart panelu z kartami.
⤢tab	Oznacza jedną etykietę wewnątrz listy kart.	Pojedyncza karta pokazująca jeden panel.
⤢tabpanel	Oznacza panel treści dla jednej karty.	Treść pokazywana, gdy karta jest aktywna.
⤢dialog	Oznacza okno nakładki na wierzchu strony.	Okna modalne, szuflady, popovery przechwytujące fokus.
⤢alertdialog	Oznacza dialog wymagający odpowiedzi użytkownika.	Potwierdzenia usunięcia, monity o niezapisanych zmianach.
⤢combobox	Oznacza pole wejściowe z wysuwaną listą wyborów.	Autouzupełnianie, wybór z wyszukiwaniem, listy typeahead.
⤢slider	Oznacza kontrolkę ustawiającą wartość w zakresie.	Głośność, cena, krycie, pola zakresu.
⤢menu	Oznacza listę wyborów oferowanych użytkownikowi.	Menu rozwijane, menu kontekstowe, palety narzędzi.
⤢menuitem	Oznacza pojedynczą opcję wewnątrz menu.	Jeden wiersz lub element menu rozwijanego.
⤢textbox	Oznacza pole do wprowadzania dowolnego tekstu.	Własne pola, pola wyszukiwania, pola komentarzy.
⤢tree	Oznacza hierarchiczną listę elementów.	Eksploratory plików, zagnieżdżone menu, schematy organizacyjne.
⤢listbox	Oznacza listę wybieralnych opcji.	Własne selektory dla jednego lub wielu wyborów.
⤢option	Oznacza pojedynczy wybór wewnątrz listy opcji.	Jeden wybieralny wpis własnej listy opcji.
⤢radiogroup	Grupuje zestaw wyborów wykluczających się wzajemnie.	Własne zestawy radio, selektory planów, odpowiedzi skalowe.
⤢grid	Oznacza widżet wierszy i kolumn komórek.	Układy arkuszy kalkulacyjnych, widoki miesiąca kalendarza.
⤢treegrid	Oznacza siatkę, której wiersze rozwijają się i zwijają.	Zagnieżdżone tabele danych, tabele wątków pocztowych.
⤢treeitem	Oznacza jedną rozwijalną opcję wewnątrz drzewa.	Węzeł pliku lub folderu w eksploratorze plików.
⤢tooltip	Oznacza dymek podpowiedzi wskazujący kontrolkę.	Podpowiedzi po najechaniu, wskazówki fokusu dla przycisków ikonowych.
⤢progressbar	Oznacza element pokazujący postęp zadania.	Paski przesyłania i wskaźniki ładowania.
⤢scrollbar	Oznacza kontrolkę przewijającą widok treści.	Własne uchwyty przewijania dla paneli i karuzel.
⤢spinbutton	Oznacza kontrolkę zmieniającą wartość krokowo.	Selektory ilości, liczbowe przyciski krokowe.
⤢searchbox	Oznacza pole tekstowe do wpisywania fraz wyszukiwania.	Własne paski wyszukiwania i pola filtrów.
⤢toolbar	Oznacza grupę często używanych kontrolek.	Paski formatowania, rzędy akcji nad edytorami.
⤢menubar	Oznacza rząd trwałych wyzwalaczy menu.	Paski menu Plik i Edycja w stylu aplikacji.
⤢menuitemcheckbox	Oznacza opcję menu przełączaną wł./wył.	Przełączniki opcji widoku wewnątrz menu rozwijanego.
⤢menuitemradio	Oznacza jeden wyłączny wybór wewnątrz menu.	Wybory kolejności sortowania i motywu w menu.
⤢separator	Oznacza oddzielacz między grupami treści.	Separatory menu, przeciągane rozdzielacze paneli.
Region aktywny
⤢alert	Ogłasza pilną czasowo ważną wiadomość.	Błędy formularzy, pilne powiadomienia wymagające uwagi.
⤢status	Ogłasza doradczą aktualizację bez przerywania.	Potwierdzenie zapisania, postęp, miękkie wyniki.
⤢log	Ogłasza nowe wpisy w strumieniu chronologicznym.	Transkrypcje czatów, dzienniki zdarzeń, kanały aktywności.
⤢marquee	Ogłasza przewijaną lub ruchomą treść tekstową.	Tickery, przewijane paski wiadomości, rotujące bannery.
⤢timer	Ogłasza licznik czasu na żywo lub odliczanie.	Wygaśnięcia sesji, odliczania, stopery.