Accessible Rich Internet Applications (WAI-ARIA) 1.0

A message with important, and usually time-sensitive, information. Also see alertdialog and status.

Alerts are used to convey messages to alert the user. In the case of audio warnings this is an accessible alternative for a hearing-impaired user. The alert role goes on the node containing the alert message. Alerts are specialized forms of the status role, which should be processed as an atomic live region.

Alerts do not require user input and therefore should not receive focus. Since alerts do not receive focus, users SHOULD NOT be required to close an alert. If the operating system allows, the user agent MAY fire a system alert event when the ARIA alert is created. If an alert requires focus to close the alert, then an alertdialog SHOULD be used instead.

Note: Elements with the role alert have an implicit aria-live value of assertive.

A type of dialog that contains an alert message, where initial focus goes to the dialog or an element within it. Also see alert and dialog.

Alert dialogs are used to convey messages to alert the user. The alertdialog role goes on the node containing both the alert message and the rest of the dialog. Authors SHOULD make alert dialogs modal by ensuring that, while the alertdialog is shown, keyboard and mouse interactions only operate within the dialog.

Unlike alert, alertdialog can receive a response from the user. For example, to confirm that the user understands the alert being generated. When the alert dialog is displayed, authors SHOULD set focus to an active element within the alert dialog, such as a form edit field or an OK button. The user agent MAY fire an accessibility alert event, when the alert is created, provided one is specified by the intended accessibility API.

Authors SHOULD use aria-describedby on an alertdialog to point to the alert message element in the dialog. If they do not, assistive technology will resort to their internal recovery mechanism to determine the contents of an alert message.

Note: Elements with the role alertdialog have an implicit aria-live value of assertive.

A region declared as a web application, as opposed to a web document.

The intent is to hint to the assistive technology to switch its normal browsing mode functionality to one in which they would for an application. User agents have a browse navigation mode where keys, such as up and down arrows, are used to browse the document. This native behavior prevents the use of these keys by a web application.

An author should set the role of application on the element that encompasses the entire application. If the application role applies to the entire web page, it should be set on the root node for content, such as the body element in HTML or svg element in SVG.

For example, an email application has a document and an application in it. The author would want to use typical application navigation mode to cycle through the list of emails, and much of this navigation would be defined by the application author. However, when reading an email message the content should appear in a region with a document role in order to use browsing navigation.

All non-decorative static text or image content inside the application SHOULD be either associated with a form widget or group via aria-label, aria-labelledby, or aria-describedby, or separated out into an element with role of document or article.

Applications SHOULD have an application title or label. This should be suitable for use as a navigation preview or table-of-contents entry for the page section in question. The label SHOULD come from one of the following sources:

• If the application includes the entire contents of the web page, use the host language feature for title or label, such as the title element in HTML, which labels the entire file.
• Otherwise, provide a visible label referenced by the application using aria-labelledby.

A section of a page consisting of an independent part of a document, page, or site.

An article could be a forum post, a magazine or newspaper article, a web log entry, a user-submitted comment, or any other independent item of content. It is independent in that its contents could stand alone, for example in syndication. However, the element is still associated with its ancestors; for instance, contact information that applies to a parent body element still covers the article as well. When nesting articles, the child articles represent content that is related to the content of the parent article. For instance, a web log entry on a site that accepts user-submitted comments could represent the comments as articles nested within the article for the web log entry. Author, heading, date, or other information associated with an article does not apply to nested articles.

Assistive technology must treat an article like a document in that article must be processed like an application. Unlike a document, the use of articles allows the user to identify and follow related articles based on the nesting.

A region that contains the primary heading or web site title.

Most of the content of a banner is site-oriented, rather than being page-specific. Site-oriented content typically includes things such as the logo of the site sponsor, the main heading for the page, and site-specific search tool. Typically this appears at the top of the page spanning the full width.

Within any document or application, the author SHOULD mark no more than one element with the banner role.

Note: Because document and application elements can be nested in the DOM, they may have multiple banner elements as DOM descendants, assuming each of those is associated with different document nodes, either by a DOM nesting (e.g., document within document) or by use of the aria-owns attribute.

An input that allows for user-triggered actions when clicked or pressed.

Buttons are mostly used for discrete, atomic actions. Standardizing the appearance of buttons enhances a user's recognition of the widgets as buttons and allows for a more compact display in toolbars.

