Short note on being busy

Posted on Wednesday, 16 May 2018 by Steve Faulkner

The aria-busy attribute, when set to true is supposed to provide a hint to screen readers that the content within the subtree of the element it is on is being updated and should not be announced.

Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
source: ARIA 1.1 – aria-busy

It appears that currently only JAWS uses this information to hide busy content from the user (with Chrome and Firefox, not IE), other screen readers such as NVDA and VoiceOver ignore the busy state and the content can still be accessed.

Try it for yourself: aria-busy test

See the Pen aria-busy test by steve faulkner (@stevef) on CodePen.

Using aria-hidden to achieve the same outcome

If you need/want to hide content from users for a set period of time, while content is updating, you can instead use aria-hidden. Its use results in the same outcome, but is much more robustly supported across browser and screen reader combinations.

Try it for yourself: aria-hidden test

See the Pen aria-hidden test by steve faulkner (@stevef) on CodePen.

About Steve Faulkner

Steve is the Technical Director at TPG. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including HTML 5.1, ARIA in HTML, Notes on Using ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility.

Comments

  1. Could these two attributes be used in tandem, then? Is there a benefit or any potential drawbacks to using both, so that you’re still getting the benefits of aria-busy in those browsers that support it?

  2. It’s redundant, but would it be worth doing aria-hidden="true" aria-busy="true" as a way of creating a backwards compatible pattern? Or do you think this would be too confusing to future developers? I’m thinking of how we duplicate <main role="main"> to make sure there is common support.

Comments for this post are closed.