ARIA
Design Processes
HTML attributes that tell assistive technology what an element is and what state it is in.
In practice
ARIA — Accessible Rich Internet Applications — is a set of attributes like role, aria-label and aria-expanded that add meaning to elements HTML cannot describe on its own, so a custom dropdown or tab strip is understood by a screen reader. The first rule of ARIA is not to use it: a native button needs none, and wrongly applied ARIA does more harm than none at all.
Questions
What is ARIA?
ARIA is a specification of attributes that convey roles, properties and states to assistive technology for interface patterns plain HTML cannot express.
Why do you use ARIA?
Custom components are invisible or misleading to screen readers without it. With it, a bespoke control can be as usable as a native one.
How do you use/apply ARIA?
Prefer native elements first. Where you must build custom, follow the documented ARIA pattern for that widget exactly, and test with a real screen reader.
When do you use ARIA?
Only when semantic HTML cannot do the job — custom menus, tabs, dialogs, live regions.
Who uses ARIA?
Front-end developers building components, and designers specifying custom controls.
