Scripting technologies which use scripting alerts for non-emergency communication.
The objective of this technique is to toggle announcements to screen readers of changes in a stock-price alert component. By default, when the stock price changes, the change is announced by screen readers. This could be annoying to some users, so there are buttons to allow users to toggle the announcements on or off.
This technique uses the aria-live property to turn the stock component into a live region and the aria-atomic property to tell screen readers to announce all of the component's content rather than just what was updated when the stock is updated. For the sake of this demo, the stock updates every 10 seconds. If announcements are turned on, the aria-live property is set to assertive; if announcements are turned off, the aria-live property is set to off. The two buttons used to control the announcements use the aria-pressed property, updated to either true or false, to inform screen reader users which button is pressed and therefore whether their screen reader will announce the stock updates or not. In a real-life situation, an author should consider setting a cookie (or equivalent) to store the user's preference so that it's set over multiple visits to the page.
The script below will update a stock value in an aria-live component every 10 seconds. If the user presses the "Turn Announcements Off" button, their screen reader will stop making announcements when the stock value changes; if they press the "Turn Announcements On" button, the announcements will start again.
<script>
document.addEventListener("DOMContentLoaded", function (e) {
const stockBox = document.querySelector("#stock-box");
const stockMovement = document.querySelector("#stock-movement");
const onBtn = document.querySelector("#live-on");
const offBtn = document.querySelector("#live-off");
const stocks = new Array("stock went down", "stock stayed the same", "stock went up");
let loopCount = 0;
onBtn.addEventListener("click", modifyLive, false);
offBtn.addEventListener("click", modifyLive, false);
function modifyLive(e){
let elm = e.currentTarget;
let liveState = elm.getAttribute("id");
if (liveState === "live-off"){
stockBox.setAttribute("aria-live", "off");
onBtn.setAttribute("aria-pressed", "false");
offBtn.setAttribute("aria-pressed", "true");
}
else{
stockBox.setAttribute("aria-live", "assertive");
onBtn.setAttribute("aria-pressed", "true");
offBtn.setAttribute("aria-pressed", "false");
}
}
setInterval(() => {
if(loopCount >2){
loopCount = 0;
}
stockMovement.innerHTML = stocks[loopCount];
loopCount++;
}, 10000)
});
</script><body>
<h1>Turbo Encabulator Stock Information</h1>
<div id="stock-box" aria-atomic="true" aria-live="assertive">
<span>Turbo Encabulator Stock Price: </span>
<span id="stock-movement">stock went up</span>
</div>
<p>Use the buttons to toggle screen reader announcements of stock changes:</p>
<div>
<button aria-pressed="true" id="live-on" type="button">
Turn Announcements On</button>
<button aria-pressed="false" id="live-off" type="button">
Turn Announcements Off</button>
</div>
</body>Working example of this code: Demonstration of toggling ARIA alerts.
For a Web page that supports non-emergency interruptions: