Indicates that the element has a popup context menu or sub-level menu.

This means that activation renders conditional content. Note that ordinary tooltips are not considered popups in this context.

A popup is generally presented visually as a group of items that appears to be on top of the main page content.

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

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

This property defines element relationships and associations that cannot be readily determined from the document structure.

When the aria-flowto property contains a single ID property, the assistive technology should resume reading at the targeted element. However, when the aria-flowto property contains multiple ID properties, the assistive technology should give users the option of navigating to any targeted element.

In the case of one or more IDREFS, user agents or assistive technologies should give the user the option of navigating to any of the targeted elements. The name of the path can be determined by the name of the target element of the aria-flowto attribute. Accessibility APIs can provide named path relationships.

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

aria-disabled

Indicates what functions can be performed when the dragged object is released on the drop target.

The aria-dropeffect attribute allows assistive technologies to convey the possible drag options available to users, including whether a pop-up menu of choices is provided by the application. Typically, drop effect functions can only be provided once an object has been grabbed for a drag operation as the drop effect functions available are dependent on the object being dragged.

More than one drop effect may be supported for a given element. Therefore, the value of this attribute is a space-delimited set of tokens indicating the possible effects, or none if there is no supported operation. In addition to setting the aria-dropeffect attribute, authors should show a visual indication of potential drop targets.

Syntax

<element aria-dropeffect="copy|move|link|execute|popup|none" ... /> 

Identifies the element (or elements) that describes the object.

Aria-describedby is used when the content provided by the HTML tags is not sufficient to explain complete information to the user. For example, instructions for a form element, “Read more” as a link description is not sufficient to explain where the link targets to unless the user have some content surrounding. Sometimes the alternate text of the image is not sufficient to explain what the image has to say. In these situations aria-describedby will help in providing the additional information.

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. The aria-describedby property is intended to provide additional information which some users might need, and supplements the basic information provided by label.

The element or elements referenced by the aria-describedby comprise the entire description. Include ID references to multiple elements if necessary, or enclose a set of elements (e.g., paragraphs) with the element referenced by the ID. If more than one ID property is specified, all elements are combined together to create a single description.

Some scenarios where aria-describedby is beneficial

• Instructions for form elements.
• Additional description for links.
• Additional information for images.

Using aria-describedby

Set a reference id to the element from which the content has to be extracted. 

<p id=”inst1”>The user name should be at least 8 characters.</p>

In the above example “inst1” is the id of the paragraph where the instruction is placed.

Using aria-describedby, call this content in the target element where you need the additional information with the reference id.

<label for=”uname”>User Name</label>
<input type=”text” id=”uname” aria-describedby=”inst1” />

In the above example, aria-describedby receives the information from the paragraph with the reference id and presents it to the user at the form element.

If the content needs to be extracted from different sources, use the procedure with a space between the ids.

The screen reader reads the instruction provided in the paragraph tag above along with the text field. This aria-describedby property can be used along with most of the html elements.

Note: Use the tab key for links and form elements to read out the information provided in the aria-describedby while navigating with NVDA or JAWS.

When aria-describedby is used along with images or any non-focusable elements use screen reader short-cuts such as “G” for images. Using JAWS the content in aria-describedby can be read by using the short-cut command JAWS (insert) key + alt + r to read the descriptive text (works best in Firefox). Safari on IOS also has good support for aria-describedby.

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

Identifies the element (or elements) whose contents or presence are controlled by the current element.

ARIA-controls property provides a relation between a parent element and the child element.

For example, to relate tabs and tabpannels, menus and menuitem etc and to pass on the information perfectly to the screen reader users ARIA-controls is used. ARIA-controls use the id of the child element in the parent element to relate each other. 

Example

<ul class="tablist" role="tablist"> 
<li id="tab1" class="tab" aria-controls="panel1" role="tab">Fruits</li> 
<li id="tab2" class="tab" aria-controls="panel2" role="tab">Vegetables </li> 
</ul> 
<div id="panel1" aria-labelledby="tab1" role="tabpanel"> 
<h3>Fruits</h3> 
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
</div> 
<div id="panel2" aria-labelledby="tab2" role="tabpanel"> 
<h3>Vegetables</h3> 
<ul>
<li>Potato</li>
<li>Tomato</li>
<li>Carrot</li>
</ul>
</div>

In the above example, tab 1 (Fruits) controls tabpanel 1 and tab 2 (Vegetables) controls tabpanel 2. ARIA-controls is used in the tab with the id of tabpanel. In addition to ARIA-controls, ARIA roles such as tab, tabpanel, tablist roles are used to notify the user that the list items are tabs. ARIA-labelledby property notifies the label of the tabpanel.

In certain cases, the parent element may control more than one child element. Using the list of id references with ARIA-controls property, the parent element can control all of its child elements.

The aria-controls property is used primarily by elements where the role property value is group, region, or widget. Compare this usage with that of the aria-owns property.

For example:

