ARIA Attributes
ARIA attributes (aria-label, aria-hidden, role, aria-expanded) extra accessibility information dete hain jab semantic HTML akela kaafi nahi hai — usually custom interactive components (jaise custom dropdowns, modals, tabs) ke liye zaroori.
GOLDEN RULE: "No ARIA is better than Bad ARIA" — agar ek native HTML element (jaise <button>) available hai, use use karo. ARIA sirf tab use karo jab genuinely koi native equivalent na ho.
<!-- Icon-only button — visual label nahi hai, aria-label zaroori: -->
<button aria-label="Close menu">✕</button>
<!-- Decorative icon — screen reader ko ignore karna chahiye: -->
<span aria-hidden="true">🎉</span>
<!-- Custom dropdown (bina native <select> ke) — role/state zaroori: -->
<div role="button" aria-expanded="false" tabindex="0">
Menu
</div>
<!-- Better — native element use karo jab possible ho: -->
<button aria-expanded="false">Menu</button>- aria-label = jab visible text label na ho (icon buttons)
- aria-hidden = purely decorative content ko screen readers se chhupao
- Rule: native HTML element available ho to wahi use karo, ARIA nahi
aria-live dynamic content changes (jaise ek notification jo bina page reload ke appear hoti hai) ko screen readers ko announce karwata hai — normally screen readers sirf tab react karte hain jab focus move ho, live regions bina focus change ke bhi announce kar dete hain.
<div aria-live="polite" id="notification"></div>
<!-- JavaScript se: -->
<!-- document.getElementById('notification').textContent = "Item cart mein add ho gaya!"; -->
<!-- Screen reader automatically ye announce kar dega -->aria-invalid aur role="alert" form validation errors ko accessible banate hain — screen reader users ko clearly pata chalta hai kaunsa field invalid hai aur kya error hai.
<label for="email">Email:</label>
<input type="email" id="email" aria-invalid="true" aria-describedby="email-error">
<span id="email-error" role="alert">Please enter a valid email address</span>