we are adding ARIA support to our SPA website.
In application we have one activity area where we are showing dynamic messages from server based on validations.
We have added role='alert' and aria-live='assertive' to read those activity messages.
In FF and chrome its working fine however in IE its reading code like "left-brace left-brace txtErrorMessage right-brace right-brace" even if message there on screen
<div role="alert" aria-live="assertive">
<p class="scan-complete-text-auto">
{{model.txtErrorMessage}}
</p>
</div>
here txtErrorMessage will get populated runtime from api results.
we are using angular JS.
How to resolve this issue?
Try using ng-show or ng-hide, to hide the div until you have the message ready. The message length can be checked to show or hide the div itself. This will fix the issue.
Also no need for both role="alert" and aria-live="assertive". You can remove role="alert". JAWS + IE tend to read more than once for this combination.