Communicate Relationships Between Elements to AT Users

People who use assistive technologies will need to know when there are relationships between elements on a web page to fully understand the content of the web page. For instance, an assistive technology user needs to know the relationship between a tab and its corresponding tabpanel. While sometimes context and relationships can be determined from the code order or DOM, there are times when relationships cannot be determined from the document's structure because the hierarchy may be different from the code order or the DOM tree. When this occurs, ARIA relationship properties can be used to provide information the necessary information about relationships when it is not apparent from the code structure.

ARIA Properties for Relationships

A few of the common ARIA properties that can be used to express relationships are:

aria-controls: This property identifies an element that is being controlled by the current element by using an ID reference or ID references. Examples include:
- A tab that controls the display of its tabpanel
- A button that is used to expand content on a web page
- Checkboxes that control what content is displayed in a region
aria-owns: This property identifies the parent/child relationship between elements that cannot be determined from the DOM order using an ID reference list. For example, if table cells were used to for layout to organize radio buttons, aria-owns can be used to identify the relationship between the radiogroup and the radio buttons *Note: aria-owns should only be used when the relationship cannot be determined from the DOM.
aria-describedby: This property identifies additional information about an element that cannot be included in the element itself using an ID reference or ID references. One example where aria-describedby can apply is providing special instructions for a form field. An id is given to the element where the special instructions are contained, and aria-describedby is placed on the input element and references the id assigned to the special instructions.

For more information about ARIA properties, visit W3C's documentation on ARIA States and Properties.