Buttons support the optional attribute aria-pressed. Buttons with a non-empty aria-pressed attribute are toggle buttons. When aria-pressed is true the button is in a "pressed" state, when aria-pressed is false it is not pressed. If the attribute is not present, the button is a simple command button.

A checkable input that has three possible values: true, false, or mixed.

The aria-checked attribute of a checkbox indicates whether the input is checked (true), unchecked (false), or represents a group of elements that have a mixture of checked and unchecked values (mixed). Many checkboxes do not use the mixed value, and thus are effectively boolean checkboxes.

A cell containing header information for a column.

columnheader can be used as a column header in a table or grid. It could also be used in a pie chart to show a similar relationship in the data.

The columnheader establishes a relationship between it and all cells in the corresponding column. It is the structural equivalent to an HTML th element with a column scope.

Note: Because cells are organized into rows, there is not a single container element for the column. The column is the set of gridcell elements in a particular position within their respective row containers.

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.

combobox is the combined presentation of a single line text box with a list box popup. The combobox may be editable. Typically editable combo boxes are used for autocomplete behavior, and the aria-autocomplete property may be used on the child textbox.

Note: In XForms [XFORMS] the same select can have one of 3 appearances: combo-box, drop-down box, or group of radio-buttons. Many browsers allow users to type in a drop-down select as well. This specification does not constrain the presentation of the combo box.

To be keyboard accessible, instances of this role SHOULD manage focus of descendants, as described in Managing Focus.

Note: Elements with the role combobox have an implicit aria-haspopup value of true.

A supporting section of the document that remains meaningful even when separated from the main content.

There are various types of content that would appropriately have this role. For example, in the case of a portal, this may include but not be limited to show times, current weather, related articles, or stocks to watch. The content should be relevant to the main content; if it is completely separable, a more general role should be used instead.

A widget that may contain navigable descendants or owned children.

The composite widget SHOULD exist as a single navigation stop within the larger navigation system of the web page. Once the composite widget has focus, it SHOULD provide a separate navigation mechanism for users to navigate to elements that are descendants or owned children of the composite element.

Note: composite is an abstract role used for the ontology. Authors should not use this role in content.

Metadata that applies to the parent document.

For example, footnotes, copyrights, and links to privacy statements would belong here.

A definition of a term or concept.

The ARIA specification does not provide a role to specify the definition term, but host languages may provide such an element. If a host language has an appropriate element for the term (e.g. dfn or dt in HTML), the term should be included in that element. Elements with a role of definition SHOULD have an aria-labelledby attribute identifying the definition term element.

A dialog is an application window that is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response. Also see alertdialog.

Dialog boxes SHOULD have a title, which may be provided with the aria-label or aria-labelledby attribute if other mechanisms are not available. They SHOULD have a focused descendant element that has keyboard focus.

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

Authors SHOULD use this role for a static table of contents, whether linked or unlinked. This includes tables of contents built with lists, including nested lists. Dynamic tables of contents, however, might use a tree role instead.

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

The document role informs user agents of the need to augment browser keyboard support in order to allow users to visit and read any content within the document region. In contrast, additional commands are not necessary for screen reader users to read text within a region with the application role, where all text should be semantically associated with focusable elements. An important trait of documents is that they have some text which is not associated with widgets or groups thereof.

An author should set the role of document on the element that encompasses the entire document. If the document role applies to the entire web page, it should be set on the root node for content, such as the body element in HTML or svg element in SVG.

For example, an email application has a document and an application in it. The author would want to use typical application navigation mode to cycle through the list of emails, and much of this navigation would be defined by the application author. However, when reading an email message, the content should appear in a region with a document role in order to use browsing navigation.

Documents SHOULD have a document title or label. This should be suitable for use as a navigation preview or table-of-contents entry for the page section in question. The label SHOULD come from one of the following sources:

• If the document includes the entire contents of the web page, use the host language feature for title or label, such as the title element in HTML, which labels the entire file.
• Otherwise, provide a visible label referenced by the document using aria-labelledby.

A grid contains cells of tabular data arranged in rows and columns, like a table.

Grids do not necessarily imply presentation. The grid construct describes relationships between data such that it may be used for different presentations. Grids allow the user to move focus between cells using two dimensional navigation. For example, grid might be used as the invisible data model (hidden with CSS but still operable by assistive technology) for a presentational chart.

