[aria-busy]

The aria-busy="true" attribute signals to assistive technologies that an element is being updated and its contents are not yet ready.

Use it on any container or interactive element to communicate a loading state.

Basic Usage

<article class="card" aria-busy="true">
  Loading content...
</article>

Loading Button

<button disabled="disabled" aria-busy="true">
  Loading...
</button>

Loading Card

<article class="card" aria-busy="true">
  <hgroup>
    <h3>Loading Content</h3>
    <p>Please wait while we fetch your data...</p>
  </hgroup>
</article>

Loading Form

<form aria-busy="true">
  <label>Name</label>
  <input type="text" disabled>
  <label>Email</label>
  <input type="email" disabled>
  <button disabled>Submit</button>
</form>

Best Practices

1. Show progress - If duration is known
2. Keep users informed - Don't leave them guessing
3. Provide alternatives - Allow cancellation
4. Accessibility - Use aria-busy appropriately