This page explains a few 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-LABEL
ARIA-LABELLEDBY
ARIA-DESCRIBEDBY
ARIA-EXPANDED
ARIA-REQUIRED
ROLE
ARIA roles may be used for the following functions:
Convey Web Page Structure:
Identification of page regions.
Provide navigational landmarks.
Identify Elements, Objects and Widgets.
Define Page Element Function/Purpose.
Region Landmarks
Element Identification
Element Role
ARIA-LABEL
The aria-label attribute provides a programmatically associated label for elements and objects.
Use to identify elements and objects when no text or graphical content label is present. Note:
The aria-label attribute may be disregarded by assistive technologies when aria-labelledby is used for the same element.
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-labelledby
Uses element ID attributes to comprise a label.
Use when referenced element(s) appear on-screen.
Use when the label for an element changes based on user input.
aria-label
Uses a text string as the label.
Use when an on-screen label is not available.
Use when the label for an element is static.
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:
Include ID references for one or more elements.
Enclose a set of elements with a container element referenced by its ID.
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-controls="elementID"
Note: The aria-controls attribute can include more than one element ID.
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.