Loaders are managed using the aria-busy attribute. You are responsible for toggling
it with JavaScript. Additionally, ensure users cannot submit buttons or links when they are
busy; pointer events are disabled by CSS, but the Enter key cannot be avoided by CSS
alone. You need to handle it with JavaScript. Or perhaps by the new
inert HTML
attribute. <button type="submit" aria-busy='true' inert>Search</button>
<a href="/home" aria-busy='true' inert>Regular link</a>
If aria-busy is used on an empty container element, the loader is centered. <section aria-busy='true' inert></section>
In case the loading container is larger than just a line of code, the loader will grow with it,
up to a maximum size of 3rem. <section style="height:7rem" aria-busy='true' inert></section>
<section aria-busy='true' inert>
<progress role="presentation"></progress>
</section>
If progress is used for showing a loader, mark it with
role="presentation", as it no longer represents progress in percentages.