The ARIA Role Matrices

Banner is a region that contains mostly site-oriented content, rather than page-specific content.

Complementary is a supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.

Contentinfo is a large perceivable region that contains information about the parent document.

Form is a landmark region that contains a collection of items and objects that, as a whole, combine to create a form.

Main is the main content of a document.

Navigation is a collection of navigational elements for navigating the document or related documents.

Region is a perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily.

An element that includes role="region" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time, however one or the other is required)

Search is a landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility.

Article is a section of a page that consists of a composition that forms an independent part of a document, page, or site.

Definition is a definition of a term or concept.

The role="definition" element must include an aria-labelledby attribute that references the ID of the term or concept being defined.

The term element that is referenced by aria-labelledby must not be an active element, and must include role="term".

Directory is a list of references to members of a group, such as a static table of contents.

The Directory role is related to the List role, and must include child elements with role="listitem".

Directory is a structural equivalent to an HTML ul element.

Listitem is a single item in a Directory.

Listitem elements are required as children of role="directory".

Each Listitem is a structural equivalent to the li element in an HTML ul element.

Document is a region containing related information that is declared as document content, as opposed to a web Application.

The Feed role is a scrollable list of articles where scrolling may cause articles to be added to or removed from either end of the list, and must include child elements with role="article".

The first level children of role="feed" (those with an implicit or explicit role) must be role="article".

When dynamic Article containers are added to a Feed, they must be either prepended or appended to the beginning or end of the Feed container element.

The container with role="feed" should not be focusable.

To ensure accessibility on touch screen devices, a button should be placed at the end of the Feed so that new Articles can be dynamically added when activated, after which focus should be set on the newly added Article in the Feed.

Article is a single dynamic article in a Feed.

Article elements are required as first level children (those with an implicit or explicit role) of role="feed".

All elements with role="article" should be focusable, and optionally navigable using the arrow keys.

Figure is a container for graphical representations such as charts, maps, diagrams, collections of images, code snippets, or example text.

Heading is a heading for a section of the page.

The aria-level attribute must be set on the role="heading" element to preserve an orderly document structure.

If omitted, the implicit value of aria-level will be set to 2 upon Heading within the accessibility tree.

Img is a container for a collection of elements that form an image.

Important: This role must not include any embedded active elements.

An element that includes role="img" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

List is a group of non-interactive list items.

The List role must include child elements with role="listitem".

List is a structural equivalent to an HTML ul element.

Listitem is a single item in a List.

Listitem elements are required as children of role="list".

Each Listitem is a structural equivalent to the li element in an HTML ul element.

Math is content that represents a mathematical expression.

Important: This role must not include any embedded active elements.

An element that includes role="math" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

Note is a section whose content is parenthetic or ancillary to the main content of the resource (a comment or explanation of something).

Separator is a divider that separates and distinguishes sections of content.

Important: This role must not include any embedded active elements.

If not set to "vertical", elements with the role Separator have an implicit aria-orientation value of "horizontal".

Table is a section containing data arranged in rows and columns in the same manner as an HTML table element.

The Table role is intended for tabular containers which are not interactive.

The Table role must include child elements with role="rowgroup" or role="row".

In cases where the nesting structure of Table and its child roles may be convoluted, or when a Table may include nested Tables or additional markup structures, aria-owns must be used on the role="table" element to reference all of the IDs of the first child role; which would be role="rowgroup" if present, or role="row" otherwise.

The Rowgroup role establishes a relationship between owned Row elements.

The Rowgroup role must include child elements with role="row".

Rowgroup is a structural equivalent to the thead, tfoot, and tbody elements in an HTML table element.

In cases where the nesting structure of Rowgroup and its child roles may be convoluted, or when a Rowgroup may include nested Tables or structural elements, aria-owns must be used on the role="rowgroup" element to reference all of the IDs of the first child role; which would be role="row".

As with thead, tfoot, and tbody within an HTML table element, Rowgroup is an optional role within Table.

The Row role establishes a relationship between owned Columnheader, Rowheader, and cell elements. It must include child elements with role="columnheader", role="rowheader", or role="cell".

Row is a structural equivalent to the tr element in an HTML table element.

In cases where the nesting structure of Row and its child roles may be convoluted, or when a Row may include nested Tables or structural elements, aria-owns must be used on the role="row" element to reference all of the IDs of the first child roles; which would be role="columnheader", role="rowheader", and role="cell".

Columnheader is a cell containing header information for a column. It is a structural equivalent to the th element in an HTML table element.

If a Columnheader is sortable, the aria-sort attribute must be set appropriately on the role="columnheader" element.

Rowheader is a cell containing header information for a Row. It is a structural equivalent to the th element in an HTML table element.

If a Rowheader is sortable, the aria-sort attribute must be set appropriately on the role="rowheader" element.

Cell is a cell containing data within a Row. It is a structural equivalent to the td element in an HTML table element.

If a Cell includes associated Columnheader or Rowheader elements within the Table, then aria-describedby must be set on the role="cell" element in order to explicitly reference the IDs of one or both role="columnheader" and role="rowheader" elements if present.

Term is a keyword or phrase that is referenced by a Definition.

The role="term" element must not be a focusable active element, though it may contain a focusable active element.

Toolbar is a collection of commonly used function buttons or controls represented in compact visual form.

If not set to "vertical", elements with the role Toolbar have an implicit aria-orientation value of "horizontal".

Typically no scripting is needed for the Toolbar role, since focus will follow the native tab order of the active elements contained within the Toolbar container.

However, if the Toolbar container receives focus, the focusable element must be the same that includes the role="toolbar" attribute, and aria-activedescendant managed focus must be used to reference the ID of the selected active element roles without moving focus.

Application is a region declared as a web application, as opposed to a web Document.

As of ARIA 1.1, the Application role is no longer mapped as a landmark.

Use of the Application role informs assistive technologies that keystrokes should be passed through to the control that currently has focus.

It's important to note that use of the Application role will forcibly change the browse modality for screen readers such as JAWS and NVDA, so that static text that is not explicitly associated with an active element in the tab order will not generally be perceivable by the non-sighted screen reader user. (Only focusable active elements are perceivable.) Moreover, NVDA will remove an Application region from the standard Virtual Buffer when navigating in Browse Mode, so that its content can only be detected and navigable after focus moves into that region. (All of these behaviors are interpretations of the ARIA spec by these AT venders, and are not specifically documented within the ARIA spec.)

The Application role is valuable when building composite widgets that have no specific role mapping, where focus must be managed by the widget and not the assistive technology in order to ensure accessibility.

Caution should always be used when implementing the Application role.

Test: Basic compound date picker component

None is an element whose implicit native role semantics will not be mapped to the accessibility API. It was introduced in ARIA 1.1, and is a synonym of the Presentation role; both literally do the same thing.

The None role causes a given element to be treated as having no role or to be removed from the accessibility tree, but does not cause the content contained within the element to be removed from the accessibility tree, nor does it change or remove the accessibility tree information for embedded markup structures.

