aria-busy

What is aria-busy?

  • Indicates that a given node is "busy" and not suitable for interaction
  • Default: false

"If authors know that multiple parts of the same element need to be loaded or modified, they can set aria-busy to true when the first part is loaded, and then set aria-busy to false when the last part is loaded. When a widget is missing required owned elements due to script execution or loading, authors MUST mark a containing element with aria-busy equal to true."

W3C: https://www.w3.org/TR/wai-aria/states_and_properties#aria-busy

Bad!

<div aria-live="polite" aria-busy="true">I'll never get read.</div>

Simplified:

Toggle aria-busy for specific regions that receive focus and are not ready; not for live regions

Examples

  • Apply aria-busy to the majority of a document while a loading spinner is present
  • Apply aria-busy to a region of a page that loads after onload

🎉