Read aloud at start and stop of progress bar (md-progress-linear)

TL;DR

You can use aria-live region to achieve the same

Here is a working codepen :Output: https://codepen.io/aimt/details/PaaKXM/

Code : https://codepen.io/aimt/pen/PaaKXM/

Refrences

More details available in mdn https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

and https://www.w3.org/TR/wai-aria-1.1/#aria-live

Details

Add <div aria-live="polite" id="livePolite"></div> to your page

Aria-live is an empty container with aria-live="assertive" or aria-live="polite"

• aria-live="polite" will wait for the screen reader to finish its statement before announcing new content.
• aria-live="assertive" will cut the screen reader off to announce new content.

Important

The container MUST be present on page load (or you must enforce a JavaScript delay after the aria-live region is added to the DOM before injecting the message into it; 500 milliseconds is usually sufficient, but you should test it). You cannot load an aria-live container with a message already inside it.

The container MUST also be empty, to begin with. This is because screen readers will be looking for a change in content in the aria-live container.

Behaviour

Screen readers will announce content when content has been injected into the container.

o Before: <div aria-live="polite" id="livePolite"></div>

o After: <div aria-live="polite" id="livePolite">Paused Video</div>

I always keep these on top of my webpage and populate whenever required

<p aria-live="polite" id="livePolite"></p><p aria-live="assertive" id="liveAssertive"></p>