0

I would like to put a link inside an aria-live region when an event happens.

However when voiceover reads the aria-live region it does it as text and does not read that there is a clickable link.

so my markup when the event happens is

<div role="region" aria-live="assertive">
 hello <a href="/world">world</a>
</div>

Voiceover reads hello world when the event happens and then puts the context back on the element it was on prior to the event being raised.

Is there a way to make voiceover read the content in aria-live as more than just straight text?

user254694
  • 1,461
  • 2
  • 23
  • 46

1 Answers1

0

No, that's the purpose of aria-live - it announces the text that changed. No other info, such as the role (link or button or list) is announced.

You can "force" additional text to be read but you have to do it manually. So you could add something like this:

<div role="region" aria-live="assertive">
 hello <a href="/world">world</a> <span class="sr-only"> link </span>
</div>

so you would hear "hello world link", but I would remove that extra text after it's announced otherwise when the user navigates all the elements manually (by using swipe right with voiceover), they'll hear:

  • "hello"
  • "world link"
  • "link"

(See What is sr-only in Bootstrap 3? for info on the "sr-only" class).

But that's not really a good workaround. Hearing "hello world link" when your new element is added makes it sound like "hello world" is the link when only "world" is the link.

There's probably a better solution for what you're trying to achieve if you explain the UX a bit more.

slugolicious
  • 15,824
  • 2
  • 29
  • 43