Skip to content

ARIA Roles Explained

Cheatsheet of ARIA role values: landmark, document, widget, and live-region roles with purpose and use cases.

ARIA roles declare what an element does. Landmark roles map page regions. Document roles structure content. Widget roles mark interactive controls. Live region roles announce dynamic updates.

Reference table · 77 entries
77 of 77 rows
Landmark
Identifies the site header at the top of the page.Brand logo, primary tagline, top-of-page masthead.
Groups a collection of navigational links.Primary menus, breadcrumbs, in-page nav.
Marks the dominant content of the document.The unique main body of the page.
Marks supporting content separate from main.Sidebars, related links, callouts.
Groups footer metadata about the parent document.Copyright lines, privacy links, legal footer.
Marks a region that contains a search form.Site search, filter forms, find boxes.
Marks a named, perceivable section of the page.Custom sections with an accessible name.
Marks a region that contains a set of form fields.Named search forms, filter panels, survey sections.
Marks a region that behaves as a software application.Full-page editors, maps, game surfaces.
Document
Marks a self-contained composition.Blog posts, news items, product cards.
Marks a heading for a section of content.Section titles when native h1-h6 do not apply.
Groups a list of related items.Custom bullet or numbered lists.
Marks a single item inside a list.One row of a custom list.
Groups a set of related form controls.Form fieldsets, radio groups, related inputs.
Marks graphical content paired with a caption.Images, diagrams, charts with a label.
Marks data arranged in rows and columns.Tabular data built from custom elements.
Marks a visible label for a table, grid, or figure.Titles above data tables, figure labels.
Groups a set of related rows in a table.Header, body, and footer bands of a table.
Marks one line of cells in a table or grid.A single record line of a custom table.
Marks a header cell for a table column.Top labels of a data table.
Marks a header cell for a table row.The leading label of each table row.
Marks one data cell inside a row.Individual values of a custom table row.
Marks a word or phrase that is being defined.Dictionary keys, definition-list terms.
Marks the meaning of the preceding term.The description under a defined term.
Marks a remark that sits beside the main content.Tips, asides, footnote-style remarks.
Marks a list of references to group members.Tables of contents and link indexes (deprecated in ARIA 1.2).
Marks a scrollable list of article sections.Infinite-scroll streams that load more content.
Marks content written in a math notation.Formulas rendered from LaTeX or MathML.
Marks a scalar value within a known range.Disk-usage bars, scores, strength gauges.
Marks a specific moment or a duration.Timestamps, event dates, elapsed times.
Marks a block of prose text.Text blocks not written as native p elements.
Marks a quotation taken from another source.Pull quotes and cited excerpts.
Marks a fragment of computer code.Inline snippets and command names in prose.
Marks text that carries stress emphasis.Stressed words inside a sentence.
Marks text with strong importance.Warnings, key phrases, must-read labels.
Marks text rendered below the baseline.Chemical formulas such as H2O.
Marks text rendered above the baseline.Footnote markers and exponents.
Marks a plain container with no special meaning.Layout wrappers and styling hooks.
Strips the semantics from an element.Decorative images, layout tables, divider elements.
Marks an element as a single image.Icon sprites, SVG groups, CSS-drawn graphics.
Widget
Marks a clickable control that triggers an action.Custom buttons, icon buttons, action triggers.
Marks a link to another resource or location.Custom anchors and in-app route links.
Marks a toggle for a single option.Custom checkboxes, accept-terms toggles.
Marks one choice in a mutually exclusive group.Custom radios inside a radiogroup.
Marks a binary on/off toggle.Theme, mute, and settings toggles.
Groups the labels for a set of tabs.The tab strip of a tabbed panel.
Marks one label inside a tablist.A single tab that shows one panel.
Marks the content panel for one tab.The body shown when its tab is active.
Marks an overlay window on top of the page.Modals, drawers, popovers that grab focus.
Marks a dialog that requires a user response.Confirm-delete, unsaved-changes prompts.
Marks an input with a popup of choices.Autocomplete, search-select, typeahead lists.
Marks a control that sets a value in a range.Volume, price, opacity, range inputs.
Marks a list of choices offered to the user.Dropdown menus, context menus, tool palettes.
Marks a single option inside a menu.One row or item of a dropdown menu.
Marks a field for free-form text input.Custom inputs, search fields, comment boxes.
Marks a hierarchical list of items.File explorers, nested menus, org charts.
Marks a list of selectable options.Custom pickers for one or many choices.
Marks a single choice inside a listbox.One selectable entry of a custom listbox.
Groups a set of mutually exclusive choices.Custom radio sets, plan pickers, scale answers.
Marks a widget of rows and columns of cells.Spreadsheet layouts, calendar month views.
Marks a grid whose rows expand and collapse.Nested data tables, mail-thread tables.
Marks one expandable option inside a tree.A file or folder node in a file explorer.
Marks a popup that hints at a control.Hover hints, focus tips for icon buttons.
Marks an element that shows task progress.Upload bars and loading indicators.
Marks a control that scrolls a view of content.Custom scroll handles for panes and carousels.
Marks a control that changes a value in steps.Quantity pickers, number steppers.
Marks a text field for entering search terms.Custom search bars and filter fields.
Marks a group of frequently used controls.Formatting bars, action rows above editors.
Marks a row of persistent menu triggers.App-style File and Edit menu strips.
Marks a menu option that toggles on or off.View-option toggles inside a dropdown menu.
Marks one exclusive choice inside a menu.Sort-order and theme picks in a menu.
Marks a divider between groups of content.Menu dividers, draggable pane splitters.
Live region
Announces a time-sensitive, important message.Form errors, urgent notices that need attention.
Announces an advisory update without interrupting.Saved confirmation, progress, soft results.
Announces new entries in a chronological stream.Chat transcripts, event logs, activity feeds.
Announces scrolling or moving text content.Tickers, scrolling news bars, rotating banners.
Announces a live timer or countdown.Session timeouts, countdowns, stopwatches.