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.
Identify document landmarks.
Makes page structure explicit.
Enhances comprehension of page layout and content.
Enhances page navigation and usability.
Label form controls, where explicit text/graphical labels are unavailable.
Provide a description, based on one or more page elements, for an element or object.
Provide a label, based on one or more page elements, for an element or object.
Identify control states/conditions.
Tag Descriptions and Examples
ARIA roles may be used for the following functions:
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:
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.
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.
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.
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.
Note: The aria-controls attribute can include more than one element ID.
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:
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.