Defines the human readable text alternative of aria-valuenow for a range widget.

You should only set the aria-valuetext attribute when the value of a slider or progress bar cannot be accurately represented as a number.

For example, a slider might display values of small, medium, and large. In this case, the values of aria-valuenow could range from 1 through 3 to indicate the position of the slider, and the aria-valuetext could contain the equivalent size value to present to the user.

If the aria-valuetext attribute is set, authors should also set the aria-valuenow attribute, unless that value is unknown (for example, on an indeterminate progressbar).

Authors should only set the aria-valuetext attribute when the rendered value cannot be meaningfully represented as a number. For example, a slider may have rendered values of small, medium, and large. In this case, the values of aria-valuenow could range from 1 through 3, which indicate the position of each value in the value space, but the aria-valuetext would be one of the strings: small, medium, or large. 

If aria-valuetext is specified, assistive technologies should render that value instead of the value of aria-valuenow. If the aria-valuetext attribute is absent, the assistive technologies will rely solely on the aria-valuenow attribute for the current value.

Syntax

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

Sets or retrieves the current value of the element.

This property applies to elements with an aria role of progressbar, slider, or spinbutton.

The aria-valuemin and aria-valuemax properties together specify the allowable range of values, whereas the aria-valuenow property specifies the value currently selected.

If the current value is not known (for example, an indeterminate progress bar), the author should not  set the aria-valuenow attribute. If the aria-valuenow attribute is absent, no information is implied about the current value. If the aria-valuenow has a known maximum and minimum, the author should provide properties for aria-valuemax and aria-valuemin.

The value of aria-valuenow is a decimal number. If the range is a set of numeric values, then aria-valuenow is one of those values. For example, if the range is [0, 1], a validaria-valuenow is 0.5. A value outside the range, such as -2.5 or 1.1, is invalid.

For progressbar elements and scrollbar elements, assistive technologies should render the value to users as a percent, calculated as a position on the range from aria-valuemin to aria-valuemax if both are defined, otherwise the actual value with a percent indicator. For elements with role slider and spinbutton, assistive technologies should render the actual value to users.

When the rendered value cannot be accurately represented as a number, authors should use the aria-valuetext attribute in conjunction with aria-valuenow to provide a user-friendly representation of the range's current value. For example, a slider may have rendered values of small, medium, and large. In this case, the values of aria-valuenow could range from 1 through 3, which indicate the position of each value in the value space, but the aria-valuetext would be one of the strings: small, medium, or large.

Note: If aria-valuetext is specified, assistive technologies render that instead of the value of aria-valuenow.

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-valuenow="p" ... >
JavaScript
object.setAttribute("aria-valuenow",value);var value = object.getAttribute("aria-valuenow");

Sets or retrieves the minimum value that a user can provide.

The aria-valuemin and aria-valuemax properties together specify the allowable range of an entry field, whereas the aria-valuenow property specifies the value currently selected.

A range widget may start with a given value, which can be decreased until a minimum value, defined by this property, is reached.

Declaring the minimum and maximum values allows alternate devices to react to arrow keys, validate the current value, or simply let the user know the size of the range. If the aria-valuenow has a known maximum and minimum, the author should provide properties for aria-valuemax and aria-valuemin.

Authors must ensure the value of aria-valuemin is less than or equal to the value of aria-valuemax.

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-valuemin="p" ... >
JavaScript
object.setAttribute("aria-valuemin",value);var value = object.getAttribute("aria-valuemin");

Sets or retrieves the maximum value that a user can provide.

The aria-valuemin and aria-valuemax properties together specify the allowable range of an entry field, whereas the aria-valuenow property specifies the value currently selected.

A range widget may start with a given value, which can be increased until a maximum value, defined by this property, is reached.

