Sets or retrieves the read-only state of this element.

This means the user can read but not set the value of the widget. Readonly elements are relevant to the user, and application authors should not restrict navigation to the element or its focusable descendants. Other actions such as copying the value of the element are also supported. This is in contrast to disabled elements, to which applications might not allow user navigation to descendants.

Examples include:

• A form element which represents a constant.
• Row or column headers in a spreadsheet grid.
• The result of a calculation such as a shopping cart total.

Note  For cross-browser compatibility, always use the WAI-ARIA attribute syntax to access and modify ARIA properties, for example object.setAttribute("aria-valuenow", newValue).

Syntax

HTML
<element aria-readonly="p" ... >
JavaScript
object.setAttribute("aria-readonly",value);var value = object.getAttribute("aria-readonly");

Sets or retrieves the current position of an item within a set. Not required if all elements in the set are present in the DOM.

If all items in a set are present in the document structure, it is not necessary to set this attribute, as the user agent can automatically calculate the set size and position for each item. However, if only a portion of the set is present in the document structure at a given moment, this property is needed to provide an explicit indication of an element's position.

The following example shows items 5 through 8 in a set of 16.

<h2 id="label_fruit"> Available Fruit </h2>
<ul role="listbox" aria-labelledby="label_fruit">
  <li role="option" aria-setsize="16" aria-posinset="5"> apples </li>
  <li role="option" aria-setsize="16" aria-posinset="6"> bananas </li>
  <li role="option" aria-setsize="16" aria-posinset="7"> cantaloupes </li>
  <li role="option" aria-setsize="16" aria-posinset="8"> dates </li>
</ul>

Authors must set the value for aria-posinset to an integer greater than or equal to 1, and less than or equal to the size of the set. Authors should use aria-posinset in conjunction with aria-setsize.

Note  For cross-browser compatibility, always use the WAI-ARIA attribute syntax to access and modify ARIA properties, for example object.setAttribute("aria-valuenow", newValue).

Syntax

HTML
<element aria-posinset="p" ... >
JavaScript
object.setAttribute("aria-posinset",value);var value = object.getAttribute("aria-posinset");

Sets or retrieves a list of child objects, including elements that are not direct descendants of the current object.

The value of the aria-owns attribute is a space-separated list of IDREFS that reference one or more elements in the document by ID. This property defines element relationships and associations that cannot be readily determined from the document structure.

Authors should not use aria-owns as a replacement for the DOM hierarchy. If the relationship is represented in the DOM, do not use aria-owns. Authors must ensure that an element's ID is not specified in more than one other element's aria-owns attribute at any time. In other words, an element can have only one explicit owner.

Note  For cross-browser compatibility, always use the WAI-ARIA attribute syntax to access and modify ARIA properties, for example object.setAttribute("aria-valuenow", newValue).

Syntax

HTML
<element aria-owns="p" ... >
JavaScript
object.setAttribute("aria-owns",value);var value = object.getAttribute("aria-owns");

Indicates whether the element and orientation is horizontal or vertical.

Syntax

<element aria-orientation="horizontal|vertical" ... /> 

Indicates that the user may select more than one item from the current selectable descendants.

This property indicates whether a user may select more then one item from the current list. Lists, trees, and grids may allow users to select more than one item.

Authors should ensure that selected descendants have the aria-selected attribute set to true, and selectable descendant have the aria-selected attribute set to false. Authors should not use the aria-selected attribute on descendants that are not selectable.

Note  For cross-browser compatibility, always use the aria attribute syntax to access and modify aria properties, for example object.setAttribute("aria-valuenow", newValue).

Syntax

HTML
<element aria-multiselectable="p" ... >
JavaScript
object.setAttribute("aria-multiselectable",value);var value = object.getAttribute("aria-multiselectable");

Indicates whether a text box accepts multiple lines of input or only a single line.

