CODEWITHSUNDEEP
accessibilitywai-ariavoiceover
hasan.in
hasan.in

Reputation: 705

role=alert is not read by voiceover

https://codepen.io/hasan-uzzaman-sheikh/pen/xxmVqWO

<div role='tab'>

  <div id="example" role="alert"></div>

</div>

Hi there, I copied above codepen from https://www.w3.org/WAI/ARIA/apg/patterns/alert/examples/alert/ and modified to put a div with role="tab" around alert div.

This type of element structure present in our UI code and we have bug that screen reader not reading alert.

Shouldn't alert be always read by screen reader? If not, what should be fix for this?

Upvotes: 0

Views: 1117

Answers (1)

slugolicious
slugolicious

Reputation: 17563

Read my two answers regarding aria-live (which is what role="alert" gives you). I'm guessing you're not using the live region correctly. You didn't have details on what wasn't working with the alert role.

Edit: I just looked at your codepen example. The link to the second answer above matches your scenario. You have a live region that is hidden (CSS display:none) and then you unhide it when it has contents. Hiding/unhiding a live region itself may or may not be announced by some screen readers. The live region must be on the parent container and then when you hide/unhide a child element, it will be announced.

Upvotes: 1

Related Questions