Declaring the minimum and maximum values allows alternate devices to react to arrow keys, validate the current value, or simply let the user know the size of the range. If the aria-valuenow has a known maximum and minimum, the author should provide properties for aria-valuemax and aria-valuemin. Authors must ensure the value of aria-valuemax is greater than or equal to the value of aria-valuemin.

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-valuemax="p" ... >
JavaScript
object.setAttribute("aria-valuemax",value);var value = object.getAttribute("aria-valuemax");

Indicates if items in a table or grid are sorted in ascending or descending order.

Authors should only apply this property to table headers or grid headers. If the property is not provided, there is no defined sort order. For each table or grid, authors should apply aria-sort to only one header at a time.

Syntax

<element aria-sort="ascending|descending|none|other" ... /> 

Sets or retrieves the set size of this element. Not required if all elements in the set are present in the DOM.

This property is marked on the members of a set, not the container element that collects the members of the set. To orient the user by saying an element is "item X out of Y," the assistive technologies would use X equal to the aria-posinset attribute and Y equal to the aria-setsize attribute.

If all items in a set are present in the document structure, it is not necessary to set this property, 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 (in order to reduce document size), this property is needed to provide an explicit indication of set size.

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 should use aria-setsize in conjunction with aria-posinset.

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-setsize="p" ... >
JavaScript
object.setAttribute("aria-setsize",value);var value = object.getAttribute("aria-setsize");

Indicates that user input is required on the element before a form may be submitted.

The aria-required property indicates which input fields of a form must be filled in before it can be submitted. If the user attempts to submit the form without the required information, you may set aria-invalid to indicate the error.

For example, if the user needs to fill in an address field, the author will need to set the field's aria-required attribute to true.

Unless an exactly equivalent native attribute is available, host languages should allow authors to use the aria-required attribute on host language form elements that require input or selection by the user.

Note: The fact that the element is required is often presented visually (such as a sign or symbol after the widget). Using the aria-required attribute allows the author to explicitly convey to assistive technologies that an element is required.

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-required="p" ... >
JavaScript
object.setAttribute("aria-required",value);var value = object.getAttribute("aria-required");

Sets or retrieves which changes to a live region are relevant.

The aria-relevant setting gives a hint about what types of changes are relevant and should be announced by assistive technology. Any change that is not relevant should be treated as if the region had aria-live="off" and should not be announced.

This is used to describe semantically meaningful changes, as opposed to merely presentational ones. For example, nodes that are removed from the top of a log are merely removed for purposes of creating room for other entries, and the removal of them does not have meaning. However, in the case of a buddy list, removal of a buddy name indicates that they are no longer online, and this is a meaningful event. In that case aria-relevant will be set to all. When the aria-relevant attribute is not provided, the default value, additions text, indicates that text modifications and node additions are relevant, but that node removals are irrelevant.

aria-relevant is an optional attribute of live regions. This is a suggestion to assistive technologies, but assistive technologies are not required to present changes of all the relevant types.

Both accessibility APIs and Document Object Model Level 2 Events provide events to allow assistive technologies to determine changed areas of the document.

When aria-relevant is not defined, an element's value is inherited from the nearest ancestor with a defined value. Although the value is a token list, inherited values are not additive; the value provided on a descendant element completely overrides any inherited value from an ancestor element.

When text changes are denoted as relevant, user agents must monitor any descendant node change that affects the text alternative computation of the live region as if the accessible name were determined from contents (nameFrom: contents). For example, a text change would be triggered if the HTML alt attribute of a contained image changed. However, no change would be triggered if there was a text change to a node outside the live region, even if that node was referenced (via aria-labelledby) by an element contained in the live region.

Note: aria-relevant values of removals or all are to be used sparingly. Assistive technologies only need to be informed of content removal when its removal represents an important change, such as a buddy leaving a chat room.

Note: Text removals should only be considered relevant if one of the specified values is 'removals' or 'all'. For example, for a text change from 'foo' to 'bar' in a live region with a default aria-relevant value, the text addition ('bar') would be spoken, but the text removal ('foo') would not.

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-relevant="p" ... >
JavaScript
object.setAttribute("aria-relevant",value);var value = object.getAttribute("aria-relevant");