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

This is a visual separator between sections of content. For example, separators are found between groups of menu items in a menu or as the movable separator between two regions in a split pane.

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

A slider role is used to represent a slider on a web page. A slider is used to select a value from available values. For example to select volume from 0% to 100%. The minimum and maximum values of the slider can be intimated to the screen reader user using "aria-valuemin" and "aria-valuemax" while the current value is represented using "aria-valuenow".

Content developers are advised to provide the option for increasing and decreasing the values of the slider using the keyboard arrow keys. The left/ down arrow key should be assigned to decrease the value while right/ up arrow keys should increase the value. Home and End keys should help the user to jump directly to minimum and maximum values possible. Page up and Page down should allow the user to jump denominations in bulk.

A form of range that expects the user to select from among discrete choices.

A spinbutton role is used when a range of options are available for the user to select from. To select an item from a number of options, a combo box can also be used, but a spin button helps to represent a large range.

Authors should ensure this functionality is accomplished programmatically through the use of up and down arrows on the keyboard. Usually the up-arrow key/ right arrow key increases the value while the down arrow key/ left arrow key decreases the value. Visibly, the current value is incremented or decremented until a maximum or minimum value is reached. 

It is better to provide an option to jump bulk numbers with a keyboard navigation key if the range is too high. If up-arrow key increases the value by one, a page-up key can increase the value by ten so that the user can quickly change the values when the numbers are high. Similar options can also be provided for decreasing the values. Home key can navigate the user to the first value in the range while the end key on the keyboard takes the user to the last value of the spin button.

Represent the minimum possible value by aria-valuemin, maximum value by aria-valuemax, while the current value is represented by aria-valuenow.

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, often but not necessarily presented as a status bar.

The status role is marked for the container that provides an information to the user as an alert. The status role is similar to an alert role. The difference is, a status role is marked to the container whose content is useful for the user but not important to inform immediately, whereas the alert role is marked for the content that needs immediate attention.

Authors must provide status information content within an element with role status. Authors should ensure this object does not receive focus.

Status role is usually used for a live region. If another part of the page controls what appears in the status, authors should make the relationship explicit with the aria-controls attribute.

Assistive technologies may reserve some cells of a Braille display to render the status.

Microsoft Active Accessibility accRole Property: 

A document structural element.

Roles for document structure support the accessibility of dynamic web content by helping assistive technologies determine active content versus 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 are instructed not to use this role in content.

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

A tab (role) is used to represent the tab item in a tab panel. Screen readers are expected to jump to a more comfortable mode than virtual mode to access the tab panels, for informing the screen reader user about this change, role application is used. The active tab is notified to the user using aria-selected="true". The element that has tab role is owned by tablist role and the same is notified using aria-owns attribute.

Authors should ensure the tabpanel associated with the currently active tab is perceivable to the user. The association can be made available to the user with aria-labelledby property or aria-controls property.

If a tabpanel or item in a tabpanel has focus, the associated tab is the currently active tab in the tablist. tablist elements, which contain a set of associated tab elements, are typically placed near a series of tabpanel elements, usually preceding it. 

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

Authors should ensure the tabpanel associated with the currently active tab is perceivable to the user.

For a single-selectable tablist, authors should hide other tabpanel elements from the user until the user selects the tab associated with that tabpanel. For a multi-selectable tablist, authors should ensure each visible tabpanel has its aria-expanded attribute set to true, and that the remaining hidden tabpanel elements have their aria-expanded attributes set to false.

In either case, authors should ensure that a selected tab has its aria-selected attribute set to true, that inactive tab elements have their aria-selected attribute set to false, and that the currently selected tab provides a visual indication that it is selected. In the absence of an aria-selected attribute on the current tab, user agents should indicate to assistive technologies through the platform accessibility API that the currently focused tab is selected.

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

A tablist role is assigned to the container that holds the tab elements. All the tablists are referenced by tabpannel. The tab role elements are owned by tablist elements. Tablist elements are typically placed near, usually preceding, a series of tabpanel elements.

To be keyboard accessible, authors should manage focus of descendants for all instances of this role.

For a single-selectable tablist, authors should hide other tabpanel elements from the user until the user selects the tab associated with that tabpanel. For a multi-selectabletablist, authors should ensure each visible tabpanel has its aria-expanded attribute set to true, and that the remaining hidden tabpanel elements have their aria-expanded attributes set to false.

tablist elements are typically placed near, usually preceding, a series of tabpanel elements.

A container for the resources associated with a tab, where each tab is contained in a tablist.

A tabpanel role is assigned to the elements that holds the tabs which are contained in tablist. 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.

tablist elements are typically placed near, usually preceding, a series of tabpanel elements. 

Input that allows free-form text as its value.

A textbox role is assigned to the element which allows the user to type some text into the field. In normal HTML semantics, this is achieved using input type="text". If this information is not intimated to the user in a different way and screen readers do not recognize it, the textbox role can be used.

Usually a textbox provides a possibility to have a single line of text and on hitting Enter submits the form. To have more lines of text input, type="textarea" is used. The same can be achieved with multiline property of aria. Set aria-multiline to true.

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. The intended use is for languages that do not have a text input element, or cases in which an element with different semantics is repurposed as a text field.

Note: In most user agent implementations, the default behavior of the Enter or Return key is different between the single-line and multi-line text fields in HTML. When user has focus in a single-line input type="text" element, the keystroke usually submits the form. When user has focus in a multi-line textarea element, the keystroke inserts a line break. The aria textbox role differentiates these types of boxes with the aria-multiline attribute, so authors are advised to be aware of this distinction when designing the field.

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.

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

Note: Elements with the role timer maintain the default aria-live value of off.