Cells with role gridcell, SHOULD be contained in rows with role row, which in turn SHOULD be contained in a grid. Cells may be focusable. Grids may be empty, containing no rows or cells. Grids MAY have row and column headers, provided with rowheader and columnheader roles, which also assist the user agent in supporting navigation. gridcell elements MAY have contents determined by a calculation.

gridcell elements with the aria-selected attribute set can be selected for user interaction, and if the aria-multiselectable attribute of the grid is set to true, multiple cells in the grid may be selected. Grids may be used for spreadsheets like those in desktop spreadsheet applications.

A grid is considered editable unless otherwise specified. To make a grid read-only, set the aria-readonly attribute of the grid to true. The value of the grid element's aria-readonly attribute is implicitly propagated to all of its owned gridcell elements, and should be exposed through the accessibility API. An author may override an individual gridcell element's propagated aria-readonly value by setting the aria-readonly attribute on the gridcell.

To be keyboard accessible, instances of this role SHOULD manage focus of descendants, as described in Managing Focus.

A cell in a grid or treegrid.

Cells may be active, editable, and selectable. Cells may have relationships such as aria-controls to address the application of functional relationships.

If headers cannot be determined from the DOM structure, cells SHOULD explicitly indicate which header cells are relevant to them. They do this by referencing elements with role rowheader or columnheader using the aria-describedby attribute.

In a treegrid, cells MAY be expandable and use the aria-expanded attribute. If the aria-expanded attribute is provided, it applies only to the individual cell. It is not a proxy for the container row, which also can be expanded. The main use case for providing this attribute on a cell is pivot table behavior.

A set of user interface objects which would not be included in a page summary or table of contents by an assistive technology.

Contrast with region which is sections of user interface objects that should be included in a page summary or table of contents.

Authors should use a group to form a logical collection of items in a widget such as children in a tree widget forming a collection of siblings in a hierarchy, or a collection of items having the same container in a directory. Therefore, proper handling of group by assistive technology must be determined by the context in which it is provided.

Groups may also be nested. If the author believes a section is significant enough in terms of the entire delivery unit web page, then the author should assign the section a role of region or a standard landmark role.

Group members that are not a DOM descendant of the group would need to have explicit relationships assigned to participate in the group using the aria-owns attribute.

A heading for a section of the page.

Often, heading elements will be referenced with the aria-labelledby attribute of the section for which they serve as a heading. If headings are organized into a logical outline, the aria-level attribute may be used to indicate the nesting level.

A container for a collection of elements that form an image.

An img can contain captions and descriptive text, as well as multiple image files that when viewed together give the impression of a single image. An img represents a single graphic within a document, whether or not it is formed by a collection of drawing objects. In order to be perceivable, elements with a role of img SHOULD have alternative text or a label associated by the accessible name calculation.

A generic type of widget that allows user input.

A region of the page intended as a navigational landmark.

User agents or assistive technology MAY allow the user to quickly navigate to these regions.

Note: landmark is an abstract role used for the ontology. Authors should not use this role in content.

An interactive reference to an internal or external resource.

If this is a native link in the host language (such as an HTML anchor with an href value), activating the link causes the user agent to navigate to that resource. If this is a simulated link, the web application is responsible for managing navigation.

A group of non-interactive list items.

Lists contain children whose role is listitem, or elements whose role is group which in turn contains children whose role is listitem.

A widget that allows the user to select one or more items from a list of choices.

Items within the list are static and, unlike in standard HTML select elements, may contain images. List boxes contain children whose role is option.

To be keyboard accessible, instances of this role SHOULD manage focus of descendants, as described in Managing Focus.

Although listbox inherits the aria-expanded attribute, if there is a valid reason to expand the listbox, authors should consider using a combobox instead.

A single item in a list, listbox, or directory.

A type of live region where new information is added in meaningful order and old information may disappear. Also see marquee.

Examples include chat logs, messaging history, game log, or an error log. In contrast to other live regions, in this role there is a relationship between the arrival of new items in the log and the reading order. The log contains a meaningful sequence and new information is added only to the end of the log, not at arbitrary points.

Note: Elements with the role log have an implicit aria-live value of polite.

The main content of a document.

