Watch
ARIA 0:56
A 56-second explainer of ARIA, narrated over the same demo you can try yourself.
What this video covers
ARIA (Accessible Rich Internet Applications) is a set of HTML attributes - roles, states, and properties - that tell assistive technology what custom elements are and what they’re doing when native HTML won’t work. It adds accessibility on top of markup: this div is a switch, it’s toggled on, this region is live. Use native HTML where possible - ARIA adds semantics, but doesn’t provide keyboard behaviour or interaction logic, and incorrect ARIA is worse than omitting it entirely.
Without ARIA, the custom toggle announced as a meaningless "clickable" with no name and no state - a screen-reader user couldn't tell what it was or whether it was on. Add role, name and aria-checked and it announced "Notifications, switch, on" - suddenly usable by ear. ARIA didn't change a pixel; it changed what assistive tech was told.
