Screenreader - multiple live regions

Question

Is it possible to stack multiple live regions, so that they all announce appropriately within a screen reader?

I have this setup:

<a class="action" href="javascript: void(0);" aria-controls="message RIO">Click here</a>

<div>Lorem ipsum dolor sit amet, rebum option detraxit eu has. Sea ut tempor integre meliore, ipsum alterum evertitur sit te. Mei ea rationibus conclusionemque. Eu mel justo aperiam. At sea graeci epicuri, ad quidam aliquando similique vix. At ferri fastidii mel, id meliore recteque eam, nec option albucius in.</div>

<div id="message" aria-live="polite" role="alert"></div>

<div id="RIO" class="offscreen" aria-live="polite" role="status"></div>


// javascript
    $('.action').on('click', function(event){
        $('#message').empty().append('Out of stock online');
        $('#RIO').empty().append('Out of stock at selected store');
    });

http://jsfiddle.net/jasonday/q8z901oj/22/embedded/result/

Only one of the messages is being relayed (the second one - RIO). I would like the screenreader to notify of both regions when the action takes place (click of link).

Answer 1

Apparently this is a limitation of WAI-ARIA live regions.

---

@rathernerdy That’s an inherent limitation. There’s no way to buffer or stack them directly. You’ll have to get creative.

— WebAIM (@webaim) January 20, 2015

---

One potential approach I found is to stack the messages in javascript, and append to a container all at once. With logic, you can determine if messages are combined prior to appending.

Demo: http://jsfiddle.net/jasonday/q8z901oj/