This marks the content that is directly related to or expands upon the central topic of the document. The main role is a non-obtrusive alternative for "skip to main content" links, where the navigation option to go to the main content (or other landmarks) is provided by the user agent through a dialog or by an assistive technology.

Within any document or application, the author SHOULD mark no more than one element with the main role.

Note: Because document and application elements can be nested in the DOM, they may have multiple main elements as DOM descendants, assuming each of those is associated with different document nodes, either by a DOM nesting (e.g., document within document) or by use of the aria-owns attribute.

A type of live region where non-essential information changes frequently. Also see log.

Common usages of marquee include stock tickers and ad banners. An example of a marquee is a stock ticker. The primary difference between a marquee and a log is that logs usually have a meaningful sequence of more important content changes.

An element that represents a mathematical expression.

The math role is used to indicate sections that represent math. Such sections SHOULD use a formal mathematical language such as MathML to express mathematical concepts. However, since there exists significant amounts of legacy content that use images and ASCII art to represent mathematical expressions, the math role also allows assistive technology to deliver to the user the text equivalent provided for the image, which can be converted, for example, to Braille or text to speech. The text equivalent used in such situations SHOULD be valid MathML or TeX. In order to be perceivable, images SHOULD also be labeled by text that describes the math formula as it should be spoken, using the aria-describedby attribute. The text description should have no special markup used to control a speech device.

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

A menu is often a list of links to important sections of a document or a site. The menu role is appropriate when a list of menu items is presented in a manner similar to a menu on a desktop application.

To be keyboard accessible, instances of this role SHOULD manage focus of descendants, as described in Managing Focus.

A presentation of menu that usually remains visible and is usually presented horizontally.

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

To be keyboard accessible, instances of this role SHOULD manage focus of descendants, as described in Managing Focus.

An option in a group of choices contained by a menu or menubar.

A menuitem MAY be disabled with the aria-disabled attribute. If a menu item's aria-haspopup attribute is set to true, it SHOULD activate a new sub-level menu.

Menu items SHOULD be in an element with role menu in order to identify that they are related widgets, and MAY also be separated into a group by a separator, or an element with an equivalent role from the native markup language.

A checkable menuitem that has three possible values: true, false, or mixed.

The aria-checked attribute of a menuitemcheckbox indicates whether the menu item is checked (true), unchecked (false), or represents a sub-level menu of other menu items that have a mixture of checked and unchecked values (mixed).

Menu items SHOULD be in an element with role menu in order to identify that they are related widgets, and MAY also be separated into a group by a separator, or an element with an equivalent role from the native markup language.

A checkable menuitem in a group of menuitemradio roles, only one of which can be checked at a time.

Authors SHOULD enforce that 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).

Menu items SHOULD be in an element with role menu in order to identify that they are related widgets, and MAY also be separated into a group by a separator, or an element with an equivalent role from the native markup language.

A collection of navigational elements (usually links) for navigating the document or related documents.

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

A selectable item in a select list.

Options SHOULD be associated with one of the non-abstract child roles of select, such as combobox, listbox, menu, radiogroup, or tree. Options not contained in, or owned by, one of these roles might not be correctly mapped to an accessibility API.

An element whose role is presentational and does not need to be mapped to the accessibility API.

The intended use is when an element is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type.

Example use cases:

• An element whose content is presentational (like a spacer image, decorative graphic, or clearing element);
• An image that is in a container having the same role and where the full equivalent is available in text that is marked up with aria-labelledby and (if needed) aria-describedby;
• An element used as an additional markup "hook" for CSS; or
• A layout table and/or any of its associated cells, rows, etc.

The user agent MAY choose not to present all structural aspects of the element being repurposed. For example, for a table marked as presentation, the user agent would remove the table, td, th, tr, etc. elements from the accessibility API mapping, while preserving the individual text elements within them. Because the user agent knows to ignore the structural aspects implied in a table, no harm is done by using a table for layout.

User agents should ignore elements with the presentation role for the purpose of determining the containment of items with ARIA roles.

For example, in the following code sample:

<div role="img" aria-labelledby="caption">
  <img src="example.png" role="presentation" alt="">
  <p id="caption">A visible text caption labeling the image.</p>
</div>

The containing div element has an ARIA role of img and is appropriately labeled by the caption paragraph. In this example the img element can be marked as presentation because the role and the text equivalents are provided by the containing element.

