What is ARIA, and what is the first rule of ARIA?

Summary

ARIA (Accessible Rich Internet Applications) attributes add roles, states and properties for assistive technology when HTML can't express something, such as aria-expanded on a custom disclosure or aria-live for announcements. The first rule: don't use ARIA if a native HTML element or attribute already does the job.

Longer Answer

ARIA changes only what assistive technology is told; it adds no behaviour or keyboard support. Wrong ARIA is worse than none (role="button" on a div that can't be focused). Common legitimate uses: aria-label for icon-only buttons, aria-describedby for error messages, aria-current for the active navigation link, aria-live regions.

Key Points

• Roles, states and properties.
• Prefer native HTML.
• ARIA adds no behaviour.
• Bad ARIA is worse than none.

Deep dive: Modern HTML5 in Production: ARIA Done Right (and Wrong)

What interviewers look for

Native-first thinking.

Follow-up questions

• What does aria-live do?
• When would you use aria-label?