• A table of contents tree view may control the content of a neighboring document pane.
• A group of checkboxes may control what commodity prices are tracked live in a table or graph.
• A tab controls the display of its associated tab panel.

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

Indicates whether user input completion suggestions are provided.

An aria-autocomplete property is used when the suggestions of user input items are known. 

To intimate the user that the text fields are not just text fields use aria-haspopup="true". Role="combobox" can also be used to provide an essence of a list items available along with the text field. Provide aria-readonly="true" when the author does not want the user to type in text field and only pick the option from the list available. It is used when the text field have aria-autocomplete="list". For aria-autocomplete="inline", aria-autocomplete="both" and of course for aria-autocomplete="none" aria-readonly should not be used or should be aria-readonly="false".

aria-autocomplete property has good support with JAWS 14 on Internet explorer 9, latest browsers of Google Chrome and Firefox. With NVDA 2013.3 Google Chrome has good support while remaining two browsers have partial support.

For a textbox with the aria-autocomplete attribute set to either inline or both, authors should ensure that any auto-completed text is selected, so the user can type over it.

Syntax

<element aria-autocomplete="inline|list|both|none" ... /> 

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

The aria-atomic property is used along with aria-live property when the page contains live regions.

On a web page when auto-updating content such as live chat widget is available, the content frequently gets updated. In this scenario, users need to know only the updated content that means the recently received message but not the entire chat content. In certain scenarios, it does not make sense if only the updated sentence or line is captured by assistive technologies. aria-atomic is used when entire live region should be intimated to the user.

Example 

<div aria-live=”polite” aria-atomic=”true”> 
<h3>the current score is</h3> 
<span>23/0 after 5 Overs</span> 
</div>

In the above content, only the sentence in the span tag will update frequently but it does not make sense on its own. So aria-atomic is used to capture the statement before the span as well. ARIA-atomic should be set to true for the assistive technologies to get the information of the entire live region. aria-relevant property will be used if only a portion of the live region needs to be intimated to the assistive technologies.

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

When the content of a live region changes, user agents should examine the changed element and traverse the ancestors to find the first element with aria-atomic set, and apply the appropriate behavior for the cases below.

1. If none of the ancestors have explicitly set aria-atomic, the default is that aria-atomic is false, and assistive technologies will only present the changed node to the user.
2. If aria-atomic is explicitly set to false, assistive technologies will stop searching up the ancestor chain and present only the changed node to the user.
3. If aria-atomic is explicitly set to true, assistive technologies will present the entire contents of the element.

When aria-atomic is true, assistive technologies may choose to combine several changes and present the entire changed region at once.

Syntax

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

Identifies the currently active descendant of a composite widget.

Sets or retrieves the currently active child element.

This is used when a composite widget is responsible for managing its current active child to reduce the overhead of having all children be focusable. Examples include: multi-level lists, trees, and grids. In some implementations the user agent may use aria-activedescendant to tell assistive technologies that the active descendant has focus. Authors may use the aria-activedescendant attribute on the focused descendant of a composite widget; for example, on a textbox descendant of a combo box.

Authors should ensure that the element targeted by the aria-activedescendant attribute is either a descendant of the container in the DOM, or is a logical descendant as indicated by the aria-owns attribute. The user agent is not expected to validate that the active descendant is a descendant of the container. Authors should ensure that the currently active descendant is visible and in view (or scrolls into view) when focused.

To simplify keyboard navigation, an element that gains focus may specify the currently active child element by ID. The container element should change the designated descendant during a keypress event. The container should also ensure that the current child has a style that visibly shows it is active, such as an outline or different background color.

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

Sets or retrieves the selection state of the element.

This attribute is used with single-selection and multiple-selection widgets:

1. Single-selection containers where the currently focused item is not selected. The selection normally follows the focus, and is managed by the user agent.
2. Multiple-selection containers. Authors should ensure that any selectable descendant of a container in which the aria-multiselectable attribute is true specifies a value of either true or false for the aria-selected attribute.

Any explicit assignment of aria-selected takes precedence over the implicit selection based on focus. If no DOM element in the widget is explicitly marked as selected, assistive technologies may convey implicit selection which follows the keyboard focus of the managed focus widget. If any DOM element in the widget is explicitly marked as selected, the user agent must not convey implicit selection for the widget.

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

Sets or retrieves the pressed state of a button that can be toggled.

Buttons with a defined aria-pressed state can be toggled. (When aria-pressed is true the button is down, when false it is up.) Simple command buttons should not define a aria-pressed state.

Toggle buttons require a full press-and-release cycle to change their value. Activating it once changes the value to true, and activating it another time changes the value back to false. A value of mixed means that the values of more than one item controlled by the button do not all share the same value.  If the attribute is not present, the button is not a toggle button.

The aria-pressed attribute is similar but not identical to the aria-checked attribute. Operating systems support pressed on buttons and checked on checkboxes.

Note  The presence of the aria-pressed attribute affects the behavior of accessibility and automation tools. The attribute should not be used carelessly.

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