Dynamic content

ARIA live regions

aria-live dynamic changes की घोषणा करता है। गैर-महत्वपूर्ण updates के लिए polite, जरूरी alerts के लिए assertive का उपयोग करें।

<!-- Polite: announce when done -->
<div aria-live="polite" aria-label="Search results">
  <p id="result-count">Loading...</p>
  <ul id="results"></ul>
</div>

<!-- Assertive: urgent alert -->
<div aria-live="assertive" aria-label="Error message">
  <!-- Will be announced immediately -->
</div>

aria-atomic और aria-relevant

aria-atomic="true" पूरे region की घोषणा करता है। aria-relevant="additions removals" announce करने के लिए क्या changes specify करता है।

Loading states के लिए aria-busy

Loading के दौरान aria-busy="true" का उपयोग करें, जब हो जाए तो aria-busy="false"।

<button aria-busy="false" disabled>Saving...</button>

<!-- JavaScript -->
btn.setAttribute('aria-busy', 'true');
await save();
btn.setAttribute('aria-busy', 'false');

Polite vs Assertive

Normal updates के लिए aria-live="polite" का उपयोग करें (search results)। Urgent alerts के लिए aria-live="assertive" (error messages)। Default polite है।