Important, when role="none" is applied to the parent container of a structured element collection, such as an HTML table element, all of its structural child roles will be removed, including its tr, th, and td elements. However, if the HTML td element includes another HTML table element, the embedded table structure will not be removed.

Since the None role significantly changes the structure of the accessibility tree, role="none" should always be used with caution.

The None role is not valid on focusable active elements.

Presentation is an element whose implicit native role semantics will not be mapped to the accessibility API.

The Presentation role was introduced in ARIA 1.0, and is a synonym of the None role; both literally do the same thing.

The Presentation role causes a given element to be treated as having no role or to be removed from the accessibility tree, but does not cause the content contained within the element to be removed from the accessibility tree, nor does it change or remove the accessibility tree information for embedded markup structures.

Important, when role="presentation" is applied to the parent container of a structured element collection, such as an HTML table element, all of its structural child roles will be removed, including its tr, th, and td elements. However, if the HTML td element includes another HTML table element, the embedded table structure will not be removed.

Since the Presentation role significantly changes the structure of the accessibility tree, role="presentation" should always be used with caution.

The Presentation role is not valid on focusable active elements.

Alertdialog is a type of dialog that contains an alert message, where initial focus goes to an element within the dialog.

The container that includes role="alertdialog" must also include a valid label via aria-label or aria-labelledby, as well as aria-describedby to point to the message body for the Alertdialog text if you don't want the entire dialog content to be announced.

When rendered, programmatic focus should then be set to an appropriate element within the Alertdialog, and scripting should be used to confine the forward and reverse tab order within the Alertdialog container if modal.

If the Alertdialog is meant to be modal, aria-modal="true" must be set on the container that contains role="alertdialog".

An Alertdialog must include a keyboard accessible active element for closing it, which must also include an accessible label for non-sighted users.

Dialog is a descendant window of the primary window, where initial focus goes to an element within the dialog.

The container that includes role="dialog" must also include a valid label via aria-label or aria-labelledby, as well as aria-describedby to point to the message body for the Dialog text if you don't want the entire dialog content to be announced.

When rendered, programmatic focus should then be set to an appropriate element within the Dialog, and scripting should be used to confine the forward and reverse tab order within the Dialog container if modal.

If the Dialog is meant to be modal, aria-modal="true" must be set on the container that contains role="dialog".

A Dialog must include a keyboard accessible active element for closing it, which must also include an accessible label for non-sighted users.

If the Dialog is opened using a triggering element, programmatic focus should be set back to the triggering element after the Dialog is closed.

Test:

• Modal Dialog with role="dialog" and aria-modal="true" plus aria-hidden to hide background content

Alert is a type of live region with important, and usually time-sensitive, information.

Implicit live region property values: aria-live="assertive" aria-atomic="true" aria-relevant="additions text".

The Alert role is the most aggressive form of live region, and typically fires a system alert event within the platform Accessibility API so that the message will be conveyed to the user no matter which application has focus (this will typically interrupt speech output for screen reader users).

Any text or DOM nodes programmatically added to a role="alert" container element will cause the OS alert event to fire.

If a role="alert" container element is hidden via CSS using display:none, toggling display to "block" or "inline" will cause the OS alert event to fire.

If a role="alert" container element is programmatically added to the DOM using element.innerHTML or element.appendChild(), the OS alert event will also fire.

Important, if the role="alert" attribute is removed and the implicit aria-live, aria-atomic, and aria-relevant property values are used instead, an OS alert event will not fire.

A container element that includes role="alert" should not be focusable, nor treated as an interactive widget.

Log is a type of live region where new information is added in meaningful order and old information may disappear.

Implicit live region property values: aria-live="polite" aria-atomic="false" aria-relevant="additions text".

Marquee is a type of live region where non-essential information changes frequently.

Implicit live region property values: aria-live="off" aria-atomic="false" aria-relevant="additions text".

A container element that includes role="marquee" should not be focusable, nor treated as an interactive widget.

Status is a type of live region whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar.

Implicit live region property values: aria-live="polite" aria-atomic="false" aria-relevant="additions text".

A container element that includes role="status" should not be focusable, nor treated as an interactive widget.

Timer is a type of live region containing a numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point.

Implicit live region property values: aria-live="off" aria-atomic="false" aria-relevant="additions text".

A container element that includes role="timer" should not be focusable, nor treated as an interactive widget.

Button is an input that allows for user-triggered actions when clicked or pressed.

Important: This role must not include any embedded active elements.

An element that includes role="button" must have an explicit label in accordance with the Text Alternative Computation (both aria-labelledby and aria-label should not be used at the same time).

If the element that includes role="button" does not consist of a native active element, it must be made keyboard accessible.

The focusable element must be the same that includes the role="button" attribute.

If the Button is meant to be a toggle, the aria-pressed attribute can be used to reflect the correct state, which must be programmatically toggled between "true", "false", or "mixed".

If the Button is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="button".

If the Button opens an attached Menu, aria-haspopup="true" must be set on the role="button" element.

If the Button opens a Menu when Left clicked, the Enter, Space, and Downarrow keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well.

However, if the Button performs one action when Left clicked, but opens a Menu when Right clicked, the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well (the aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip).

Test:

• Simulated Button controls with role="button"
• Simulated Toggle Button controls with role="button" and aria-pressed

Checkbox is a checkable input that has three possible values: "true", "false", or "mixed".

Important: This role must not include any embedded active elements.

An element that includes role="checkbox" must have an explicit label in accordance with the Text Alternative Computation (Both aria-labelledby and aria-label should not be used at the same time).

If the element that includes role="checkbox" does not consist of a native active element, it must be made keyboard accessible.

The focusable element must be the same that includes the role="checkbox" attribute.

The aria-checked attribute must be included on the same element that includes role="checkbox" to reflect the checked state of the Checkbox, and must be programmatically updated appropriately between "true", "false", or "mixed".

Since an HTML input+type="checkbox" element does not support checked="mixed", the ARIA attributes role="checkbox" and aria-checked="mixed" cannot be used on an HTML input element.

If the Checkbox is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="checkbox".

If the Checkbox has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="checkbox" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip).

Test: Simulated Checkbox with role="checkbox" and aria-checked

Link is an interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource.

An element that includes role="link" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the element that includes role="link" does not consist of a native active element, it must be made keyboard accessible.

The focusable element must be the same that includes the role="link" attribute.

If the Link is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="link".

If the Link opens an attached Menu, aria-haspopup="true" must be set on the role="link" element.

If the Link opens a Menu when Left clicked, role="link" should be changed to role="button", the Enter, Space, and Downarrow keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well.

However, if the Link performs one action when Left clicked, but opens a Menu when Right clicked, the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Progressbar is an element that displays the progress status for tasks that take a long time.

Important: This role must not include any embedded active elements.

Elements with the role Progressbar have an implicit aria-readonly value of "true".

An element that includes role="progressbar" should also include the aria-valuemin, aria-valuemax, and aria-valuenow attributes when these values are known as part of the animation process.

