ARIA Accessibility Summary Guide

What is ARIA?

ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that improve accessibility by giving assistive technologies extra information about web elements. It helps users with disabilities understand and interact with complex or custom UI components.

Why Use ARIA?

  • Native HTML elements have built-in accessibility, but sometimes aren’t enough for custom controls.

  • ARIA fills the gaps by defining roles, states, and properties that describe the purpose and behavior of UI elements.

  • It makes websites usable for people who rely on screen readers, keyboard navigation, and other assistive tech.

ARIA Roles and Attributes: Quick Overview

Roles

Roles define what an element is or does — e.g.,

Role
Description
Example

banner

Site-wide header

<header role="banner">

navigation

Navigation section

<nav role="navigation">

main

Main content area

<main role="main">

button

Clickable button

<div role="button" tabindex="0">

dialog

Modal or popup dialog

<div role="dialog" aria-modal="true">

Attributes

Attributes provide extra info like labels, states, and relationships — e.g.,

Attribute
Purpose
Example

aria-label

Provide an accessible name

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

aria-expanded

Show if expandable item is open/closed

<button aria-expanded="false">Menu</button>

aria-checked

Checkbox or toggle state

<input role="checkbox" aria-checked="true">

aria-hidden

Hide content from assistive tech

<div aria-hidden="true">Hidden content</div>

How to Use ARIA: Best Practices

  1. Use native HTML elements whenever possible. They have built-in accessibility and require less ARIA.

  2. Use ARIA to enhance, not replace native HTML. Add ARIA roles and attributes only when necessary.

  3. Choose the correct role for custom elements. For example, role="button" for clickable divs.

  4. Add meaningful labels using aria-label or aria-labelledby.

  5. Manage element states with attributes like aria-expanded, aria-checked, aria-disabled.

  6. Ensure keyboard accessibility: make custom controls focusable (tabindex="0") and support keyboard interaction.

  7. Use live regions (aria-live) to notify screen readers of dynamic content changes.

  8. Test your site with screen readers and keyboard navigation regularly.

Common Pitfalls to Avoid

  • Don’t overuse aria-hidden="true"; it hides content from screen readers.

  • Avoid incorrect role assignments or mismatched states.

  • Keep ARIA states updated when UI changes occur.

  • Don’t use ARIA where semantic HTML suffices.

  • Avoid duplicating labels with both aria-label and visible text unless intentional.

Testing and Validation

  • Use screen readers like NVDA, JAWS (Windows) or VoiceOver (macOS/iOS) to check announcements.

  • Test keyboard-only navigation for focus order and interaction.

  • Use accessibility testing tools such as Axe, WAVE, or Lighthouse browser extensions.

  • Use browser dev tools to inspect ARIA roles and attributes on your elements.

Summary

ARIA bridges the gap between modern, dynamic web content and assistive technologies, enabling everyone to use the web effectively. Proper use of ARIA roles and attributes, combined with semantic HTML and keyboard-friendly design, results in more accessible and inclusive websites.

NextARIA Roles Cheat Sheet

Last updated