CODEWITHSUNDEEP
javascriptaccessibilitywai-aria
KannarKK
KannarKK

Reputation: 1623

Set aria-live to read updates before reading out the DOM element in focus

Suppose you have a aria-live region and it is read out every time some change is made. But every time the change is made, the focus moves to a particular form element First Name.

If the text being updated in aria-live region is Loading complete, the preferred reading sequence is Loading complete First name, i.e. first the aria-live region and then the element being focused.

However, regardless of the politeness setting of aria-live, I can't seem to get that combination.

if aria-live = assertive or aria-live = polite, it reads First name Loading complete

if aria-live = rude, it only reads Loading complete, ignoring reading of the element being focused.

How do I make this precedence order?

I am using JavaScript to manipulate the contents.

Upvotes: 0

Views: 2323

Answers (1)

Avius
Avius

Reputation: 6274

I've faced a very similar problem in the past. Not sure if this is what you are looking for, but a timeout helped me. So essentially the code looks like:

// ...
// perform updates to your live region
// ...
setTimeout(function() {
    $('.autofocus').focus();
});

ARIA has been a mystery to me, and still is, so can't really explain why this would work, but it did for me anyway.

Upvotes: 1

Related Questions