ARIA
Accessible Rich Internet Applications
- 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
<!-- 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>Readers ask
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.
See also
- Web AccessibilityWeb Development, p. 66Web accessibility is the practice of building websites that everyone can use, including people who rely on screen readers, keyboards, captions, or zoom.
- HTMLWeb Development, p. 22HTML is the markup language that defines the structure and content of web pages, such as headings, paragraphs, links, images, and forms.
- DOMWeb Development, p. 17The DOM is the browser's in-memory tree of objects representing a web page, which JavaScript can read and change to update what the user sees.
- UI ComponentWeb Development, p. 61A UI component is a self-contained, reusable piece of an interface, such as a button, a form or a card, that bundles its markup, style and behavior.
- Web BrowserWeb Development, p. 67A web browser is an application that fetches web pages from servers and turns their HTML, CSS, and JavaScript into the interactive pages you see on screen.
Sources
Spotted a mistake or something missing on this page?Suggest an edit