This page lists reference pages covering all the WAI-ARIA roles discussed on MDN. For a full list of roles, see Using ARIA: Roles, States, and Properties
- ARIA: alert role
- The alert role can be used to tell the user an element has been dynamically updated. Screen readers will instantly start reading out the updated content when the role is added. If the user is expected to close the alert, then the alertdialog role should be used instead.
- ARIA: application role
applicationrole indicates to assistive technologies that an element and all of its children should be treated similar to a desktop application, and no traditional HTML interpretation techniques should be used. This role should only be used to define very dynamic and desktop-like web applications.
- ARIA: article role
articlerole indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. It is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped together on one page.
- ARIA: banner role
bannerrole represents general and informative content frequently placed at the beginning of the page. This usually includes a logo, company name, search icon, photo related to the page, or slogan.
- ARIA: button role
- The button role should be used for clickable elements that trigger a response when activated by the user. Adding
role="button"will make an element appear as a button control to a screen reader. This role can be used in combination with the
aria-pressedattribute to create toggle buttons.
- ARIA: cell role
cellvalue of the ARIA role attribute identifies an element as being a cell in a tabular container that does not contain column or row header information. To be supported, the cell must be nested in an element with the role of
- ARIA: checkbox role
- The checkbox role is used for checkable interactive controls. Elements containing
role="checkbox"must also include the
aria-checkedattribute to expose the checkbox's state to assistive technology.
- ARIA: Complementary role
complementarylandmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated. These sections are frequently presented as sidebars or call-out boxes. If possible, use the HTML <aside> element instead.
- ARIA: contentinfo role
contentinfolandmark role is used to identify information repeated at the end of every page of a website, including copyright information, navigation links, and privacy statements. This section is commonly called a footer.
- ARIA: dialog role
dialogrole is used to mark up an HTML based application dialog or window that separates content or UI from the rest of the web application or page. Dialogs are generally placed on top of the rest of the page content using an overlay. Dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with).
- ARIA: document role
- Generally used in complex composite widgets or applications, the
documentrole can inform assistive technologies to switch context to a reading mode: The
documentrole tells assistive technologies with reading or browse modes to use the document mode to read the content contained within this element.
- ARIA: feed role
feedis a dynamic scrollable
articlesin which articles are added to or removed from either end of the list as the user scrolls. A
feedenables screen readers to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads.
- ARIA: figure role
- The ARIA
figurerole can be used to identify a figure inside page content where appropriate semantics do not already exist. A figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.
- ARIA: form role
formlandmark role can be used to identify a group of elements on a page that provide equivalent functionality to an HTML form.
- ARIA: grid role
- The grid role is for a widget that contains one or more rows of cells. The position of each cell is significant and can be focused using keyboard input.
- ARIA: gridcell role
- The gridcell role is used to make a cell in a grid or treegrid. It is intended to mimic the functionality of the HTML
tdelement for table-style grouping of information.
- ARIA: heading role
- The heading role defines this element as a heading to a page or section. To give the page more structure, a level should also be provided to indicate relationships between sections.
- ARIA: img role
- The ARIA
imgrole can be used to identify multiple elements inside page content that should be considered as a single image. These elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.
- ARIA: List role
- The ARIA
listrole can be used to identify a list of items. It is normally used in conjunction with the
listitemrole, which is used to identify a list item contained inside the list.
- ARIA: listbox role
listboxrole is used for lists from which a user may select one or more items which are static and, unlike HTML <select> elements, may contain images.
- ARIA: Listitem role
- The ARIA
listitemrole can be used to identify an item inside a list of items. It is normally used in conjunction with the
listrole, which is used to identify a list container.
- ARIA: Main role
mainlandmark role is used to indicate the primary content of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
- ARIA: Navigation Role
navigationlandmark role is used to identify major groups of links used for navigating through a website or page content.
- ARIA: Region role
regionlandmark role is used to identify an area in the document that the author has identified as significant. It is used to provide a generic landmark for people to be able to navigate to easily when none of the other landmark roles are appropriate.
- ARIA: row role
- An element with
role="row"is a row of cells within a tabular structure. A row contains one or more cells, grid cells or column headers, and possibly a row header, within a
treegrid, and optionally within a
- ARIA: rowgroup role
- An element with
role="rowgroup"is a group of rows within a tabular structure. A
rowgroupcontains one or more rows of cells, grid cells, column headers, or row headers within a
- ARIA: search role
searchlandmark role is used to identify a section of the page used to search the page, site, or collection of sites.
- ARIA: switch role
- The ARIA
switchrole is functionally identical to the role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, the
switchrole represents the states "on" and "off."
- ARIA: tab role
- The ARIA
tabrole indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel.
- ARIA: table role
- The table value of the ARIA role attribute identifies the element containing the role as having a non-interactive table structure containing data arranged in rows and columns, similar to the native
- ARIA: tabpanel role
- The ARIA tabpanel role indicates
- ARIA: textbox role
textboxrole is used to identify an element that allows the input of free-form text.
- ARIA: timer role
- The timer role indicates to assistive technologies that an element is a numerical counter the amount of elapsed time from a starting point or the remaining time until an end point.
Please claim the role you want to work on by adding your name after the role's name: (old pages are linked from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques). Ones for which the first draft is completed have been removed from the below list.
- Columnheader (Estelle)
- Gridcell (Eric E)
- Link - old page
- Log - old page
- Progressbar - old page
- Radio - old page
- Slider - old page
- Status - old page
- tablist (Michiel)
- Tabpanel (Michiel)