aria-hidden=“true” 或 aria-live=“assertive” 不适用于 lwc 中的 foreach

Question

我有一个要求 NVDA 屏幕 reader 应该读取 lwc 上的错误消息（动态显示）。我有一个包含错误消息列表的数组并用于显示它们。但是，NVDA 语音查看器永远不会读取这些消息。我尝试将 aria-hidden="true"、aria-live="assertive" 和 role="alert" 与 aria-atomic="true" 一起添加到标记中，但 none 它们的工作正常。找不到问题，有人可以帮忙吗？这是代码：

        <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>

Answer 1

您需要在元素上设置 aria-atomic 属性，它用于设置屏幕 reader 是否始终将活动区域显示为一个整体，即使只是部分的地区变化。

另外，您需要添加一个 aria-relevant 属性，这样您就可以告诉屏幕 reader 您做了什么类型的更改。

上述属性的可能值：

aria-atomic="boolean" [默认值：false]

aria-relevant="additions/removals/text/all" [默认：文本]

试试这个

<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” 或 aria-live=“assertive” 不适用于 lwc 中的 foreach

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

accessibility

screen-readers

nvda

lwc