ARIA: What, Why and When

This page explains a few simple ARIA tags that can greatly enhance accessibility, usability and navigability for screen reader and screen magnification users. It also illustrates the ease with which accessibility can be incorporated into both new and legacy pages.

Tag Descriptions and Examples

ROLE

ARIA roles may be used for the following functions:



ARIA-LABEL

The aria-label attribute provides a programmatically associated label for elements and objects.


ARIA-DESCRIBEDBY

The aria-describedby attribute identifies the element(s) that comprise a programmatically associated description for an element. There are two techniques for creating the description for an element using the aria-describedby attribute:

  1. Include ID references for one or more elements.
  2. Enclose a set of elements with a container element referenced by its ID.

ARIA-LABELLEDBY

The aria-labelledby attribute identifies the element(s) that comprise a programmatically associated label for an element. Both the aria-labelledby and the aria-describedby attributes reference other elements to produce a structurally associated text alternative. However, the aria-labelledby attribute is used to produce a concise label, while the aria-describedby attribute is used to produce a more verbose description.

Note: The expected U.S. spelling of this property is "labeledby." However, the accessibility API mapping has established "labelledby" as the accepted standard.


ARIA-EXPANDED

Controls (i.e., buttons, links, tabs, checkboxes, etc.) may be used to expand and collapse corresponding content areas. The state of these elements is exposed to screen readers using the aria-expanded attribute.

  • aria-expanded="false" —element is collapsed.
  • aria-expanded="true" — element is expanded.

The attribute is set on the control, rather than the expanded/collapsed element.

A structural association between the control and the element is established by setting an aria-controls attribute to the ID of the top level element. This is particularly important when the element does not immediately follow the control in the DOM order.

ARIA-REQUIRED

Forms may include fields that require user input in order for the form to be processed. These required fields are often indicated by one or more non-programmatically determinable techniques:

  • text labels/symbols
  • icons
  • color
  • styling

Note: The first two techniques — text labels/symbols and icons — can be structurally associated with a field by including them, along with the field label, inside a <label for> element.

The aria-required attribute is used to inform screen reader users that a field is required. It does not effect the programmatic behavior of the element.