Micro Tools
Advertisement

ARIA Reference

Look up any ARIA role, state or property in seconds. Search 40+ attributes with plain-English explanations of what each does and where it belongs.

Search ARIA

Reference

Advertisement

Roles, properties and states

ARIA has three kinds of vocabulary. Roles say what an element is (button, dialog, slider). Properties describe lasting characteristics (aria-label, aria-controls). States describe things that change (aria-expanded, aria-checked). The reference is filterable by kind so you can study exactly the group you need.

First rule of ARIA

If a native HTML element does the job, use it instead of ARIA: a real <button> beats div role="button" every time. Reach for this reference when building custom widgets like tab panels, tree views and combo boxes where native elements fall short.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

ARIA Reference FAQs

When should I use ARIA?
Only to fill gaps native HTML cannot cover, like custom sliders or tab widgets. Native elements come with keyboard behavior and semantics built in; ARIA only adds the semantics.
What is the difference between aria-label and aria-labelledby?
aria-label takes a literal string; aria-labelledby references visible elements by ID so the label stays in sync with what sighted users see. Prefer labelledby when visible text exists.
Do ARIA attributes change how an element looks?
No. They only affect what assistive technologies announce. All visual styling and keyboard behavior must still be implemented yourself.
What are live regions?
Elements with aria-live that announce dynamic updates to screen readers. Use polite for status messages and assertive only for urgent alerts.
Can ARIA fix an inaccessible design?
Rarely on its own. ARIA communicates meaning, but keyboard support, focus management and visible focus indicators must be built alongside it.
Advertisement