Related resources:
The purpose of The ARIA Role Conformance Matrices is not to list all possible attributes that can be used on all available roles, but rather, to specifically quantify how accessibility is tied into the usage of ARIA roles, and how associated roles are hierarchically mapped.
Each ARIA role matrix is presented as a standalone table, where the left most Role column represents the hierarchical nesting association of related roles when applicable.
All ARIA roles and supporting attributes within the Roles, Required Attributes, and Optional Attributes columns are active links that point to the ARIA 1.1 specification, which can be used for detail comparison, spec text logic testing, and bug identification. When a role name is capitalized, it is literally referring to the element that includes that particular role attribute. (This understanding is critical for the accessible implementation of ARIA.)
Please file relevant bugs against the ARIA 1.1 specification where indicated, or on The ARIA Role Conformance Matrices GitHub project page if issues are discovered with this document.
Sincerely, Bryan Garaventa
Static roles can be included within standard HTML markup and require no scripting.
application
Role
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
application
|
No |
application is a region declared as a web application , as opposed to a web Document.
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.
Live demo: Basic compound date picker component
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| banner | No | Banner is a region that contains mostly site-oriented content, rather than page-specific content. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| complementary | No | 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. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| contentinfo | No | Contentinfo is a large perceivable region that contains information about the parent document. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| form | No | Form is a landmark region that contains a collection of items and objects that, as a whole, combine to create a form. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| main | No | Main is the main content of a document. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| navigation | No | Navigation is a collection of navigational elements for navigating the document or related documents. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| region | No | 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) |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| search | No | Search is a landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| article | No | Article is a section of a page that consists of a composition that forms an independent part of a document, page, or site. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| definition | No | 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. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| directory | No | 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 | No | Listitem is a single item in a Directory. Listitem elements are required as children of role="directory". Listitem is a structural equivalent to the li element in an HTML ul element. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| document | No |
Document is a region containing related information that is declared as document content, as opposed to a web application .
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| heading | No | 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. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| img | No | Img is a container for a collection of elements that form an image. 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) |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| list | No | 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 | No | Listitem is a single item in a List. Listitem elements are required as children of role="list". Listitem is a structural equivalent to the li element in an HTML ul element. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| math | No | Math is content that represents a mathematical expression. 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) |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| note | No | Note is a section whose content is parenthetic or ancillary to the main content of the resource. (A comment or explanation of something) |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| separator | No | Separator is a divider that separates and distinguishes sections of content. If not set to "vertical", elements with the role Separator have an implicit aria-orientation value of "horizontal". |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| table | No | 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. | ||
| rowgroup | No | 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. | ||
| row | No | The Row role establishes a relationship between owned Columnheader, Rowheader, and cell elements. The Row role 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 | No | 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 a Columnheader is sortable, the aria-sort attribute must be set appropriately on the role="columnheader" element. | ||
| rowheader | No | 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 a Rowheader is sortable, the aria-sort attribute must be set appropriately on the role="rowheader" element. | ||
| cell | No | Cell is a cell containing data within a Row. Cell 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. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| toolbar | No | 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. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| none | No | None is an element whose implicit native role semantics will not be mapped to the accessibility API. The None role 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. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| presentation | No | 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. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| text | No | Text is an element whose entire subtree should be exposed to accessibility APIs as plain text. The Text role allows authors to mark an element and all of its subtree contents as plain text. Unlike the None and Presentation roles, role="text" removes the accessibility tree structures of all embedded HTML markup. For this reason, the Text role should never be used on a container element that includes active elements. |
Pseudo interactive roles are static roles that can be included within standard HTML markup, but require some scripting to ensure proper functionality.
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| alertdialog | Yes | 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. 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. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| dialog | Yes | 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. 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". An 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. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| alert | Yes |
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.
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| log | Yes | 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" |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| marquee | Yes | 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. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| status | Yes | 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. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| timer | Yes | 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. |
Interactive widget roles can be included within standard HTML markup, but require precise scripting to ensure proper functionality.
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| button | Yes |
Button is an input that allows for user-triggered actions when clicked or pressed.
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" or "false".
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.)
Live demos:
Simulated Button controls with role="button"
Standard Button with aria-haspopup="true" to open a Menu
Simulated Toggle Button controls with role="button" and aria-pressed
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| checkbox | Yes |
Checkbox is a checkable input that has three possible values: "true", "false", or "mixed".
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.)
Live demo: Simulated Checkbox with role="checkbox" and aria-checked
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| link | Yes |
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.)
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| progressbar | Yes | Progressbar is an element that displays the progress status for tasks that take a long time. 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. Live demo: Basic Popup Progress control with polyfill |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| searchbox | No |
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.)
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| scrollbar | Yes |
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.
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.)
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| slider | Yes |
Slider is a user input where the user selects a value from within a given range.
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.)
Live demos:
Horizontal ARIA Slider
Vertical ARIA Slider
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| spinbutton | Yes |
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.
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| switch | Yes |
Switch is a type of Checkbox that represents on/off values, as opposed to checked/unchecked values.
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.)
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| textbox | Yes |
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.)
Live demo: Simulated ARIA Textbox
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| tooltip | Yes | 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. Live demo: Simple Tooltip |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| combobox | Yes | 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. 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-owns attribute should be set on the element that includes role="combobox", and should reference the ID of the container element that includes role="listbox". 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. 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. Live demos: Substring Editable Combobox with aria-activedescendant Startstring Readonly Combobox with aria-activedescendant | ||
| listbox | Yes | 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 | Yes | Option is a selectable item in a Listbox. 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. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| grid | Yes |
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.)
Live demo: Dynamic Interactive Grid
|
||
| rowgroup | Yes |
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.
|
||
| row | Yes |
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 | Yes |
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 | Yes |
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 | Yes |
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.)
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| listbox | Yes |
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.)
Live demos:
Basic ARIA Listbox
Multiselect ARIA Listbox
|
||
| option | Yes |
Option is a selectable item in a Listbox.
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.)
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| menu | Yes |
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.
Live demos:
Basic Menu from triggering element
Right click Menu from ARIA Textbox
Right click Menu from ARIA Tab
Right click Menu from ARIA Tree
|
||
| menuitem | Yes | Menuitem is an option in a set of choices contained by a Menu. 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 | Yes | Menuitemcheckbox is a Menuitem with a checkable state whose possible values are "true", "false", or "mixed". 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 | Yes | Menuitemradio is a checkable Menuitem in a set of elements with the same role, only one of which can be checked at a time. 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 | No | Separator is a visual divider that separates and distinguishes groups of Menuitems. 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. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| menubar | Yes |
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 application s. 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 | Yes | Menuitem is an option in a set of choices contained by a Menubar. 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 | Yes | Menuitemcheckbox is a Menuitem with a checkable state whose possible values are "true", "false", or "mixed". 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 | Yes | Menuitemradio is a checkable Menuitem in a set of elements with the same role, only one of which can be checked at a time. 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 | No | Separator is a visual divider that separates and distinguishes groups of Menuitems. 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. |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| radiogroup | Yes |
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.)
Live demo: Simulated ARIA Radios
|
||
| radio | Yes |
Radio is a checkable input in a group of elements with the same role, only one of which can be checked at a time.
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.)
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| tablist | Yes |
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.)
Live demo: Simulated ARIA Tabs
|
||
| tab | Yes |
Tab is a grouping label providing a mechanism for selecting the Tabpanel content that is to be rendered to the user.
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 | Yes | 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"). |
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| tree | Yes |
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.)
Live demo: Simulated ARIA Tree
|
||
| treeitem | Yes |
Treeitem is an option item of a Tree.
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 | Yes |
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.)
|
| Role | Required Attributes | Optional Attributes | Requires Scripting | Implementation Notes |
|---|---|---|---|---|
| treegrid | Yes |
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.)
|
||
| rowgroup | No | 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. | ||
| row | Yes |
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 | Yes |
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 | Yes |
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 | Yes |
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.)
|


The category is {{questionDisplay.category.title}} for ${{questionDisplay.value}}
Question: {{questionDisplay.question}}
Answer: {{questionDisplay.answer}}
Is this question impossible to answer due to missing information? Click here
Please enter an answer