4

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).

2

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/

  • The fiddle link is 404 – gaurav5430 Jun 7 at 6:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.