Live region & aria-live=”off”

Many years ago it was very difficult for me to create a live region that announces the notification in the same way that I wanted, I did research but I was never satisfied with a solution and there were very few examples that supported my requirement.

Sometimes screen readers announce the notification two or more times which makes me frustrated and I wanted an accurate solution that can work every time I remediate a website.

The live region plays a very important role to convey dynamic changes on the website and I believe in code reusability so that I don’t have to think and code again and again for the same problem.

As per Success Criterion 4.1.3: Status Messages we need to make users aware of important changes in content that are not given focus and as per Success Criterion 4.1.2: Name, Role, Value we need to provide notifications about the change of focus, state to user agents and assistive technology, Here are some tips about live region that can make your life easy as an Accessibility Developer.

Live Region for multiple announcements:

1. Place a <div> anywhere on your website and make it visually hidden and add appropriate roles and attributes like role=” status” or role=”alert” as per your requirement.
   • Role “status” makes a polite announcement and waits for the screen reader’s ideal state without interrupting the screen reader announcement.
   • Role “alert” interrupts the screen reader’s announcement and starts announcing the text inside the alert region without waiting for the screen reader’s ideal state.
2. Create a function that accepts the announcement string and adds it to the live region and removes it automatically after a few seconds.
3. Here you go!! Use that function every time you want to make an announcement for assistive technology.

HTML:

<div id=”global-live-region” class=”sr-only-content” role=”status”></div>

CSS:

.sr-only-content{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

JavaScipt:

function makeAnnoucement(message) {
        var childOfLive = document.createElement('span');
        childOfLive.textContent = message;
        document.getElementById("global-live-region").appendChild(childOfLive);
        setTimeout(function(){
            document.getElementById("global-live-region").removeChild(childOfLive);    
        }, 1000);
}

Use of aria-live=”off” under Live region

I am sure you have never used aria-live=”off” or rarely use this but here is a very interesting use of “off” value of the aria-live attribute.

aria-live=”off” can be used to do a partial announcement, lets’s suppose you have a container that updates dynamically and you have no way other than announcing the whole content for screen reader users then you can use aria-live=”off” on the elements that you don’t want to include in the live announcement.

HTML without using aria-live=”off”:

<div role="status">
        <div>Please select your coffee</div>
        <button onclick="addCoffee('Cappuccino')">Add Cappuccino</button>
        <button onclick="addCoffee('Latte')">Add Latte</button>
        <p>You have selected these items:</p>
        <ol id="allCoffee">
        </ol>
</div>

JaveScript:

function addCoffee(coffee) {
        var drinks = document.createElement('li');
        drinks.textContent = coffee;
        document.getElementById("allCoffee").appendChild(drinks);
}

In the above example if you click on the “Add Cappuccino” button below would be the announcement by the screen reader every time you add a coffee:

Screen reader announcement:
“Please select your coffee Add Cappuccino Add Latte You have selected these items: 1. Cappuccino”

After using aria-live=”off” on the items you can only announce the necessary announcement for the users using assistive technology like NVDA and JAWS.

HTML with using aria-live=”off”

<div role="status">
        <div aria-live="off">Please select your coffee</div>
        <button aria-live="off" onclick="addCoffee('Cappuccino')">Add Cappuccino</button>
        <button aria-live="off" onclick="addCoffee('Latte')">Add Latte</button>
        <p>You have selected these items:</p>
        <ol id="allCoffee">
        </ol>
</div>

Screen reader announcement after using aria-live=”off”:
You have selected these items: 1. Cappuccino”

Do share your thoughts and experience about the live region in the comments and let me know your suggestions to improve this blog and my first blog on Focus Visibility.