# ARIA (Accessible Rich Internet Applications)

URL: https://softwaredictionary.org/terms/aria
Category: Web Development
Last updated: 2026-10-06
Pronunciation: AH-ree-uh

In short: ARIA is a W3C standard of HTML attributes, such as role and aria-label, that tell assistive technologies what a custom widget is and what state it is in.

## What is ARIA?

WAI-ARIA, usually just called ARIA, comes from the W3C's Web Accessibility Initiative, and version 1.2 has been a W3C Recommendation since 2023. Browsers turn every page into an accessibility tree that screen readers and other assistive technologies read, recording each element's role, name and state. Native HTML elements fill this in automatically, but a dropdown, tab list or dialog built from `<div>` elements says nothing about itself, and ARIA attributes supply the missing meaning.

ARIA has three kinds of attributes. Roles say what an element is, such as `role="dialog"` or `role="tab"`; states describe its current condition, such as `aria-expanded="true"` or `aria-checked="false"`; and properties add other facts, such as `aria-label` to name an icon-only button, `aria-describedby` to link a help text, or `aria-live` to announce messages that appear without the user moving focus. The W3C's ARIA Authoring Practices Guide shows complete patterns for common widgets, including the keyboard behavior each one needs.

ARIA changes only what assistive technology is told, never how an element behaves. Adding `role="button"` to a `<div>` doesn't make it focusable or respond to the Enter key; your script must do that. That is why the first rule of ARIA is to use a native HTML element, such as `<button>`, `<dialog>` or `<details>`, whenever one does the job, and why surveys keep finding more accessibility errors on pages that use ARIA than on pages that don't: wrong ARIA is worse than none.

ARIA is often mistaken for accessibility itself. Web accessibility is the goal, and WCAG, the Web Content Accessibility Guidelines, says what an accessible page must achieve; ARIA is one technical tool for getting there, used where semantic HTML runs out. Its attributes also don't change what sighted users see: `aria-hidden="true"` hides content from screen readers only, not from the screen.

## Key takeaways

- ARIA is a W3C standard of attributes that add meaning for assistive technologies.
- Roles say what an element is; states and properties describe it.
- It changes what screen readers announce, not how elements behave.
- Use native HTML elements first; ARIA fills the gaps in custom widgets.
- WCAG sets accessibility goals; ARIA is one tool for meeting them.

## Example: A disclosure button, an icon button and a status message

```html
<!-- aria-expanded tells screen readers whether the panel is open -->
<button aria-expanded="false" aria-controls="shipping">Shipping costs</button>
<div id="shipping" hidden>Shipping is free on orders over $50.</div>

<!-- An icon-only button needs a name; role="status" announces new messages -->
<button aria-label="Close">×</button>
<p role="status"></p>
<script>
  const toggle = document.querySelector("[aria-controls='shipping']");
  toggle.addEventListener("click", () => {
    const open = toggle.getAttribute("aria-expanded") === "true";
    toggle.setAttribute("aria-expanded", String(!open));
    document.getElementById("shipping").hidden = open;
  });
</script>
```

## Frequently asked questions

**What is the first rule of ARIA?**

If a native HTML element or attribute already has the meaning and behavior you need, use it instead of adding ARIA. A real `<button>` is focusable, works with the keyboard and is announced correctly with no extra code.

**What is the difference between aria-label and aria-labelledby?**

`aria-label` gives an element its name directly as text. `aria-labelledby` points to the `id` of another element whose visible text becomes the name, which keeps what is shown and what is spoken in sync.

**What is the difference between ARIA and WCAG?**

WCAG is a set of guidelines describing what an accessible page must achieve, such as text alternatives and keyboard access. ARIA is a technical specification of attributes, one of the ways to meet some of those guidelines in custom widgets.

## Sources

- [W3C: Accessible Rich Internet Applications (WAI-ARIA) 1.2](https://www.w3.org/TR/wai-aria-1.2/)
- [W3C: ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/)
- [MDN: ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)

---

Software Dictionary: https://softwaredictionary.org/ · https://softwaredictionary.org/llms.txt