Live announcer

A live announcer, in terms of front-end development, is a mechanism that provides audio feedback to users about changes in the content or state of a web page. This is particularly important for users who have visual impairments, as it allows them to stay updated about changes on the page, and you, poor developer, to point to une simple elements to manage your announcing needs.

The live announcer is typically implemented leveraging aria-live attributes: if you want to know more about aria-live, you can take a look at this article. I'll take these concepts for granted, to keep this article as dry as possible.

To implement a live announcer, we can create a <div> element with an aria-live attribute set to "polite" or "assertive", depending on the importance of the announcement. This div will take, one by one, our message, update itself and thus let the screen reader announce the change.

Basic approach

Here's the most basic example of how to implement a live announcer in HTML and JavaScript I can think of:

<div id="liveAnnouncer" aria-live="polite"></div>

<script>
  function announce(message) {
    var liveAnnouncer = document.getElementById("liveAnnouncer");
    liveAnnouncer.textContent = message;
  }

  // Example usage:
  announce("Hi, i'm a message!");
</script>

In this first approach, the div element with an id of "liveAnnouncer" is used as the live announcer, with an aria-live attribute set to "polite". The JavaScript function "announce" is used to update the content of the live announcer with the message passed as an argument. Assistive technologies, seeing that the content inside the aria-live is changed, will announce the new content. This approach leverages the fact that to be successfully announced, the aria-live container must be present in the DOM before its content changes: what is being announced is the change, not the insertion.

You can call the "announce" function whenever there is a change in the content or state of the page that needs to be announced to the user. This will update the content of the live announcer and trigger an audio announcement for users who are using assistive technologies like screen readers.

Since the content (and theannouncer) are elements of the page, they're visible. to get rid of them visually, while keeping them still in the DOM, you can use the visually-hidden technique (here is an article about that).

A more configurable announcer

This second example allows you to configure more deeply your announcer, specifying the announcement priority, delay time, and timeout, in addition to the message text.

<div id="liveAnnouncer" aria-live="polite"></div>

<script>
  function announce(message, priority, delay, timeout) {
    var liveAnnouncer = document.getElementById("liveAnnouncer");

    // Set the aria-live attribute based on the priority level
    if (priority === "assertive") {
      liveAnnouncer.setAttribute("aria-live", "assertive");
    } else {
      liveAnnouncer.setAttribute("aria-live", "polite");
    }

    // Set the content of the live announcer
    liveAnnouncer.textContent = message;

    // Set a delay time before announcing the message
    setTimeout(function() {
      liveAnnouncer.textContent = "";
    }, delay);

    // Set a timeout for clearing the live announcer
    setTimeout(function() {
      liveAnnouncer.textContent = "";
    }, timeout);
  }

  // Example usage:
  announce("Hi, I'm another message!", "polite", 1000, 5000);
</script>

In this example, the announce function takes four arguments:

• message - The message you want to be read

• priority - The priority level of the announcement ("assertive" or "polite").

• delay - The delay time (in milliseconds) before announcing the message.

• timeout - The timeout (in milliseconds) for clearing the live announcer.

The announce function sets the aria-live attribute of the live announcer div based on the priority level, sets the text content of the div to the message, waits for the specified delay time, and then clears the text content of the div after the specified timeout.