ARIA Attributes

Definition

Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and applications more accessible to people with disabilities.

Explain Like I'm New

HTML5 semantic tags (`<nav>`, `<main>`) are great, but they don't cover everything. If you build a complex custom dropdown menu out of `<div>` tags, a blind person's screen reader thinks it's just plain text. ARIA attributes let you secretly whisper to the screen reader: 'Hey, this is actually a dropdown, and right now it's closed'.

Real World Example

Using `aria-expanded="true"` on an accordion button. The screen reader reads 'Accordion, Expanded'. When the user clicks it, JavaScript changes it to `false`, and the screen reader says 'Collapsed'.

Common Use Cases

•Making complex UI widgets accessible
•Alerting screen readers of dynamic content changes

Interactive Example

Interview Questions

basic

What does ARIA stand for?

intermediate

What is the First Rule of ARIA?

Flash Cards

Question

What does it stand for?

Click to reveal answer

Answer

Accessible Rich Internet Applications.

Question

First Rule of ARIA?

Click to reveal answer

Answer

'No ARIA is better than bad ARIA'. If you can use a native HTML element (like `<button>`) instead of a custom `<div>` with an `role="button"`, always use the native HTML element. Native elements have accessibility built-in for free.