ARIA (Accessible Rich Internet Applications)

ARIA (Accessible Rich Internet Applications) is a W3C specification of attributes such as role, aria-label and aria-expanded that expose a widget's purpose and state to assistive technologies when native HTML cannot express it.

Why it matters

Custom components like tab panels, menus and dialogs have no built-in meaning, so a screen reader hears only a pile of divs. ARIA fills that gap. The first rule of ARIA is to prefer a native element, such as <button>, when one exists, because ARIA changes only what is announced, not how the element behaves. Test with a real screen reader at least occasionally, because automated checkers cannot judge whether the announcements make sense.

Example

<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>...</ul>

Scripts must flip aria-expanded to true when the menu opens, or users hear stale information.

Common mistakes

Adding role attributes without implementing keyboard support.
Using aria-label to hide poor visible text or contradict it.
Leaving ARIA states unchanged when the UI changes.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.