The aria-valuenow attribute must be programmatically updated with a numerical value equal to or between the values of aria-valuemin and aria-valuemax.

The aria-valuetext attribute can be used to convey a custom textual string to assistive technologies instead of a numerical value as represented by aria-valuenow, the text of which should be programmatically updated every time the Progressbar changes.

A container element that includes role="progressbar" does not need to be focusable, nor treated as an interactive widget.

Searchbox is a type of textbox intended for specifying search criteria.

An element that includes role="searchbox" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the element that includes role="searchbox" does not consist of a native active element such as an Input+type="text", it must be made keyboard accessible.

The focusable element must be the same that includes the role="searchbox" attribute.

If the Searchbox is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="searchbox".

If the Searchbox has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="searchbox" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Scrollbar is a graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area.

Important: This role must not include any embedded active elements.

Elements with the role Scrollbar have an implicit aria-orientation value of "vertical".

An element that includes role="scrollbar" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the element that includes role="scrollbar" does not consist of a native active element, it must be made keyboard accessible.

The focusable element must be the same that includes the role="scrollbar" attribute.

An element that includes role="scrollbar" must also include the aria-valuemin, aria-valuemax, and aria-valuenow attributes.

The aria-valuenow attribute must be programmatically updated with a numerical value equal to or between the values of aria-valuemin and aria-valuemax.

The aria-valuetext attribute can be used to convey a custom textual string to assistive technologies instead of a numerical value as represented by aria-valuenow, the text of which should be programmatically updated every time the Scrollbar changes.

The aria-controls attribute must be set on the element that includes role="scrollbar", so that it references the ID of the scrollable container controlled by the Scrollbar.

If the Scrollbar is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="scrollbar".

If the Scrollbar has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="scrollbar" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Slider is a user input where the user selects a value from within a given range.

Important: This role must not include any embedded active elements.

Elements with the role Slider have an implicit aria-orientation value of "horizontal".

An element that includes role="slider" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the element that includes role="slider" does not consist of a native active element, it must be made keyboard accessible.

The focusable element must be the same that includes the role="slider" attribute.

An element that includes role="slider" must also include the aria-valuemin, aria-valuemax, and aria-valuenow attributes.

The aria-valuenow attribute must be programmatically updated with a numerical value equal to or between the values of aria-valuemin and aria-valuemax.

The aria-valuetext attribute can be used to convey a custom textual string to assistive technologies instead of a numerical value as represented by aria-valuenow, the text of which should be programmatically updated every time the Slider changes.

If the Slider is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="slider".

If the Slider has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="slider" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Test:

• Horizontal ARIA Slider
• Vertical ARIA Slider

Spinbutton is a form of range that expects the user to select from among discrete choices.

An element that includes role="spinbutton" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the element that includes role="spinbutton" does not consist of a native active element, it must be made keyboard accessible.

The focusable element must be the same that includes the role="spinbutton" attribute.

An element that includes role="spinbutton" must also include the aria-valuemin, aria-valuemax, and aria-valuenow attributes.

The aria-valuenow attribute must be programmatically updated with a numerical value equal to or between the values of aria-valuemin and aria-valuemax.

The aria-valuetext attribute can be used to convey a custom textual string to assistive technologies instead of a numerical value as represented by aria-valuenow, the text of which should be programmatically updated every time the Spinbutton changes.

If the Spinbutton is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="spinbutton".

If the Spinbutton has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="spinbutton" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Progressive enhancement and responsive design considerations:

In order to ensure accessibility on touch screen devices, an associated plus (+) and minus (-) Button should be implemented using onClick() to increment and decrement the Spinbutton accordingly, which must be perceivable by assistive technologies.

Switch is a type of Checkbox that represents on/off values, as opposed to checked/unchecked values.

Important: This role must not include any embedded active elements.

An element that includes role="switch" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the element that includes role="switch" does not consist of a native active element, it must be made keyboard accessible.

The focusable element must be the same that includes the role="switch" attribute.

The aria-checked attribute must be included on the same element that includes role="switch" to reflect the boolean state of the Switch, and must be programmatically toggled between "true" or "false". (aria-checked="mixed" is not supported on a Switch)

If the Switch is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="switch".

If the Switch has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="switch" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Test: Simulated ARIA Switches

Textbox is a type of input that allows free-form text as its value.

An element that includes role="textbox" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the element that includes role="textbox" does not consist of a native active element, it must be made keyboard accessible.

The focusable element must be the same that includes the role="textbox" attribute.

If the Textbox is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="textbox".

If the Textbox has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="textbox" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Test: Simulated ARIA Textbox

Tooltip is a contextual popup that displays a description for an element.

An element that includes role="tooltip" should not be focusable.

Instead, aria-describedby must be set on the triggering element so that it references the ID of the container element that includes role="tooltip".

The triggering element may consist of any active element or interactive widget type that is focusable and includes a valid role.

If the triggering element does not consist of a native active element, it must be made keyboard accessible.

When the mouse moves over the triggering element, or when the triggering element receives focus, the Tooltip should be rendered.

When the mouse moves away from the triggering element, or when the triggering element loses focus, the Tooltip should be removed or hidden.

If the aria-describedby attribute is programmatically changed on the triggering element while it still has focus, a description_changed event will fire so that assistive technologies can convey the new Tooltip information appropriately.

Test: Simple Tooltip

Combobox is a presentation of a select; usually similar to a Textbox where users can type ahead to select an option, or type to enter arbitrary text as a new item in the list.

Important: In ARIA 1.2, a new design pattern is being added for Combobox, meant to replace the 1.0 and 1.1 design pattern that has caused many accessibility issues across the web due to support discrepancies. This 1.2 combobox design pattern is already accessible, and is the same design pattern as the ARIA 1.0 combobox design pattern with 1 exception, aria-controls must be used instead of aria-owns. It is critically important that aria-owns must not be used on role=combobox to ensure accessibility in the future.

An element that includes role="combobox" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the element that includes role="combobox" does not consist of a native active element, it must be made keyboard accessible.

The focusable element must be the same that includes the role="combobox" attribute.

If the Combobox is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="combobox".

When a Combobox is expanded, aria-expanded must be set to "true" on the element that includes role="combobox", or set to "false" when collapsed.

The aria-controls attribute must be set on the element that includes role="combobox", and should reference the ID of the container element that includes role="listbox". This is a change from ARIA 1.0 where aria-owns was referenced instead, yet this caused accessibility issues resulting from the reordering of the accessibility tree when used in practice. The use of aria-controls solves this issue however.

If aria-autocomplete is set to "list" on the element that includes role="combobox", and the Combobox element retains focus, the focusable element must be the same that includes the role="combobox" attribute, and aria-activedescendant managed focus must be used to reference the ID of the selected role="option" elements without moving focus.

