Ruoli ARIAExplained

77 of 77 rows

Ruolo↕	Scopo↕	Usato per↕
Landmark
⤢banner	Identifica l'intestazione del sito in cima alla pagina.	Logo del brand, claim principale, testata in cima alla pagina.
⤢navigation	Raggruppa una raccolta di collegamenti di navigazione.	Menu principali, breadcrumb, navigazione interna alla pagina.
⤢main	Contrassegna il contenuto dominante del documento.	Il corpo principale unico della pagina.
⤢complementary	Contrassegna contenuto di supporto separato dal main.	Barre laterali, collegamenti correlati, callout.
⤢contentinfo	Raggruppa i metadati del piè di pagina sul documento padre.	Righe di copyright, collegamenti sulla privacy, piè di pagina legale.
⤢search	Contrassegna una regione che contiene un modulo di ricerca.	Ricerca nel sito, moduli di filtro, caselle di ricerca.
⤢region	Contrassegna una sezione della pagina con un nome, percepibile.	Sezioni personalizzate con un nome accessibile.
⤢form	Contrassegna una regione che contiene un insieme di campi.	Moduli di ricerca con nome, pannelli di filtro, sezioni di sondaggi.
⤢application	Contrassegna una regione che si comporta come un'applicazione.	Editor a pagina intera, mappe, superfici di gioco.
Documento
⤢article	Contrassegna una composizione autonoma.	Articoli di blog, notizie, schede prodotto.
⤢heading	Contrassegna un titolo per una sezione di contenuto.	Titoli di sezione quando gli h1-h6 nativi non si applicano.
⤢list	Raggruppa un elenco di elementi correlati.	Elenchi puntati o numerati personalizzati.
⤢listitem	Contrassegna un singolo elemento dentro un elenco.	Una riga di un elenco personalizzato.
⤢group	Raggruppa un insieme di controlli di modulo correlati.	Fieldset di moduli, gruppi di radio, input correlati.
⤢figure	Contrassegna contenuto grafico abbinato a una didascalia.	Immagini, diagrammi, grafici con un'etichetta.
⤢table	Contrassegna dati disposti in righe e colonne.	Dati tabellari costruiti con elementi personalizzati.
⤢caption	Contrassegna un'etichetta visibile per tabella, griglia o figura.	Titoli sopra le tabelle dati, etichette delle figure.
⤢rowgroup	Raggruppa un insieme di righe correlate in una tabella.	Le fasce di intestazione, corpo e piè di tabella.
⤢row	Contrassegna una riga di celle in una tabella o griglia.	La riga di un record di una tabella personalizzata.
⤢columnheader	Contrassegna una cella di intestazione per una colonna.	Le etichette in cima a una tabella dati.
⤢rowheader	Contrassegna una cella di intestazione per una riga.	L'etichetta iniziale di ogni riga della tabella.
⤢cell	Contrassegna una cella di dati dentro una riga.	I singoli valori di una riga di tabella personalizzata.
⤢term	Contrassegna una parola o frase in via di definizione.	Voci di dizionario, termini di liste di definizione.
⤢definition	Contrassegna il significato del termine precedente.	La descrizione sotto un termine definito.
⤢note	Contrassegna una nota posta accanto al contenuto principale.	Suggerimenti, aside, note in stile nota a piè di pagina.
⤢directory	Contrassegna un elenco di riferimenti ai membri del gruppo.	Sommari e indici di collegamenti (deprecato in ARIA 1.2).
⤢feed	Contrassegna un elenco scorrevole di sezioni di articoli.	Flussi a scorrimento infinito che caricano altro contenuto.
⤢math	Contrassegna contenuto scritto in notazione matematica.	Formule renderizzate da LaTeX o MathML.
⤢meter	Contrassegna un valore scalare in un intervallo noto.	Barre di uso del disco, punteggi, indicatori di intensità.
⤢time	Contrassegna un momento specifico o una durata.	Timestamp, date di eventi, tempi trascorsi.
⤢paragraph	Contrassegna un blocco di testo in prosa.	Blocchi di testo non scritti come elementi p nativi.
⤢blockquote	Contrassegna una citazione presa da un'altra fonte.	Citazioni in evidenza e stralci citati.
⤢code	Contrassegna un frammento di codice informatico.	Snippet inline e nomi di comandi nella prosa.
⤢emphasis	Contrassegna testo che porta enfasi.	Parole enfatizzate dentro una frase.
⤢strong	Contrassegna testo con forte importanza.	Avvisi, frasi chiave, etichette da leggere assolutamente.
⤢subscript	Contrassegna testo reso sotto la linea di base.	Formule chimiche come H2O.
⤢superscript	Contrassegna testo reso sopra la linea di base.	Riferimenti a note ed esponenti.
⤢generic	Contrassegna un contenitore semplice senza significato speciale.	Wrapper di layout e agganci di stile.
⤢presentation / none	Rimuove la semantica da un elemento.	Immagini decorative, tabelle di layout, elementi divisori.
⤢img	Contrassegna un elemento come singola immagine.	Sprite di icone, gruppi SVG, grafica disegnata con CSS.
Widget
⤢button	Contrassegna un controllo cliccabile che attiva un'azione.	Pulsanti personalizzati, pulsanti icona, trigger di azione.
⤢link	Contrassegna un collegamento a un'altra risorsa o posizione.	Ancore personalizzate e collegamenti di rotta nell'app.
⤢checkbox	Contrassegna un interruttore per una singola opzione.	Checkbox personalizzate, interruttori di accettazione dei termini.
⤢radio	Contrassegna una scelta in un gruppo a esclusione reciproca.	Radio personalizzate dentro un radiogroup.
⤢switch	Contrassegna un interruttore binario on/off.	Interruttori di tema, muto e impostazioni.
⤢tablist	Raggruppa le etichette di un insieme di schede.	La striscia di schede di un pannello a schede.
⤢tab	Contrassegna una singola etichetta dentro una tablist.	Una singola scheda che mostra un pannello.
⤢tabpanel	Contrassegna il pannello dei contenuti di una scheda.	Il corpo mostrato quando la sua scheda è attiva.
⤢dialog	Contrassegna una finestra in overlay sopra la pagina.	Modali, drawer, popover che catturano il focus.
⤢alertdialog	Contrassegna una finestra di dialogo che richiede una risposta.	Conferme di eliminazione, avvisi di modifiche non salvate.
⤢combobox	Contrassegna un input con un popup di scelte.	Autocompletamento, ricerca-selezione, liste typeahead.
⤢slider	Contrassegna un controllo che imposta un valore in un intervallo.	Volume, prezzo, opacità, input di intervallo.
⤢menu	Contrassegna un elenco di scelte offerte all'utente.	Menu a discesa, menu contestuali, tavolozze di strumenti.
⤢menuitem	Contrassegna una singola opzione dentro un menu.	Una riga o una voce di un menu a discesa.
⤢textbox	Contrassegna un campo per input di testo libero.	Input personalizzati, campi di ricerca, caselle di commento.
⤢tree	Contrassegna un elenco gerarchico di elementi.	Esplora file, menu annidati, organigrammi.
⤢listbox	Contrassegna un elenco di opzioni selezionabili.	Selettori personalizzati per una o molte scelte.
⤢option	Contrassegna una singola scelta dentro una listbox.	Una voce selezionabile di una listbox personalizzata.
⤢radiogroup	Raggruppa un insieme di scelte a esclusione reciproca.	Set di radio personalizzati, selettori di piani, risposte a scala.
⤢grid	Contrassegna un widget di righe e colonne di celle.	Layout tipo foglio di calcolo, viste mensili del calendario.
⤢treegrid	Contrassegna una griglia le cui righe si espandono e comprimono.	Tabelle dati annidate, tabelle di thread di posta.
⤢treeitem	Contrassegna un'opzione espandibile dentro un albero.	Un nodo file o cartella in un esplora file.
⤢tooltip	Contrassegna un popup che suggerisce un controllo.	Suggerimenti al passaggio, consigli al focus per pulsanti icona.
⤢progressbar	Contrassegna un elemento che mostra l'avanzamento di un'attività.	Barre di caricamento e indicatori di caricamento.
⤢scrollbar	Contrassegna un controllo che scorre una vista di contenuto.	Maniglie di scorrimento personalizzate per pannelli e caroselli.
⤢spinbutton	Contrassegna un controllo che cambia un valore a passi.	Selettori di quantità, stepper numerici.
⤢searchbox	Contrassegna un campo di testo per inserire termini di ricerca.	Barre di ricerca personalizzate e campi di filtro.
⤢toolbar	Contrassegna un gruppo di controlli usati di frequente.	Barre di formattazione, righe di azione sopra gli editor.
⤢menubar	Contrassegna una riga di trigger di menu persistenti.	Strisce di menu File e Modifica in stile app.
⤢menuitemcheckbox	Contrassegna un'opzione di menu che si attiva e disattiva.	Interruttori di opzioni di vista dentro un menu a discesa.
⤢menuitemradio	Contrassegna una scelta esclusiva dentro un menu.	Scelte di ordinamento e tema in un menu.
⤢separator	Contrassegna un divisore tra gruppi di contenuto.	Divisori di menu, separatori di pannelli trascinabili.
Live region
⤢alert	Annuncia un messaggio importante e urgente.	Errori di modulo, avvisi urgenti che richiedono attenzione.
⤢status	Annuncia un aggiornamento informativo senza interrompere.	Conferma di salvataggio, avanzamento, risultati soft.
⤢log	Annuncia nuove voci in un flusso cronologico.	Trascrizioni di chat, log di eventi, feed di attività.
⤢marquee	Annuncia contenuto testuale scorrevole o in movimento.	Ticker, barre di notizie scorrevoli, banner rotanti.
⤢timer	Annuncia un timer o un conto alla rovescia in diretta.	Scadenze di sessione, conti alla rovescia, cronometri.