The default behavior of the Enter key depends on whether you type it into a single-line < input type=text> element (submit the form) or a multi-line < textarea> element (insert a new line). You can apply these same default behaviors to the textbox role by using the aria-multiline attribute.

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 element, the keystroke usually submits the form. When user has focus in a multi-line  element, the keystroke inserts a line break. The WAI-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.

Syntax

<element aria-multiline="true|false" ... /> 

Sets or retrieves how assistive technology announces updates to live regions.

Web 2.0, unlike the traditional static web pages, modern websites have dynamic, auto-updating content. Websites which shows the scores of live matches, stocks that update very often, online news websites showing the headlines fall in this category.

Only a small portion of the website is updated frequently. The entire page is not refreshed. The region that is updated according to the change is called as the live region.

aria-live is used when such live regions are available on the web page. Assistive technologies such as screen readers recognize the updated content with the aria-live property of the live region.

The changes of the live region is intimated to the user depending on the politeness levels. The politeness of the live region decides how the updated information should be intimated to the user. 

aria-live="off"

This is the default behavior. No changes in the live region is intimated to the user when aria-live is set to "off". aria-live="off" is used when the changes are expected very frequently and such information is not necessary to intimate to the user. However, the changes are announced to the user if the current focus of the screen reader is on the updating content.

Eg: GPS coordinates of a moving vehicle.

aria-live="polite"

This politeness level is used when the user is not doing anything or when the user is waiting for the update to happen. If the user is busy with other tasks on the page, the screen reader will not interrupt to provide the updated content of the live region.

Eg: Changes of the headlines in the news website.

aria-live="assertive"

Assertive is used when the user should be intimated about the updated information when the live region is changed. The update is provided to the user, interrupting the current task. Use aria-live="assertive" when you think the user needs to know the information the very second it appears. To say in other words, high priority updates will be marked as aria-live="assertive".

Eg: Validations of the form fields on the fly.

aria-live="rude"

aria-live="rude" is used for most critical updates. It forces the user to read the updated region as immediately as the update happens.

How do Screen readers catch aria-live

• aria-live="off" is supported by all major screen readers. Working perfectly with NVDA on Firefox, JAWS on Firefox and Internet Explorer, Voiceover on IOS.
• aria-live="polite" is supported by all major screen readers. Working perfectly with NVDA on Firefox, JAWS on Firefox and Internet Explorer, Voiceover on IOS.
• aria-live="assertive" is working as expected only with voiceover on IOS. NVDA and JAWS is not interrupting with the updated content if the user is in any other task.
• aria-live="rude" is working as expected with JAWS on Firefox and Internet Explorer but not with NVDA and voiceover.

Note: Voiceover on IOS reads the previous message along with the currently updated message.

Politeness levels are essentially an ordering mechanism for updates and serve as a strong suggestion to user agents or assistive technologies. The value may be overridden by user agents, assistive technologies, or the user. For example, if assistive technologies can determine that a change occurred in response to a key press or a mouse click, the assistive technologies may present that change immediately even if the value of the aria-live attribute states otherwise.

Since different users have different needs, it is up to the user to tweak his or her assistive technologies' response to a live region with a certain politeness level from the commonly defined baseline. Assistive technologies may choose to implement increasing and decreasing levels of granularity so that the user can exercise control over queues and interruptions.

When the property is not set on an object that needs to send updates, the politeness level is the value of the nearest ancestor that sets the aria-live attribute.

The aria-live attribute is the primary determination for the order of presentation of changes to live regions. Implementations will also consider the default level of politeness in a role when the aria-live attribute is not set in the ancestor chain (e.g., log changes are polite by default).

Items which are assertive will be presented immediately, followed by polite items. User agents or assistive technologies may choose to clear queued changes when an assertive change occurs. (e.g., changes in an assertive region may remove all currently queued changes)

Syntax

HTML
<element aria-live="p" ... >
JavaScript
object.setAttribute("aria-live",value);var value = object.getAttribute("aria-live");

Defines the hierarchical level of an element within a structure.

