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 is used when the web page contains a portion or entire page that is declared to be a document. Assistive technologies should find this information and change the browse mode to a more appropriate mode that helps to interact more comfortably.

An email form is an example of document role. 

When the user navigates an element assigned the role of document, assistive technologies that typically intercept standard keyboard events should switch to document browsing mode, as opposed to passing keyboard events through to the 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, if coded in an accessible manner, all text will be semantically associated with focusable elements. An important trait of documents is that they have text which is not associated with widgets or groups thereof.

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 will appear in a region with a document role in order to use browsing navigation.

Authors should provide a title or label for documents. Authors should use label text that is suitable for use as a navigation preview or table-of-contents entry for the page section. Content authors should provide the label through one of the following methods:

• 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 both HTML and SVG. This has the effect of labeling the entire document.
• Otherwise, provide a visible label referenced by the document using aria-labelledby.

Currently there is not much support by screen readers for document role in any of the browsers.

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

A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. Form role is a landmark role.

A form may be a mix of host language form controls, scripted controls, and hyperlinks. Authors are reminded to use native host language semantics to create form controls, whenever possible.

For search facilities, authors should use the search role and not the generic form role. Authors should provide a visible label for the form referenced with aria-labelledby. If an author uses a script to submit a form based on a user action that would otherwise not trigger an onsubmit event (for example, a form submission triggered by the user changing a form element's value), the author should provide the user with advance notification of the behavior. Authors are reminded to use native host language semantics to create form controls, whenever possible.

User agents should treat elements with the role of form as navigational landmarks.

Syntax

<div role="form">
</div>

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

A grid (role) is used to present the elements in the required form such as tables, charts, tree items etc. A grid (role) can also be used to form a relation between the elements. For instance, to form a relation with the cells in a table a grid (role) is used. A grid is a table with rows and columns which can be editable. Each cell is considered to be a grid cell. The grid (role) and grid cell (role) form relationship with the group role. In tables, rowgroup (role) plays the similar role as group (role) to group the rows and the row (role) will be in charge for grouping the grid cells (role).

aria-owns (property) is used to form the relation between the parent element and its child element. In the above context, grid cells will be owned by rows, Rows will be owned by rowgroups and rowgroups will be owned by grid.

Generally, screen readers will recognize the data table as a table. Now arises the question, Why should we have a grid (role) for a table? grid (role) is used for interactive tables. Content authors can help screen readers by differentiating an interactive data table and a general data table by using grid (role).

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 technologies) for a presentational chart.

Authors must ensure that elements with role gridcell are owned by elements with role row, which in turn are owned by an element with role rowgroup, grid or treegrid. If the author applies any non-global aria states or properties to a native markup element that is acting as a row (such as the tr element in HTML), the author must also apply the role of row. Authors may make cells focusable. Authors may provide row and column headers for grids, by using rowheader and columnheader roles.

Since aria can augment an element in the host language, grids can reuse existing functionality of native table grids. When aria grid or gridcell roles overlay host language table elements, they reuse the host language semantics for that table. For instance, aria does not specify general attributes for gridcell elements that span multiple rows or columns. When the author needs a gridcell to span multiple rows or columns, use the host language markup, such as the colspan and rowspan attributes in HTML.

Authors may determine the contents of a gridcell through calculation of a mathematical formula. Authors may make a cell's formula editable by the user. In a spreadsheet application, for example, the text alternative of a cell may be the calculated value of a formula. However, when the cell is being edited, the text alternative may be the formula itself.

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 will 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, authors should  manage focus of descendants for all instances of this role.

Wherever possible, use the host mark-up to form relations adding aria roles and properties to aid the users of assistive technologies.

A cell in a grid or treegrid.

Gridcell (role) is an element within the table or tree structure. As explained in the grid (role), gridcells will form a relation with their nearest possible parent element. In the table example, gridcells are owned by <tr> or row (role) to form a parent/child relation.

Use aria-selected (state) to inform the user about the selected or non-selected state of the gridcell. If the gridcell is non-editable, also use aria-readonly (property) to intimate the same to a screen reader user. In a tree structure, if the gridcell has the expand/collapse functionality, use aria-expanded (state) to intimate the same to the screen reader user.

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

If relevant headers cannot be determined from the DOM structure, authors should explicitly indicate which header cells are relevant to the cell by referencing elements with rolerowheader or columnheader using the aria-describedby attribute.

In a treegrid, authors may define cells as expandable by using 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.

Authors must ensure elements with role gridcell are contained in, or owned by, an element with the role row.

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

A group (role) is used to combine a set of logically related elements. The group (role) should be used to group similar elements while the region (role) or landmark (role) is used to group the portions of the page. Group (role) is used to relate the similar items of a tree widget, limit to list items in a HTML list etc. Group (role) relates the child elements which are siblings. Row (role), rowgroup (role) are similar types of aria roles which form a logical relation in a grid or table widgets.

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

Authors should use a group to form 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. However, when a group is used in the context of list, authors must limit its children to listitem elements. Therefore, proper handling of group by authors and assistive technologies is determined by the context in which it is provided.

Authors may nest group elements. If a section is significant enough to warrant inclusion in the web page's table of contents, the author should assign the section a role of region or a standard landmark role.

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 can be used to indicate the nesting level.

Need may arise such that you want to code some content in the page as a paragraph tag, div or a span but you want screen reader to pick it as a heading. In such scenarios provide role="heading" to the HTML element. The next part of the heading is its level. For providing the level to the heading use aria-level (property). The levels can be from one to six.

The following span will be read as heading level 2 by screen readers.

<span role="heading" aria-level="2">This is a span tag</span>

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 image objects. In order for elements with a role of img to be perceivable, authors must provide alternative text or a label determined by the accessible name calculation.

Syntax

<div role="img" alt="alternate text for the group">
<div>Elements of the group</div>
</div>

A generic type of widget that allows user input.

A region of the page intended as a navigational landmark.

Assistive technologies should allow the user to quickly navigate to landmark regions. Mainstream user agents may allow the user to quickly navigate to landmark regions.

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