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 a custom element is and what it's doing when native HTML can't. It adds an accessibility layer on top of the markup: this div is a switch, it's currently on, this region is live. Powerful, and easy to get wrong.
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.