This can be applied inside trees to tree items, to headings inside a document, to nested grids, nested tablists and to other structural items that may appear inside a container or participate in an ownership hierarchy. The value for aria-level is an integer greater than or equal to 1.

This property indicates the level of an element within a structure. The level value is 1 or greater.

Levels increase with depth. If the DOM ancestry does not accurately represent the level, authors should explicitly define the aria-level attribute.

This attribute is applied to elements that act as leaf nodes within the orientation of the set, for example, on elements with role treeitem rather than elements with role group. This means that multiple elements in a set may have the same value for this attribute. Although it would be less repetitive to provide a single value on the container, restricting this to leaf nodes ensures that there is a single way for assistive technologies to use the attribute.

If the DOM ancestry accurately represents the level, the user agent can calculate the level of an item from the document structure. This attribute can be used to provide an explicit indication of the level when that is not possible to calculate from the document structure or the aria-owns attribute. User agent support for automatic calculation of level may vary; authors should test with user agents and assistive technologies to determine whether this attribute is needed. If the author intends for the user agent to calculate the level, the author should omit this attribute.

Note: In the case of a treegrid, aria-level is supported on elements with the role row, not elements with role gridcell. At first glance, this may seem inconsistent with the application of aria-level on treeitem elements, but it is consistent in that the row acts as the leaf node within the vertical orientation of the grid, whereas the gridcell is a leaf node within the horizontal orientation of each row. Level is not supported on sets of cells within rows, so the aria-level attribute is applied to the element with the role row.

Note  For cross-browser compatibility, always use the WAI-ARIA attribute syntax to access and modify ARIA properties, for example object.setAttribute("aria-valuenow", newValue).

Syntax

HTML
<element aria-level="p" ... >
JavaScript
object.setAttribute("aria-level",value);var value = object.getAttribute("aria-level");

Identifies the element (or elements) that labels the current element.

The purpose of aria-labelledby is the same as that of aria-label. It provides the user with a recognizable name of the object. The most common accessibility API mapping for a label is the accessible name property.

One or more ID properties may be specified. A list of ID properties is returned by Microsoft UI Automation.

In addition to providing the ariaLabelledby property, you should also use a label element to indicate a label for previous versions of the browser.

If the label text is visible on screen, authors should use aria-labelledby and should not use aria-label. Use aria-label only if the interface is such that it is not possible to have a visible label on the screen. As required by the text alternative computation, user agents give precedence to aria-labelledby over aria-label when computing the accessible name property.

The aria-labelledby attribute is similar to aria-describedby in that both reference other elements to calculate a text alternative, but a label should be concise, where a description is intended to provide more verbose information.

Note  Recursive use of ariaLabelledby is not supported. An element that is using ariaLabelledby should not reference another element that is also using ariaLabelledby.

Note  For cross-browser compatibility, always use the ARIA attribute syntax to access and modify ARIA properties, for example object.setAttribute("aria-valuenow", newValue).

Syntax

HTML
<element aria-labelledby="p" ... >
JavaScript
object.setAttribute("aria-labelledby",value);var value = object.getAttribute("aria-labelledby");

Defines a string value that labels the current element.

The purpose of aria-label is the same as that of aria-labelledby. It provides the user with a recognizable name of the object. The most common accessibility API mapping for a label is the accessible name property.

The aria-label attribute can be used when:

• the name of an element cannot be determined programmatically from the content of the element
• providing a visible label and/or tooltip is not the desired user experience

If the label text is visible on screen, authors should use aria-labelledby and should not use aria-label. There may be instances where the name of an element cannot be determined programmatically from the content of the element, and there are cases where providing a visible label is not the desired user experience.

Most host languages provide an attribute that could be used to name the element (e.g., the title attribute in HTML, yet this could present a browser tooltip. In the cases where a visible label or visible tooltip is undesirable, authors may set the accessible name of the element using aria-label. As required by the text alternative computation, user agents give precedence to aria-labelledby over aria-label when computing the accessible name property.

Syntax

<element aria-label="..." ... />