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

Question

I need to use NVDA screen-reader to read some messages when a dialog with progress bar appears.

At 0% duration of progress-bar, I need to announce: "Your received a timed message"

At 100% duration of progress-bar: "The message expired"

The progress-bar used is md-progress-linear.

The html code looks like below:

<md-dialog>
    <md-progress-linear tabindex="0" ng-if="displayProgressIndicator || timeoutValue > 0" md-mode="determinate" class="promptProgressBar" value="{{progressValue}}"></md-progress-linear>
    <md-content class="md-title dialogTitle">
        {{messageTitle}}
    </md-content>
    <md-content class="md-dialog-content">
        {{messageText}}
    </md-content>
    <div class="md-dialog-actions">
        <md-button ng-style="theme.SecondaryButton" ng-click="OnClose()" class="md-primary right">
            {{primaryActionText}}
        </md-button>
        <md-button ng-style="theme.SecondaryButton" ng-if="secondaryActionText.length > 0" ng-click="OnCancel()" class="md-primary right">
            {{secondaryActionText}}
        </md-button>
    </div>
</md-dialog>

I saw some working examples for slider which uses aria-valuetext attribute and NVDA reads those texts properly.

I tried adding aria-valuetext attribute in md-progress-linear element, but doesn't work.

When the message is arrived, NVDA produces beep sounds, but do not read aria-valuetext.

Any idea on how to do it?

Terrarium

Answer 1

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>

Gerous

Thanks for the solution. The demo is working perfect as what I expected. Hence, accepted. But while integrating it in my project, NVDA changes the text of aria-live region but do not announce it. It just beeps. FYI, the dialog appears dynamically. Anything else to do? It is a windows application which is using chromium browser. Can it be a some tab-index issue? – Terrarium

Is your aria-live <p> a part of the web page or is it a part of the dialog? If it is a part of the dialog, it might not be able to read the live region before the text was injected. If it is a part of the web page, ensure that the aria-live region is outside the backdrop, I've seen a lot of backdrops adding, aria-hidden = true to stop screen readers from reading items behind the modal. – Gerous