Note: In ARIA 1.1, support was added so that when aria-activedescendant is used to manage accessible focus from the input field, it may also reference the IDs of elements with the role="gridcell", role="treeitem", as well as role="option" when programmatically controlling widgets such as a Grid or Tree as well as a Listbox. Three token values for aria-haspopup are now available for this purpose in ARIA 1.1, aria-haspopup="grid", aria-haspopup="tree", and aria-haspopup="listbox", which should be set on the same element that includes aria-activedescendant to convey the type of widget that is being controlled.

If aria-autocomplete is set to "inline" or "both" on the element that includes role="combobox", and the value of the Combobox field is updated when the Up/Down arrow keys are pressed, the aria-activedescendant attribute should not be included.

Progressive enhancement and responsive design considerations:

• If rendered on a desktop with standard keyboard access, the Listbox should automatically close using onBlur().
• If rendered on a touch device however, a Close button should be used instead, since onBlur will make it impossible to read the available options using a screen reader without accidentally closing the Listbox.
• If the role="combobox" field is editable, and it includes the use of aria-activedescendant, the aria-activedescendant attribute should be cleared or removed whenever the Left, Right, Backspace, Delete, Space, or alphanumeric keys are pressed. Otherwise non-sighted screen reader users will not be able to interact with the text being edited.

Test:

• Substring Editable Combobox with aria-activedescendant
• Substring Multiselect Editable Combobox with aria-activedescendant
• Startstring Readonly Combobox with aria-activedescendant
• Startstring Multiselect Readonly Combobox with aria-activedescendant

Listbox is a widget that allows the user to select one or more items from a list of Options.

The Listbox role must include child elements with role="option".

In cases where the nesting structure of Listbox and its child roles may be convoluted, aria-owns must be used on the role="listbox" element to reference all of the IDs of the first child role; which would be role="option".

Listbox is a structural equivalent to an HTML select element.

If aria-autocomplete is null or set to "none" on the element that includes role="combobox", and the Listbox container receives focus, the focusable element must be the same that includes the role="listbox" attribute, and aria-activedescendant managed focus must be used to reference the ID of the selected role="option" elements without moving focus. If instead roving tabindex is used to manage focus between role="option" elements, the aria-activedescendant attribute should not be included.

If focus is moved to and managed by the Listbox or its child Options, then the widget as a whole must have only one tab stop.

Option is a selectable item in a Listbox.

Important: This role must not include any embedded active elements.

Option is a structural equivalent to an HTML option element.

An element that includes role="option" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If aria-autocomplete is null or set to "none" on the element that includes role="combobox", and if focus is moved to the Listbox child element that includes role="option" when opened, then roving tabindex must be used to manage focus.

Though unlikely that the checked state will be needed, the aria-checked attribute is supported upon role="option" elements, and may be useful within readonly Combobox controls where the Spacebar can be used to check multiple Options.

Grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table.

The Grid role must include child elements with role="rowgroup" or role="row".

In cases where the nesting structure of Grid and its child roles may be convoluted, or when a Grid may include a nested Grid, aria-owns must be used on the role="grid" element to reference all of the IDs of the first child role; which would be role="rowgroup" if present, or role="row" otherwise.

Since a construct that includes role="grid" is automatically considered to be editable, the aria-readonly attribute may be set to declare the Grid as readonly, which will propagate down to all structural child roles of Grid, such as role="columnheader", role="rowheader", and role="gridcell".

If focusable, an element that includes role="grid" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the Grid container receives focus, the focusable element must be the same that includes the role="grid" attribute, and aria-activedescendant managed focus must be used to reference the ID of the selected role="row", role="columnheader", role="rowheader", or role="gridcell" elements without moving focus.

If instead roving tabindex is used to manage focus between role="row", role="columnheader", role="rowheader", or role="gridcell" elements, the aria-activedescendant attribute should not be included.

If the Grid is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="grid".

If the Grid has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="grid" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Test: Dynamic Interactive Grid

The Rowgroup role establishes a relationship between owned Row elements.

The Rowgroup role must include child elements with role="row".

Rowgroup is a structural equivalent to the thead, tfoot, and tbody elements in an HTML table element.

In cases where the nesting structure of Rowgroup and its child roles may be convoluted, or when a Rowgroup may include a nested Grid, aria-owns must be used on the role="rowgroup" element to reference all of the IDs of the first child role; which would be role="row".

If focusable, an element that includes role="rowgroup" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time) This is important, because, if an explicit name is not specified, assistive technologies will use the combined contents of all child Rows as the name for the Rowgroup instead.

If the Rowgroup container receives focus, the focusable element must be the same that includes the role="rowgroup" attribute, and aria-activedescendant managed focus must be used to reference the ID of the selected role="row", role="columnheader", role="rowheader", or role="gridcell" elements without moving focus.

If instead roving tabindex is used to manage focus between role="row", role="columnheader", role="rowheader", or role="gridcell" elements, the aria-activedescendant attribute should not be included.

If the Rowgroup is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="rowgroup".

If the Rowgroup has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="rowgroup" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

As with thead, tfoot, and tbody within an HTML table element, Rowgroup is an optional role within Grid.

The Row role establishes a relationship between owned Columnheader, Rowheader, and Gridcell elements.

The Row role must include child elements with role="columnheader", role="rowheader", or role="gridcell".

Row is a structural equivalent to the tr element in an HTML table element.

In cases where the nesting structure of Row and its child roles may be convoluted, or when a Row may include a nested Grid, aria-owns must be used on the role="row" element to reference all of the IDs of the first child roles; which would be role="columnheader", role="rowheader", and role="gridcell".

If focusable, an element that includes role="row" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the Row container receives focus, the focusable element must be the same that includes the role="row" attribute, and aria-activedescendant managed focus must be used to reference the ID of the selected role="columnheader", role="rowheader", or role="gridcell" elements without moving focus.

If instead roving tabindex is used to manage focus between role="columnheader", role="rowheader", or role="gridcell" elements, the aria-activedescendant attribute should not be included.

If a Row is selectable, aria-selected must be toggled accordingly between "true" or "false" on the role="row" element to reflect the correct state. Typically the Spacebar key is used to toggle selection using the keyboard, and onClick() is used to toggle selection for mouse and touch screen devices.

If the Row is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="row".

If the Row has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="row" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Columnheader is a cell containing header information for a column.

Columnheader is a structural equivalent to the th element in an HTML table element.

If roving tabindex upon Columnheader, or aria-activedescendant managed focus upon Grid, Rowgroup, or Row is used to manage focus between role="columnheader" elements, then the element that includes role="columnheader" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If a Columnheader is selectable, aria-selected must be toggled accordingly between "true" or "false" on the role="columnheader" element to reflect the correct state. Typically the Spacebar key is used to toggle selection using the keyboard, and onClick() is used to toggle selection for mouse and touch screen devices. (Avoid conflicts when a Columnheader is sortable and requires the same key and click assignments)

If a Columnheader is sortable, the aria-sort attribute must be set appropriately on the role="columnheader" element.

The aria-readonly attribute may be used to individually override the default setting inherited from Grid by setting this to "true" or "false" on the role="columnheader" element.

If the Columnheader is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="columnheader".