In the following code sample:

<ul role="tree">
  <li role="presentation">
    <a role="treeitem" aria-expanded="true">An expanded tree node</a> 
  </li> 
  … 
</ul>

Because the anchor (HTML a element) is acting as the treeitem, the list item (HTML li element) is assigned an explicit ARIA role of presentation to override the user agent's default behavior for list item.

An element that displays the progress status for tasks that take a long time.

A progressbar indicates that the user's request has been received and the application is making progress toward completing the requested action. The author SHOULD supply values for aria-valuenow, aria-valuemin, and aria-valuemax, unless the value is indeterminate, in which case the aria-valuenow attribute should be omitted. These values should be updated when the visual progress indicator is updated. If the progressbar is describing the loading progress of a particular region of a page, the author SHOULD use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading.

A checkable input in a group of radio roles, only one of which can be checked at a time.

Elements with role radio SHOULD be explicitly grouped in order to indicate which ones affect the same value. This should be done by enclosing them in an element with role radiogroup. If it is not possible to make the radio buttons DOM children of the radiogroup, use the aria-owns attribute on the radiogroup element to indicate the relationship to its children.

A group of radio buttons.

A radiogroup is a type of select list that can only have a single entry checked at any one time. Authors SHOULD enforce that only one radio button 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).

An input representing a range of values that can be set by the user.

Note: range is an abstract role used for the ontology. Authors should not use this role in content.

A large perceivable section of a web page or document, that the author feels should be included in a summary of page features.

This role defines a group of elements that together form a large perceivable section that the author feels should be included in a summary of page features. A region SHOULD have a heading, provided via an instance of the heading role or by using the standard accessible name calculation. A region does not necessarily follow the logical structure of the content, but follows the perceivable structure of the page.

When defining regions of a web page, authors should consider using standard document landmark roles. If the definitions of these regions are inadequate, authors should use the region role and provide the appropriate accessible name.

The base role from which all other roles in this taxonomy inherit.

Properties of this role describe the structural and functional purpose of objects that are assigned this role (known in RDF terms as "instances"). A role is a concept that can be used to understand and operate instances.

Note: roletype is an abstract role used for the ontology. Authors should not use this role in content.

A row of cells in a grid.

Rows contain gridcell elements, and thus serve to organize the grid.

In a treegrid, rows MAY be expandable, using the aria-expanded attribute to indicate the present status. This is not the case for an ordinary grid, in which the aria-expanded attribute is not present.

A cell containing header information for a row in a grid.

Rowheader can be used as a row header in a table or grid. The rowheader establishes a relationship between it and all cells in the corresponding row. It is a structural equivalent to setting row="scope" on an HTML th element.

The search tool of a web document.

This is typically a form used to submit search requests about the site or to a more general Internet search service.

A renderable structural containment unit in a document or application.

Note: section is an abstract role used for the ontology. Authors should not use this role in content.

A structure that labels or summarizes the topic of its related section.

Note: sectionhead is an abstract role used for the ontology. Authors should not use this role in content.

A form widget that allows the user to make selections from a set of choices.

Elements with role option, SHOULD be contained in elements using one of the non-abstract child roles of select. Selects may be empty, containing no rows or cells.

Note: select is an abstract role used for the ontology. Authors should not use this role in content.

A divider that separates and distinguishes sections of content or groups of menuitems.

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

A slider represents the current value and range of possible values via the size of the slider and position of the thumb. It is typically possible to add or subtract to the value by using directional keys such as arrow keys.

A form of range that expects a user to select from amongst discrete choices.

A spinbutton typically allows the user to select from the given range through the use of an up and down button on the keyboard. Visibly, the current value is incremented or decremented until a maximum or minimum value is reached. This functionality SHOULD be accomplished programmatically through the use of up and down arrows on the keyboard.

Although a spinbutton is similar in appearance to many presentations of select, it is advisable to use spinbutton when working with known ranges (especially in the case of large ranges) as opposed to distinct options. For example, a spinbutton representing a range from 1 to 1,000,000 would provide much better performance than a select widget representing the same values.

A container whose content is advisory information for the user but is not important enough to justify an alert. Also see alert.

A status object must have content within it to provide the actual status information. This object SHOULD NOT receive focus.

