aria-hidden=“true” or aria-live=“assertive” is not working with foreach in lwc

Question

I have a requirement where NVDA screen reader should read the error messages (dynamically displayed) on the lwc. I have an array with list of error messages and used to display them. However these messages are never read by NVDA Speech viewer. I tried adding aria-hidden="true", aria-live="assertive" and role="alert" along with aria-atomic="true" to tag but none of them working. Unable to find the issue, can anyone please help? Here is the code:

        <ul aria-live="assertive">
            <template for:each={Errors} for:item="err">
               <li class="slds-text-align--right" key={err}>{err}</li>
            </template>
        </ul>

        <ul role="alert" aria-atomic="true">
            <template for:each={Errors} for:item="err">
                <li class="slds-text-align--right" key={err}>{err}</li>
            </template>
        </ul>

score 0 · Accepted Answer · edited Aug 27 '20 at 07:14

You will need to set the aria-atomic attribute on the element, it is used to set whether or not the screen reader should always present the live region as a whole, even if only part of the region changes.

Also, you need to add an aria-relevant attribute so that you can tell the screen reader that what type of change you did.

Possible values for the above attributes:

aria-atomic="boolean" [default: false]

aria-relevant="additions/removals/text/all" [default:text]

Try this

<ul aria-live="assertive" aria-atomic="true" aria-relevant="additions">
    <template for:each={Errors} for:item="err">
        <li class="slds-text-align--right" key={err}>{err}</li>
    </template>
</ul>

aria-hidden=“true” or aria-live=“assertive” is not working with foreach in lwc

1 Answers1