If the Columnheader has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="columnheader" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Rowheader is a cell containing header information for a Row.

Rowheader is a structural equivalent to the th element in an HTML table element.

If roving tabindex upon Rowheader, or aria-activedescendant managed focus upon Grid, Rowgroup, or Row is used to manage focus between role="rowheader" elements, then the element that includes role="rowheader" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If a Rowheader is selectable, aria-selected must be toggled accordingly between "true" or "false" on the role="rowheader" element to reflect the correct state. Typically the Spacebar key is used to toggle selection using the keyboard, and onClick() is used to toggle selection for mouse and touch screen devices. (Avoid conflicts when a Rowheader is sortable and requires the same key and click assignments)

If a Rowheader is sortable, the aria-sort attribute must be set appropriately on the role="rowheader" element.

The aria-readonly attribute may be used to individually override the default setting inherited from Grid by setting this to "true" or "false" on the role="rowheader" element.

If the Rowheader is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="rowheader".

If the Rowheader has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="rowheader" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Gridcell is a cell containing data within a Row.

Gridcell is a structural equivalent to the td element in an HTML table element.

If roving tabindex upon Gridcell, or aria-activedescendant managed focus upon Grid, Rowgroup, or Row is used to manage focus between role="gridcell" elements, then the element that includes role="gridcell" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If a Gridcell includes associated Columnheader or Rowheader elements within the Grid, then aria-describedby must be set on the role="gridcell" element in order to explicitly reference the IDs of one or both role="columnheader" and role="rowheader" elements if present.

If a Gridcell is selectable, aria-selected must be toggled accordingly between "true" or "false" on the role="gridcell" element to reflect the correct state. Typically the Spacebar key is used to toggle selection using the keyboard, and onClick() is used to toggle selection for mouse and touch screen devices.

The aria-readonly attribute may be used to individually override the default setting inherited from Grid by setting this to "true" or "false" on the role="gridcell" element.

If the Gridcell is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="gridcell".

If the Gridcell has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="gridcell" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Listbox is a widget that allows the user to select one or more items from a list of Options.

The Listbox role must include child elements with role="option".

In cases where the nesting structure of Listbox and its child roles may be convoluted, aria-owns must be used on the role="listbox" element to reference all of the IDs of the first child role; which would be role="option".

Listbox is a structural equivalent to an HTML select element.

An element that includes role="listbox" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the Listbox container receives focus, the focusable element must be the same that includes the role="listbox" attribute, and aria-activedescendant managed focus must be used to reference the ID of the selected role="option" elements without moving focus.

If instead roving tabindex is used to manage focus between role="option" elements, the aria-activedescendant attribute should not be included.

If focus is moved to and managed by the Listbox or its child Options, then the widget as a whole must have only one tab stop.

If the Listbox is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="listbox".

If the Listbox includes multiselectable Options, aria-multiselectable="true" must be set on the role="listbox" element.

If the Listbox has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="listbox" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Test:

• Basic ARIA Listbox
• Multiselect ARIA Listbox
• Checkable ARIA Listbox

Option is a selectable item in a Listbox.

Important: This role must not include any embedded active elements.

Option is a structural equivalent to an HTML option element.

An element that includes role="option" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If focus is moved to the Listbox child element that includes role="option", then roving tabindex must be used to manage focus.

If the Option is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="option".

If aria-multiselectable is null or set to "false" within Listbox, aria-selected="true" should follow focus and match the currently selected Option, and all other Options should include aria-selected="false".

If aria-multiselectable is set to "true" within Listbox, the aria-selected attribute must be toggled between "true" or "false" upon each role="option" element when activated, and should not be changed when focus moves between Options using the arrow keys. Typically the Spacebar key is used to toggle selection using the keyboard, and onClick() is used to toggle selection for mouse and touch screen devices.

The aria-checked attribute may be used on Option elements to convey a checkable state that is separate from focus or selection, which can be toggled between "true", "false", or "mixed" when activated. The aria-multiselectable attribute should be null or set to "false" on Listbox when using aria-checked, and the Spacebar key should be used to toggle the checked state using the keyboard, and onClick() should be used to toggle the checked state for mouse and touch screen devices.

If the Option has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="option" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Menu is a type of widget that offers a list of choices to the user.

A Menu is often a list of common actions or functions that the user can invoke. The Menu role is appropriate when a list of menu items is presented in a manner similar to a menu on a desktop application.

The Menu role must include child elements with role="menuitem", role="menuitemcheckbox", or role="menuitemradio".

In cases where the nesting structure of Menu and its child roles may be convoluted, aria-owns must be used on the role="menu" element to reference all of the IDs of the first child roles; which would be role="menuitem", role="menuitemcheckbox", and role="menuitemradio".

When a Menu is dynamically rendered, focus must be set to the element that includes role="menu", role="menuitem", role="menuitemcheckbox", or role="menuitemradio".

If the Menu container receives focus, the focusable element must be the same that includes the role="menu" attribute, and aria-activedescendant managed focus must be used to reference the ID of the selected role="menuitem", role="menuitemcheckbox", or role="menuitemradio" elements without moving focus.

If instead roving tabindex is used to manage focus between role="menuitem", role="menuitemcheckbox", or role="menuitemradio" elements, the aria-activedescendant attribute should not be included.

If focus is moved to and managed by the Menu or its child Menuitems, then the widget as a whole must have only one tab stop.

Elements with the role Menu have an implicit aria-orientation value of "vertical".

If a Menu is dynamically rendered horizontally as a flyout menu, aria-orientation should be set to "horizontal".

Progressive enhancement and responsive design considerations:

• If rendered on a desktop with standard keyboard access, the Menu should automatically close using onBlur() when focus moves away, such as clicking outside the Menu, pressing Tab or Shift+Tab, or when pressing Escape. (After which, focus should return to the triggering element.)
• If rendered on a touch device however, a toggle or Close button should be used instead, since onBlur will make it impossible to read the available menu items using a screen reader without accidentally closing the Menu.

Test:

• Basic Menu from triggering element
• Right click Menu from ARIA Textbox

Menuitem is an option in a set of choices contained by a Menu.

Important: This role must not include any embedded active elements besides those with role=menu, role=menubar, role=menuitem, role=menuitemcheckbox, or role=menuitemradio.

An element that includes role="menuitem" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If focus is moved to the Menu child element that includes role="menuitem", then roving tabindex must be used to manage focus.

If the Menuitem is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="menuitem".

If the Menuitem opens an attached Menu, aria-haspopup="true" must be set on the role="menuitem" element, and onClick() should be configured on the Menuitem to open the attached Menu. When aria-orientation upon Menu is set to "vertical", the Right arrow and Enter keys should perform the same action as onClick(), or when set to "horizontal", the Down arrow and Enter keys should perform the same action as onClick() instead.

Menuitemcheckbox is a Menuitem with a checkable state whose possible values are "true", "false", or "mixed".

Important: This role must not include any embedded active elements.