Status is a form of live region. If another part of the page controls what appears in the status, the relationship should be made explicit with the aria-controls attribute.

Assistive technology devices MAY reserve some cells of a Braille display to render the status.

Note: Elements with the role status have an implicit aria-live value of polite.

A document structural element.

Roles for document structure support the accessibility of dynamic web content by helping assistive technology to determine active content vs. static document content. Structural roles by themselves do not all map to accessibility APIs, but are used to create widget roles or assist content adaptation for assistive technologies.

Note: structure is an abstract role used for the ontology. Authors should not use this role in content.

A header for a tabpanel.

The tab role is used as a grouping label, providing a link for selecting the tab content to be rendered to the user. If a tabpanel or item in a tabpanel has focus, the associated tab is the currently active tab in the tablist, as defined by aria-activedescendant.

The tabpanel associated with the currently active tab SHOULD be perceivable to the user:

• For a single-selectable tablist, other tabpanel elements SHOULD be hidden from the user until the user selects the tab associated with that tabpanel.
• For a multi-selectable tablist, each tabpanel element that is visible SHOULD have its aria-expanded attribute set to true, and the remaining tabpanel elements SHOULD be hidden and their aria-expanded attributes SHOULD be set to false.

In either case, authors SHOULD ensure the currently active tab has its aria-selected attribute set to true while other tab elements SHOULD have aria-selected set to false, and the currently selected tab SHOULD provide visual indication that it is selected. In the absence of an aria-selected attribute on the current tab, user agents SHOULD indicate the currently active tab to assistive technology through the platform accessibility API.

A container for the resources associated with a tab.

Authors SHOULD associate a tabpanel element with its tab, either by using the aria-controls attribute on the tab to reference the tab panel, or by using the aria-labelledby attribute on the tab panel to reference the tab.

For detailed information about how to use tab panels, see the TabPanel widget design pattern in WAI-ARIA Best Practices [ARIA-PRACTICES].

A list of tab elements, which are references to tabpanel elements.

To be keyboard accessible, instances of this role SHOULD manage focus of descendants, as described in Managing Focus.

Input that allows free-form text as their value.

If the aria-multiline attribute is true, the widget accepts line breaks within the input, as in an HTML textarea. Otherwise this is a simple text box.

A numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point.

The text contents of the timer object indicate the current time measurement, and are updated as that amount changes. However, the timer value is not necessarily machine parsable. The text contents SHOULD be updated at fixed intervals, except when the timer is paused or reaches an end-point.

A timer is a form of live region. The default value of aria-live for timer is off.

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

The toolbar is often a subset of functions found in a menubar, designed to reduce user effort in using these functions.

To be keyboard accessible, instances of this role SHOULD manage focus of descendants, as described in Managing Focus.

A contextual popup that displays a description for an element in a mouse hover or keyboard focused state. Supplement to the normal tooltip processing of the user agent.

Objects with this role should be referenced through the use of aria-describedby by the time the tooltip is displayed.

A type of list that may contain sub-level nested groups that can be collapsed and expanded.

To be keyboard accessible, instances of this role SHOULD manage focus of descendants, as described in Managing Focus.

A grid whose rows can be expanded and collapsed in the same manner as for a tree.

A treegrid is considered editable unless otherwise specified. To make a treegrid read-only, set the aria-readonly attribute of the treegrid to true. The value of the treegrid element's aria-readonly attribute is implicitly propagated to all of its owned gridcell elements, and should be exposed through the accessibility API. An author may override an individual gridcell element's propagated aria-readonly value by setting the aria-readonly attribute on the gridcell.

To be keyboard accessible, instances of this role SHOULD manage focus of descendants, as described in Managing Focus.

An option item of a tree. This is an element within a tree that may be expanded or collapsed if it contains a sub-level group of treeitems.

A collection of treeitems to be expanded and collapsed are enclosed in an element with the group role.

An interactive component of a graphical user interface (GUI).

Widgets are discrete user interface objects with which the user can interact. Widget roles map to standard features in accessibility APIs.

Note: widget is an abstract role used for the ontology. Authors should not use this role in content.

A browser or application window.

Elements with this role have a window-like behavior in a graphical user interface (GUI) context, regardless of whether they are implemented as a native window in the operating system, or merely as a section of the document styled to look like a window.

Note: window is an abstract role used for the ontology. Authors should not use this role in content.