ARIA reference
ARIA (Accessible Rich Internet Applications) is a set of roles and attributes that make custom interfaces understandable to assistive technologies. Reach for it to express what native HTML can't — and only when a native element genuinely won't do.
ARIA attributes
States and properties you can apply to elements.
- aria-labelStringDefines a string label for an element when no visible text label is present.
- aria-labelledbyID reference listNames an element using the text of one or more other elements.
- aria-hiddenBooleanRemoves an element and its descendants from the accessibility tree.
- aria-expandedBooleanIndicates whether a collapsible element is currently expanded or collapsed.
- aria-currentTokenMarks the current item in a set — page, step, location, date, or time.
- aria-describedbyID reference listPoints to element(s) that provide a longer description of this element.
- aria-controlsID reference listIdentifies the element(s) whose content or presence this element controls.
- aria-selectedBooleanIndicates the selected state of an option, tab, or other selectable item.
- aria-checkedTristateIndicates the checked state of a checkbox, radio, switch, or menu item.
- aria-pressedTristateIndicates the pressed state of a toggle button.
- aria-liveTokenDefines how urgently assistive tech announces updates to a live region.
- aria-disabledBooleanIndicates the element is perceivable but disabled, so not editable or operable.
- aria-haspopupTokenIndicates the element triggers a popup such as a menu, listbox, or dialog.
- aria-requiredBooleanIndicates that user input is required on the element before a form is submitted.
- aria-invalidTokenIndicates the entered value does not conform to the expected format.
- aria-modalBooleanIndicates whether a dialog blocks interaction with the rest of the page.
- aria-activedescendantID referenceIdentifies the currently active descendant of a composite widget.
- aria-valuenowNumberCurrent value of a range widget such as a slider or progress bar.
- aria-valueminNumberMinimum allowed value of a range widget.
- aria-valuemaxNumberMaximum allowed value of a range widget.
- aria-valuetextStringReadable text alternative for aria-valuenow when the number alone isn't clear.
- aria-sortTokenIndicates whether a table or grid column is sorted, and in which direction.
- aria-atomicBooleanWhether assistive tech presents all, or only changed, parts of a live region.
- aria-busyBooleanIndicates an element is being updated and not yet ready to be presented.
- aria-relevantToken listWhich kinds of changes in a live region should be announced.
- aria-autocompleteTokenDescribes the kind of autocomplete suggestion an input provides.
- aria-orientationTokenIndicates whether a widget is oriented horizontally or vertically.
- aria-levelIntegerDefines the hierarchical level of an element within a structure.
- aria-posinsetIntegerThe position of an item within the current set of items.
- aria-setsizeIntegerThe number of items in the current set.
- aria-multiselectableBooleanIndicates that more than one item in a widget can be selected.
- aria-readonlyBooleanIndicates the element is not editable but is otherwise operable.
- aria-multilineBooleanIndicates whether a textbox accepts multiple lines of input.
- aria-placeholderStringA short hint shown before the user enters a value in a field.
- aria-roledescriptionStringA human-readable, author-defined description for an element's role.
- aria-keyshortcutsStringLists keyboard shortcuts that activate or move focus to the element.
- aria-ownsID reference listDefines a parent/child relationship the DOM hierarchy can't express.
- aria-flowtoID reference listDefines an alternate reading order to the next element(s).
- aria-detailsID referencePoints to an element providing extended, structured details.
- aria-errormessageID referencePoints to the element that describes a validation error for this element.
- aria-descriptionStringDefines a string that describes or annotates the current element.
- aria-colcountIntegerThe total number of columns in a table, grid, or treegrid.
- aria-colindexIntegerThe column index of an element relative to the total number of columns.
- aria-colspanIntegerThe number of columns spanned by a cell or gridcell.
- aria-rowcountIntegerThe total number of rows in a table, grid, or treegrid.
- aria-rowindexIntegerThe row index of an element relative to the total number of rows.
- aria-rowspanIntegerThe number of rows spanned by a cell or gridcell.
- aria-grabbedBooleanDeprecated. Indicated an element's grabbed state in a drag-and-drop operation.
- aria-dropeffectToken listDeprecated. Described what happens when a dragged item is dropped here.
ARIA roles
Types of elements you can create.
- 1
button
Widget role
- 2
dialog
Window role
- 3
navigation
Landmark role
- 1
tab
Widget role
- 1
tablist
Composite widget role
- 1
tabpanel
Widget role
- 2
alert
Live region role
- 1
alertdialog
Window role
- 1
menu
Composite widget role
- 1
menuitem
Widget role
- 2
listbox
Composite widget role
- 2
option
Widget role
- 2
combobox
Composite widget role
- 1
checkbox
Widget role
- 1
radio
Widget role
- 1
radiogroup
Composite widget role
- 1
switch
Widget role
- 1
slider
Widget role
- 1
tooltip
Widget role
- 1
grid
Composite widget role
- 1
gridcell
Widget role
- 2
row
Document structure role
- 2
columnheader
Document structure role
- 1
rowheader
Document structure role
- 1
status
Live region role
- 1
region
Landmark role
- 1
form
Landmark role
- 1
link
Widget role
- 1
heading
Document structure role
- 1
list
Document structure role
- 1
listitem
Document structure role
- 1
table
Document structure role
- 1
group
Document structure role
- 2
textbox
Widget role
main
Landmark role
banner
Landmark role
contentinfo
Landmark role
complementary
Landmark role
search
Landmark role
searchbox
Widget role
progressbar
Widget role
spinbutton
Widget role
menubar
Composite widget role
menuitemcheckbox
Widget role
menuitemradio
Widget role
toolbar
Document structure role
tree
Composite widget role
treeitem
Widget role
treegrid
Composite widget role
log
Live region role
marquee
Live region role
timer
Live region role
separator
Widget role
scrollbar
Widget role
article
Document structure role
note
Document structure role
figure
Document structure role
img
Document structure role
feed
Document structure role
document
Document structure role
application
Document structure role
cell
Document structure role
rowgroup
Document structure role
meter
Widget role
none
Document structure role
presentation
Document structure role
generic
Document structure role