An element that includes role="menuitemcheckbox" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If focus is moved to the Menu child element that includes role="menuitemcheckbox", then roving tabindex must be used to manage focus.

If the Menuitemcheckbox is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="menuitemcheckbox".

The aria-checked attribute must be included on the same element that includes role="menuitemcheckbox" to reflect the checked state of the Menuitemcheckbox, and must be programmatically updated appropriately between "true", "false", or "mixed".

Menuitemradio is a checkable Menuitem in a set of elements with the same role, only one of which can be checked at a time.

Important: This role must not include any embedded active elements.

An element that includes role="menuitemradio" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If focus is moved to the Menu child element that includes role="menuitemradio", then roving tabindex must be used to manage focus.

If the Menuitemradio is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="menuitemradio".

The aria-checked attribute must be included on the same element that includes role="menuitemradio" to reflect the checked state of the Menuitemradio, and must be programmatically updated appropriately between "true" or "false".

Only one Menuitemradio in a group can be checked at the same time. When one item in the group is checked, the previously checked item becomes unchecked (its aria-checked attribute becomes "false").

Separator is a visual divider that separates and distinguishes groups of Menuitems.

Important: This role must not include any embedded active elements.

Elements with the role Separator have an implicit aria-orientation value of "horizontal".

If a Menu includes a Separator role, the Separator ID should not be referenced by aria-owns or aria-activedescendant, nor should it be made focusable using roving tabindex.

Menubar is a presentation of Menu that usually remains visible and is usually presented horizontally.

The Menubar role is used to create a menu bar similar to those found in Windows, Mac, and Gnome desktop applications. A menu bar is used to create a consistent set of frequently used commands. Authors SHOULD ensure that menubar interaction is similar to the typical menu bar interaction in a desktop graphical user interface.

The Menubar role must include child elements with role="menuitem", role="menuitemcheckbox", or role="menuitemradio".

In cases where the nesting structure of Menubar and its child roles may be convoluted, aria-owns must be used on the role="menubar" element to reference all of the IDs of the first child roles; which would be role="menuitem", role="menuitemcheckbox", and role="menuitemradio".

If the Menubar container receives focus, the focusable element must be the same that includes the role="menubar" attribute, and aria-activedescendant managed focus must be used to reference the ID of the selected role="menuitem", role="menuitemcheckbox", or role="menuitemradio" elements without moving focus.

If instead roving tabindex is used to manage focus between role="menuitem", role="menuitemcheckbox", or role="menuitemradio" elements, the aria-activedescendant attribute should not be included.

If focus is moved to and managed by the Menubar or its child Menuitems, then the widget as a whole must have only one tab stop.

Elements with the role Menubar have an implicit aria-orientation value of "horizontal".

Menuitem is an option in a set of choices contained by a Menubar.

Important: This role must not include any embedded active elements besides those with role=menu, role=menubar, role=menuitem, role=menuitemcheckbox, or role=menuitemradio.

An element that includes role="menuitem" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If focus is moved to the Menubar child element that includes role="menuitem", then roving tabindex must be used to manage focus.

If the Menuitem is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="menuitem".

If the Menuitem opens an attached Menu, aria-haspopup="true" must be set on the role="menuitem" element, and onClick() should be configured on the Menuitem to open the attached Menu. When aria-orientation upon Menubar is set to "horizontal", the Down arrow and Enter keys should perform the same action as onClick(), or when set to "vertical", the Right arrow and Enter keys should perform the same action as onClick() instead.

Menuitemcheckbox is a Menuitem with a checkable state whose possible values are "true", "false", or "mixed".

Important: This role must not include any embedded active elements.

An element that includes role="menuitemcheckbox" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If focus is moved to the Menubar child element that includes role="menuitemcheckbox", then roving tabindex must be used to manage focus.

If the Menuitemcheckbox is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="menuitemcheckbox".

The aria-checked attribute must be included on the same element that includes role="menuitemcheckbox" to reflect the checked state of the Menuitemcheckbox, and must be programmatically updated appropriately between "true", "false", or "mixed".

Menuitemradio is a checkable Menuitem in a set of elements with the same role, only one of which can be checked at a time.

Important: This role must not include any embedded active elements.

An element that includes role="menuitemradio" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If focus is moved to the Menubar child element that includes role="menuitemradio", then roving tabindex must be used to manage focus.

If the Menuitemradio is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="menuitemradio".

The aria-checked attribute must be included on the same element that includes role="menuitemradio" to reflect the checked state of the Menuitemradio, and must be programmatically updated appropriately between "true" or "false".

Only one Menuitemradio in a group can be checked at the same time. When one item in the group is checked, the previously checked item becomes unchecked (its aria-checked attribute becomes "false").

Separator is a visual divider that separates and distinguishes groups of Menuitems.

Important: This role must not include any embedded active elements.

Elements with the role Separator have an implicit aria-orientation value of "horizontal".

If a Menubar includes a Separator role, the Separator ID should not be referenced by aria-owns or aria-activedescendant, nor should it be made focusable using roving tabindex.

Radiogroup is a group of Radio buttons.

The Radiogroup role must include child elements with role="radio".

In cases where the nesting structure of Radiogroup and its child roles may be convoluted, aria-owns must be used on the role="radiogroup" element to reference all of the IDs of the first child role; which would be role="radio".

Radiogroup is a structural equivalent to an HTML fieldset and legend element.

An element that includes role="radiogroup" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the Radiogroup container receives focus, the focusable element must be the same that includes the role="radiogroup" attribute, and aria-activedescendant managed focus must be used to reference the ID of the selected role="radio" elements without moving focus.

If instead roving tabindex is used to manage focus between role="radio" elements, the aria-activedescendant attribute should not be included.

If focus is moved to and managed by the Radiogroup or its child Radios, then the widget as a whole must have only one tab stop.

If the Radiogroup is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="radiogroup".

If the Radiogroup has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="radiogroup" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Test: Simulated ARIA Radios

Radio is a checkable input in a group of elements with the same role, only one of which can be checked at a time.

Important: This role must not include any embedded active elements.

Radio is a structural equivalent to an HTML input with type="radio" element.

An element that includes role="radio" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If focus is moved to the Radiogroup child element that includes role="radio", then roving tabindex must be used to manage focus.

If the Radio is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="radio".

The aria-checked attribute must be included on the same element that includes role="radio" to reflect the checked state of the Radio, and must be programmatically updated appropriately between "true" or "false".

Only one Radio in a Radiogroup can be checked at the same time. When one item in the Radiogroup is checked, the previously checked item becomes unchecked (its aria-checked attribute becomes "false").

If the Radio has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="radio" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Tablist is a list of Tab elements, which are references to Tabpanel elements.

The Tablist role must include child elements with role="tab".

In cases where the nesting structure of Tablist and its child roles may be convoluted, aria-owns must be used on the role="tablist" element to reference all of the IDs of the first child role; which would be role="tab".

If focusable, an element that includes role="tablist" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the Tablist container receives focus, the focusable element must be the same that includes the role="tablist" attribute, and aria-activedescendant managed focus must be used to reference the ID of the selected role="tab" elements without moving focus.

