Loading Developer Playground

Loading ...

Skip to main content
WAI-ARIA Complete Reference

ARIA Reference
Guide

Complete reference for ARIA roles and attributes. Build accessible web applications with confidence

Browse Reference
69
ARIA Roles
44
Attributes

WCAG Compliant

Follow accessibility standards

Comprehensive

All roles and attributes covered

Easy Search

Find what you need quickly

Widget Roles20

Composite Roles9

Document Structure Roles25

applicationrole

A structure containing one or more focusable elements requiring user input

articlerole

A section of a page that consists of a composition that forms an independent part of a document

cellrole

A cell in a tabular container

columnheaderrole

A cell containing header information for a column

definitionrole

A definition of a term or concept

directoryrole

A list of references to members of a group

documentrole

An element containing content that assistive technology users may want to browse in a reading mode

feedrole

A scrollable list of articles where scrolling may cause articles to be added or removed from either end of the list

figurerole

A perceivable section of content that typically contains a graphical document, images, code snippets, or example text

grouprole

A set of user interface objects which are not intended to be included in a page summary or table of contents

headingrole

A heading for a section of the page

imgrole

A container for a collection of elements that form an image

listrole

A section containing listitem elements

listitemrole

A single item in a list or directory

mathrole

Content that represents a mathematical expression

nonerole

An element whose implicit native role semantics will not be mapped to the accessibility API

noterole

A section whose content is parenthetic or ancillary to the main content of the resource

presentationrole

An element whose implicit native role semantics will not be mapped to the accessibility API

rowrole

A row of cells in a tabular container

rowgrouprole

A group containing one or more row elements in a grid, table, or treegrid

rowheaderrole

A cell containing header information for a row in a grid, table, or treegrid

tablerole

A section containing data arranged in rows and columns

termrole

A word or phrase with a corresponding definition

toolbarrole

A collection of commonly used function buttons or controls represented in compact visual form

tooltiprole

A contextual popup that displays a description for an element

Landmark Roles8

Live Region Roles5

Window Roles2

Widget Attributes25

aria-autocompleteattribute

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value

aria-checkedattribute

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets

aria-currentattribute

Indicates the element that represents the current item within a container or set of related elements

aria-disabledattribute

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable

aria-errormessageattribute

Identifies the element that provides an error message for an object

aria-expandedattribute

Indicates whether a grouping element owned or controlled by this element is expanded or collapsed

aria-haspopupattribute

Indicates the availability and type of interactive popup element

aria-hiddenattribute

Indicates whether the element is exposed to an accessibility API

aria-invalidattribute

Indicates the entered value does not conform to the format expected by the application

aria-labelattribute

Defines a string value that labels the current element

aria-levelattribute

Defines the hierarchical level of an element within a structure

aria-modalattribute

Indicates whether an element is modal when displayed

aria-multilineattribute

Indicates whether a text box accepts multiple lines of input or only a single line

aria-multiselectableattribute

Indicates that the user may select more than one item from the current selectable descendants

aria-orientationattribute

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous

aria-placeholderattribute

Defines a short hint intended to aid the user with data entry when the control has no value

aria-pressedattribute

Indicates the current "pressed" state of toggle buttons

aria-readonlyattribute

Indicates that the element is not editable, but is otherwise operable

aria-requiredattribute

Indicates that user input is required on the element before a form may be submitted

aria-selectedattribute

Indicates the current "selected" state of various widgets

aria-sortattribute

Indicates if items in a table or grid are sorted in ascending or descending order

aria-valuemaxattribute

Defines the maximum allowed value for a range widget

aria-valueminattribute

Defines the minimum allowed value for a range widget

aria-valuenowattribute

Defines the current value for a range widget

aria-valuetextattribute

Defines the human readable text alternative of aria-valuenow for a range widget

Live Region Attributes4

Relationship Attributes15

aria-activedescendantattribute

Identifies the currently active element when focus is on a composite widget, combobox, textbox, group, or application

aria-colcountattribute

Defines the total number of columns in a table, grid, or treegrid

aria-colindexattribute

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid

aria-colspanattribute

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid

aria-controlsattribute

Identifies the element (or elements) whose contents or presence are controlled by the current element

aria-describedbyattribute

Identifies the element (or elements) that describes the object

aria-detailsattribute

Identifies the element that provides a detailed, extended description for the object

aria-flowtoattribute

Identifies the next element (or elements) in an alternate reading order of content

aria-labelledbyattribute

Identifies the element (or elements) that labels the current element

aria-ownsattribute

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship

aria-posinsetattribute

Defines an element's number or position in the current set of listitems or treeitems

aria-rowcountattribute

Defines the total number of rows in a table, grid, or treegrid

aria-rowindexattribute

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid

aria-rowspanattribute

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid

aria-setsizeattribute

Defines the number of items in the current set of listitems or treeitems