What Is ARIA — Understanding the WAI-ARIA Specification

In this tutorial, you will learn about What Is ARIA. We cover key concepts, practical examples, and best practices to help you master this topic.

The WAI-ARIA specification defines a set of HTML attributes that bridge the gap between dynamic web applications and assistive technologies when native HTML semantics fall short.

In this tutorial, you'll understand the WAI-ARIA specification, its history, and its role in the Accessibility standards ecosystem.

What You'll Learn

By the end of this lesson, you'll know the history of WAI-ARIA, the difference between ARIA 1.1 and 1.2, how ARIA interacts with HTML, and the spec's relationship to WCAG and HTML5.

Why It Matters

Understanding the specification helps you apply ARIA correctly. Misunderstanding leads to bugs that harm screen reader users and waste development time.

Real-World Use

Doda Browser's Accessibility panel uses the ARIA specification to validate roles, states, and properties against the spec's requirements in real time.

ARIA Specification Overview

flowchart TD
  A[WAI-ARIA Spec] --> B[Roles]
  A --> C[States & Properties]
  A --> D[Implementation Guide]
  B --> E[Abstract Roles]
  B --> F[Widget Roles]
  B --> G[Document Structure]
  B --> H[Landmark Roles]
  B --> I[Live Region Roles]
  A --> J[APG]
  J --> K[Design Patterns]
  J --> L[Keyboard Interaction]

The WAI-ARIA Standard

WAI-ARIA version 1.1 is the current stable recommendation from the W3C. ARIA 1.2 is in development and adds new roles like role="blockquote" and role="comment".

The specification is divided into three main documents:

The ARIA specification defines all roles, states, and properties, their taxonomies, and their relationships. Each role has required and supported states and properties.

The Authoring Practices Guide (APG) provides Design Patterns for common widgets like tabs, accordions, menus, and modals. The APG includes keyboard interaction patterns and code examples.

The Implementation Guide explains how to apply ARIA in various contexts.

Role Taxonomy

ARIA roles form a hierarchy. Abstract roles like widget and structure are base classes that cannot be used directly. Concrete roles extend them:

role=widget (abstract)
  role=button
  role=checkbox
  role=radio
  role=tab

role=structure (abstract)
  role=heading
  role=section
  role=list

<!-- Correct: concrete widget role -->
<div role="button" tabindex="0">Scan</div>

<!-- Incorrect: abstract roles are not allowed -->
<div role="widget" tabindex="0">Scan</div>

States and Properties

The spec defines which states and properties each role supports. A button supports aria-expanded and aria-pressed. A tab supports aria-selected.

<button aria-expanded="false" aria-controls="menu-1">
  Options
</button>
<ul id="menu-1" role="menu" hidden>
  <li role="menuitem">Quick Scan</li>
  <li role="menuitem">Full Scan</li>
</ul>

ARIA in HTML

HTML5 allows ARIA attributes on any element. The spec defines implicit ARIA semantics for native HTML elements. A <button> implicitly has role="button". A <nav> implicitly has role="navigation".

When you add an ARIA role to an element that already has implicit semantics, you may override the native meaning.

<!-- <h1> already has implicit role="heading" -->
<!-- Adding role="heading" is redundant but harmless -->
<h1 role="heading" aria-level="1">Title</h1>

Common Mistakes

• Using abstract roles: Abstract roles like widget or structure are not allowed in HTML.
• Missing required states: A checkbox role requires aria-checked.
• Confusing ARIA versions: ARIA 1.2 roles may not be supported in older screen readers.
• Assuming implicit roles match expectations: A <table> with role="grid" changes how it's announced.
• Ignoring the APG patterns: Custom implementations often miss keyboard handling that the APG covers.

Practice and Challenge

1. What is the current stable ARIA version? WAI-ARIA 1.1.

2. What is the ARIA Authoring Practices Guide? A companion document with design patterns and keyboard interaction examples.

3. Can you use abstract roles in HTML? No. Abstract roles are only used in the specification taxonomy.

4. What happens when you add role to a native HTML element? It overrides or confirms the element's implicit ARIA semantics.

5. Challenge: Compare the ARIA APG tab pattern with your own tab implementation and identify differences.

FAQ

Mini Project

Read the ARIA spec page for role="tab" and list its required states, supported states, owned elements, and the keyboard interaction pattern from the APG.

What's Next

Learn about The First Rule of ARIA and when to avoid using ARIA altogether.