If instead roving tabindex is used to manage focus between role="tab" elements, the aria-activedescendant attribute should not be included.

If focus is moved to and managed by the Tablist or its child Tabs, then the widget as a whole must have only one tab stop.

If the Tablist is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="tablist".

If the Tablist includes multiselectable Tabs, aria-multiselectable="true" must be set on the role="tablist" element.

If the Tablist has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="tablist" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Test: Simulated ARIA Tabs

Tab is a grouping label providing a mechanism for selecting the Tabpanel content that is to be rendered to the user.

Important: This role must not include any embedded active elements.

An element that includes role="tab" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If focus is moved to the Tablist child element that includes role="tab", then roving tabindex must be used to manage focus.

If the Tab is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="tab".

If aria-multiselectable is null or set to "false" within Tablist, and each Tab expands automatically when it receives focus, aria-selected="true" should follow focus and match the currently expanded Tab, and all other Tabs should include aria-selected="false".

If aria-multiselectable is null or set to "false" within Tablist, and focus movement does not cause each Tab to automatically expand, aria-selected="true" should follow focus regardless which Tab is expanded while all other Tabs should include aria-selected="false", and the aria-expanded attribute must be toggled between "true" or "false" upon each role="tab" element to reflect the expanded state of each Tab. Typically the Enter and Spacebar keys are used to toggle expandability using the keyboard, and onClick() is used to toggle expandability for mouse and touch screen devices.

If aria-multiselectable is set to "true" within Tablist, and focus movement does not cause each Tab to automatically expand, the aria-selected attribute must be toggled between "true" or "false" upon each role="tab" element to reflect the selected state of each Tab, and should not be changed when focus moves between Tabs using the arrow keys. Additionally, the aria-expanded attribute must be toggled between "true" or "false" upon each role="tab" element to reflect the expanded state of each Tab. Typically the Spacebar key is used to toggle selection while the Enter key is used to toggle expandability using the keyboard, and onClick() is used to toggle selection while onDblClick() is used to toggle expandability for mouse devices. For touch screen devices, an embedded Checkbox should be used to toggle selection, and onClick() should be used to toggle expandability.

The aria-controls attribute should be set on the role="tab" element to reference the ID of the associated Tabpanel container element, even when all Tabs share the same Tabpanel.

If the Tab has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="tab" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Tabpanel is a container for the resources associated with a Tab, where each Tab is contained in a Tablist (to ensure an accessible reading order for screen reader users, the Tabpanel element should not be a child of Tablist).

The aria-labelledby attribute should be set on the role="tabpanel" element to reference the ID of the associated Tab element when expanded.

The aria-hidden attribute may be used to show or hide associated Tabpanels.

Only one Tabpanel associated with a Tablist can be expanded at the same time. When one Tabpanel is expanded, the previously expanded Tabpanel becomes collapsed (its aria-hidden attribute becomes "true").

Tree is a type of List that may contain sub-level nested Groups that can be collapsed and expanded.

The Tree role must include child elements with role="treeitem", or role="group" when nesting lists of Treeitems in a hierarchy.

In cases where the nesting structure of Tree and its child roles may be convoluted, or when a Tree may include a nested Group, aria-owns must be used on the role="tree" element to reference all of the IDs of the first child role; which would be role="treeitem".

If focusable, an element that includes role="tree" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the Tree container receives focus, the focusable element must be the same that includes the role="tree" attribute, and aria-activedescendant managed focus must be used to reference the ID of the selected role="treeitem" elements without moving focus.

If instead roving tabindex is used to manage focus between role="treeitem" elements, the aria-activedescendant attribute should not be included.

If focus is moved to and managed by the Tree or its child Treeitems, then the widget as a whole must have only one tab stop.

If the Tree is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="tree".

If the Tree has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="tree" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Test: Simulated ARIA Tree

Treeitem is an option item of a Tree.

Important: This role must not include any embedded active elements besides role=group and role=treeitem.

An element that includes role="treeitem" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If focus is moved to the Tree child element that includes role="treeitem", then roving tabindex must be used to manage focus.

If the Treeitem is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="treeitem".

If aria-multiselectable is null or set to "false" within Tree, aria-selected="true" should follow the currently focusable Treeitem, and all other Treeitems should include aria-selected="false".

If aria-multiselectable is set to "true" within Tree, the aria-selected attribute must be toggled between "true" or "false" upon each role="treeitem" element to reflect the selected state of each Treeitem, and should not be changed when focus moves between Treeitems using the arrow keys. Typically the Spacebar key is used to toggle selection while the Enter key is used to perform an action using the keyboard, and onClick() is used to toggle selection while onDblClick() is used to perform an action for mouse devices. For touch screen devices, an embedded Checkbox should be used to toggle selection, and onClick() should be used to perform an action.

The aria-checked attribute may be used on Treeitem elements to convey a checkable state that is separate from focus or selection, which can be toggled between "true", "false", or "mixed". The aria-multiselectable attribute should be null or set to "false" on Tree when using aria-checked, and the Spacebar key should be used to toggle the checked state using the keyboard, and onClick() should be used to toggle the checked state for mouse and touch screen devices.

If the Treeitem is a branch node that expands or collapses a nested Group of Treeitems, the aria-expanded attribute must be included within the role="treeitem" element, and toggled between "true" when the associated Group is shown, or "false" when the associated Group is hidden. (It should be possible to expand or collapse branch nodes using the arrow keys on the keyboard, in the same manner as a Windows tree-view control.)

If the Treeitem is a leaf node however, and does not expand or collapse a nested Group of Treeitems, the aria-expanded attribute must not be included within the role="treeitem" element.

If the Tree includes nested Groups of Treeitems forming differing levels in a hierarchy, aria-level may be set on each role="treeitem" element to set the correct level for each. (The level for all Treeitems at the same logical level should share the same aria-level attribute value.)

If the Treeitem has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="treeitem" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Group is a nested list of Treeitems in a Tree that forms a collection of siblings in a hierarchy.

The Group role must include child elements with role="treeitem", or role="group" when nesting lists of Treeitems in a hierarchy.

In cases where the nesting structure of Group and its child roles may be convoluted, or when a Group may include a nested Group, aria-owns must be used on the role="group" element to reference all of the IDs of the first child role; which would be role="treeitem".

If focusable, an element that includes role="group" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the Group container receives focus, the focusable element must be the same that includes the role="group" attribute, and aria-activedescendant managed focus must be used to reference the ID of the selected role="treeitem" elements without moving focus.

If instead roving tabindex is used to manage focus between role="treeitem" elements, the aria-activedescendant attribute should not be included.

If the Group is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="group".

If the Group has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="group" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Treegrid is a Grid whose Rows can be expanded and collapsed in the same manner as for a Tree.

The Treegrid role must include child elements with role="rowgroup" or role="row".

In cases where the nesting structure of Treegrid and its child roles may be convoluted, aria-owns must be used on the role="treegrid" element to reference all of the IDs of the first child role; which would be role="rowgroup" if present, or role="row" otherwise.

