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-ownscan be used to identify the relationship between the radiogroup and the radio buttons *Note:
aria-ownsshould 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-describedbycan apply is providing special instructions for a form field. An
idis given to the element where the special instructions are contained, and
aria-describedbyis placed on the input element and references the
idassigned to the special instructions.
For more information about ARIA properties, visit W3C's documentation on ARIA States and Properties.