Accessible Rich Internet Applications (ARIA) is a set of standards developed as part of the Web Accessibility Initiative (WAI) designed to improve the web browsing experience for people with disabilities.
A major part of these standards is a set of ARIA Attributes that confer meaning to your user interface for assistive techonologies such as screen readers. They identify features for user interaction, how they relate to each other, and their current state.
In many cases the meaning of elements is implicit (e.g. <article>, <button>), these attributes are for use with collections of elements where the fuctionality is more complex.
For example a tabset like the one below uses ARIA attributes to indicate:
- Interactability (
role="tab")
- Related elements (
aria-labelledby="home-tab" and aria-controls="home")
- State (
aria-selected="true")
<ul id="myTabset" role="tablist">
<li role="presentation">
<a class="active" id="home-tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li role="presentation">
<a id="about-tab" href="#about" role="tab" aria-controls="about" aria-selected="false">About</a>
</li>
<li role="presentation">
<a id="contact-tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact Us</a>
</li>
</ul>
<div id="myTabContent">
<div class="active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div id="about" role="tabpanel" aria-labelledby="about-tab">...</div>
<div id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>