Since a construct that includes role="treegrid" is automatically considered to be editable, the aria-readonly attribute may be set to declare the Treegrid as readonly, which will propagate down to all structural child roles of Treegrid, such as role="columnheader", role="rowheader", and role="gridcell".

If focusable, an element that includes role="treegrid" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the Treegrid container receives focus, the focusable element must be the same that includes the role="treegrid" attribute, and aria-activedescendant managed focus must be used to reference the ID of the selected role="row", role="columnheader", role="rowheader", or role="gridcell" elements without moving focus.

If instead roving tabindex is used to manage focus between role="row", role="columnheader", role="rowheader", or role="gridcell" elements, the aria-activedescendant attribute should not be included.

If the Treegrid is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="treegrid".

If the Treegrid has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="treegrid" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

The Rowgroup role establishes a relationship between owned Row elements.

The Rowgroup role must include child elements with role="row".

Rowgroup is a structural equivalent to the thead, tfoot, and tbody elements in an HTML table element.

In cases where the nesting structure of Rowgroup and its child roles may be convoluted, aria-owns must be used on the role="rowgroup" element to reference all of the IDs of the first child role; which would be role="row".

Elements with role="rowgroup" should not be focusable, nor referenced from Treegrid using aria-activedescendant.

As with thead, tfoot, and tbody within an HTML table element, Rowgroup is an optional role within Grid.

The Row role establishes a relationship between owned Columnheader, Rowheader, and Gridcell elements.

The Row role must include child elements with role="columnheader", role="rowheader", or role="gridcell".

Row is a structural equivalent to the tr element in an HTML table element.

In cases where the nesting structure of Row and its child roles may be convoluted, aria-owns must be used on the role="row" element to reference all of the IDs of the first child roles; which would be role="columnheader", role="rowheader", and role="gridcell".

If focusable, an element that includes role="row" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If the Row container receives focus, the focusable element must be the same that includes the role="row" attribute, and aria-activedescendant managed focus must be used to reference the ID of the selected role="columnheader", role="rowheader", or role="gridcell" elements without moving focus.

If instead roving tabindex is used to manage focus between role="columnheader", role="rowheader", or role="gridcell" elements, the aria-activedescendant attribute should not be included.

If aria-multiselectable is null or set to "false" within Treegrid, aria-selected="true" should follow the currently focusable Row, and all other Rows should include aria-selected="false".

If aria-multiselectable is set to "true" within Treegrid, the aria-selected attribute must be toggled between "true" or "false" upon each role="row" element to reflect the selected state of each Row, and should not be changed when focus moves between Rows using the arrow keys. Typically the Spacebar key is used to toggle selection while the Enter key is used to perform an action using the keyboard, and onClick() is used to toggle selection while onDblClick() is used to perform an action for mouse devices. For touch screen devices, an embedded Checkbox should be used to toggle selection, and onClick() should be used to perform an action.

If the Row is a branch node that expands or collapses a child Row, the aria-expanded attribute must be included within the role="row" element, and toggled between "true" when the associated Row is shown, or "false" when the associated Row is hidden.

If the Row is a leaf node however, and does not expand or collapse a child Row, the aria-expanded attribute must not be included within the role="row" element.

If the Treegrid includes expandable Rows forming differing levels in a hierarchy, aria-level must be set on each role="row" element to specify the correct level for each. (The level for all Rows at the same logical level should share the same aria-level attribute value.)

If the Row is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="row".

If the Row has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="row" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Columnheader is a cell containing header information for a column.

Columnheader is a structural equivalent to the th element in an HTML table element.

If roving tabindex upon Columnheader, or aria-activedescendant managed focus upon Treegrid or Row is used to manage focus between role="columnheader" elements, then the element that includes role="columnheader" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If a Columnheader is selectable, aria-selected must be toggled accordingly between "true" or "false" on the role="columnheader" element to reflect the correct state. Typically the Spacebar key is used to toggle selection using the keyboard, and onClick() is used to toggle selection for mouse and touch screen devices. (Avoid conflicts when a Columnheader is sortable, or when a Row is expandable and requires the same key and click assignments)

If a Columnheader is sortable, the aria-sort attribute must be set appropriately on the role="columnheader" element.

The aria-readonly attribute may be used to individually override the default setting inherited from Treegrid by setting this to "true" or "false" on the role="columnheader" element.

If the Columnheader is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="columnheader".

If the Columnheader has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="columnheader" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Rowheader is a cell containing header information for a Row.

Rowheader is a structural equivalent to the th element in an HTML table element.

If roving tabindex upon Rowheader, or aria-activedescendant managed focus upon Treegrid or Row is used to manage focus between role="rowheader" elements, then the element that includes role="rowheader" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If a Rowheader is selectable, aria-selected must be toggled accordingly between "true" or "false" on the role="rowheader" element to reflect the correct state. Typically the Spacebar key is used to toggle selection using the keyboard, and onClick() is used to toggle selection for mouse and touch screen devices. (Avoid conflicts when a Rowheader is sortable, or when a Row is expandable and requires the same key and click assignments)

If a Rowheader is sortable, the aria-sort attribute must be set appropriately on the role="rowheader" element.

The aria-readonly attribute may be used to individually override the default setting inherited from Treegrid by setting this to "true" or "false" on the role="rowheader" element.

If the Rowheader is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="rowheader".

If the Rowheader has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="rowheader" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)

Gridcell is a cell containing data within a Row.

Gridcell is a structural equivalent to the td element in an HTML table element.

If roving tabindex upon Gridcell, or aria-activedescendant managed focus upon Treegrid or Row is used to manage focus between role="gridcell" elements, then the element that includes role="gridcell" must have an explicit label in accordance with the Text Alternative Computation. (Both aria-labelledby and aria-label should not be used at the same time)

If a Gridcell includes associated Columnheader or Rowheader elements within the Grid, then aria-describedby must be set on the role="gridcell" element in order to explicitly reference the IDs of one or both role="columnheader" and role="rowheader" elements if present.

If a Gridcell is selectable, aria-selected must be toggled accordingly between "true" or "false" on the role="gridcell" element to reflect the correct state. Typically the Spacebar key is used to toggle selection using the keyboard, and onClick() is used to toggle selection for mouse and touch screen devices. (Avoid conflicts when a Row is expandable and requires the same key and click assignments)

The aria-readonly attribute may be used to individually override the default setting inherited from Treegrid by setting this to "true" or "false" on the role="gridcell" element.

If the Gridcell is disabled, the aria-disabled attribute can be used to reflect the correct state of the element that includes role="gridcell".

If the Gridcell has an attached Menu that opens when Right clicked, aria-haspopup="true" must be set on the role="gridcell" element, and the Shift+F10 and Application keystrokes should be configured to open and set focus within the Menu, and a mechanism for doing the same on touch screen devices should be added as well. (The aria-describedby attribute can be used to convey this dual functionality by implementing a Tooltip.)