ARIA

Estimated reading time: ( words)

Summary: ARIA provides a method for the developer to connect two objects that lets the assistive technology know when one item is controlling another item. ARIA is comprised of HTML tags.

Many times the functionality of an item isn’t clear from the HTML. For example:

<div>
     <div id="ch1" class=”thingie”>Chapter 1</div>
     <div id="ch2" class=”thingie”>Chapter 2</div>
     <div id="ch3” class=”other_thingie”>Chapter 3</div>
</div>

It could be just about anything once CSS and JavaScript are applied. ARIA attributes provide additional information about objects to allow adaptive technologies to understand their purpose and function.

ARIA roles

Along with marking landmarks, the role attribute can be used to determine the functionality of an object. For example, here is how you would code a set to tabs:

<div role=”tablist”>
     <div role=”tab” id="ch1" class=”thingie”>Chapter 1</div>
     <div role=”tab” id="ch2" class=”thingie”>Chapter 2</div>
     <div role=”tab” id="ch3” class=”other_thingie”>Chapter 3</div>
</div>
<div role=”tabpanel”>Chapter 1 information</div>

Here is another example of how you would code a “close” button where JavaScript is used to make the item actionable:

<div role=”button” class”myCloseButton”>Close</div>

W3C provides a list of available roles

ARIA controls

ARIA provides a method for the developer to connect two objects that lets the assistive technology know when one item is controlling another item. For example when a user clicks on a tab, the content associated with that tab is revealed or otherwise changes in some way.

This connection can be coded with the aria-controls attribute. Set the value of the aria-controls attribute to the ID of the object it controls.

<div role=”tablist>
     <div role=”tab” aria-controls="ch1Content" id="ch1" class=”thingie”>Chapter 1</div>
     <div role=”tab” id="ch2" class=”thingie”>Chapter 2</div>
     <div role=”tab” id="ch3” class=”other_thingie”>Chapter 3</div>
</div>
<div role=”tabpanel” id=”ch1Content”>Chapter 1 information</div>

 

ARIA labels

With the aria-label and aria-labeled by attributes, you can assign any object an appropriate label, to be read by the assistive technology when the user arrives at that item.

For example, when the user arrives at the content for a tab, the tab name should be used as a label. If you don’t do this properly, some adaptive technology users won’t understand the context of the code; the content will be read without knowing what it pertains to. 

You can code the connection using the aria-labelledby attribute. The value of the aria-labelledby attribute is the id of the corresponding label.

<div role=”tablist>
     <div role=”tab” aria-controls="ch1Content" id="ch1" class=”thingie”>Chapter 1</div>
     <div role=”tab” id="ch2" class=”thingie”>Chapter 2</div>
     <div role=”tab” id="ch3” class=”other_thingie”>Chapter 3</div>
</div>
<div role=”tabpanel” aria-labelledby=”ch1” id=”ch1Content”>Chapter 1 information</div>

If there isn’t already an appropriate label in the html, the aria-label attribute can be set as a label. In the following example, the aria-label attribute is used to label a close button:

<button aria-label="Close" >X</button>

 

States

CSS often is used to designate the state of an object. For example, a CSS class might be applied to a tab that shows it is the currently selected tab. Because not all CSS classes are available to all assistive technologies, some users might miss important information. For example, screen readers ignore most, but not all, CSS. Likewise, visual users who have their computer monitor set to high-contrast mode may miss some of the contextual clues added by CSS, such as displaying a selected button as slightly darker.

To resolve these types of issues, you can add any of a number of ARIA attributes to show states.

In the following example, the aria-selected attribute lets the user know that the first tab is selected:

<div role=”tablist>
     <div role=”tab” aria-controls="ch1Content" id="ch1" class=”thingie”
aria-selected=”true”>Chapter 1</div>
     <div role=”tab” id="ch2" class=”thingie”>Chapter 2</div>
     <div role=”tab” id="ch3” class=”other_thingie”>Chapter 3</div>
</div>
<div role=”tabpanel” aria-labelledby=”ch1” id=”ch1Content”>Chapter 1
information</div>

The following table shows some of the more commonly used attributes, including possible values and usage notes.

Attribute Possible Values Notes
aria-checked

true

false

undefined

Indicates current “checked” state of checkboxes, radio buttons, and other similar form objects.

A value of “undefined” means that object is not checkable.

aria-disabled

true

false

Indicates that an object is not editable nor can a user interact with it.
aria-expanded

true

false

undefined

Indicates where a grouping of elements is currently expanded
aria-invalid

true

false

grammar

spelling

 

Indicates that a form element has failed validation.

A value of “grammar” indicates a grammatical error, and a value of “spelling” indicates a spelling error. These two values are not normally used.

aria-readonly

true

false

Indicates that an object is not editable but a user can interact with it.
aria-required

true

false

Indicates that a form element is required.
aria-selected

true

false

undefined

Indicates that an object is selected.

A value of “undefined” means that the object is not selectable.
aria-sort

ascending

descending

none

other

Added to a table header cell to indicate if the corresponding row or column is sorted.

W3C includes more information about all available states

Live regions

Often, when a web page changes via JavaScript without a page reload, those changes are not always announced or made available to assistive technologies. You can include an aria-live attribute to let assistive technologies know that changes may appear inside a particular object.

For example:

<div aria-live=”polite” id=”changing_news_stories”>Content that changes</div>

There are three values for the aria-live attribute:

off: With this setting, changes will not be announced 

polite: An announcement of a change will be given only if the user is not currently doing anything. This is the most common value.

assertive: An announcement of a change will be given to the user as soon as possible. This value is best reserved for alerts or warnings.

W3C has more information about live regions.

Did you find what you were looking for?

Related articles

Get help

Submit your accessibility question for a personal response, and we'll use your question to improve the content of this website.