0

I have a div with role="alert" added to the DOM when a form is submitted, it contains a h3 and a description. At the moment of picking a choice, both texts are announced by VoiceOver (Apple), but using NVDA on Firefox (Win10) only the description text is announced, and the h3 text is never heard. What might be the problem here?

enter image description here

Julián Bonilla
  • 385
  • 1
  • 4
  • 18

2 Answers2

0

Add an id to anything you want announced when the alert opens, let's say we add id="foo" to your <h3> and id="bar" to your description div.

Then add aria-describedby="foo bar" to the div with alert role. It should then announce all of these when it opens. (Although it might announce some things more than once, depending on AT, but this is not a WCAG violation).

brennanyoung
  • 6,243
  • 3
  • 26
  • 44
0

Without a fiddle this is difficult to diagnose (as stated in a comment an image of your source code means I can't copy paste into a fiddle) but there are a couple of items that stand out.

  1. 2 aria-live regions within an alert is likely to be the cause of this issue, instead add aria-live to the <div class="block-list"> div.

  2. null id attributes can sometimes interfere with your accessibility tree so I would inspect those and see what the accessibility tree says is happening. Remove them anyway as you should never have a null id. Unlikely but still something to fix.

  3. What isn't clear is if both change at the same time. aria-live will only read changes within NVDA so if the <h3> isn't actually updating this may also cause the problem.

  4. You might have to change the settings on NVDA, it could be you have a setting enabled that suppresses multiple aria-live region announcements that happen at once. Haven't got NVDA on this PC to check but will check this point later.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64