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

Question

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

        <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 属性，它用于设置屏幕阅读器是否应始终将活动区域呈现为一个整体，即使只有部分区域发生变化。

另外，您需要添加一个aria-relevant 属性，以便您可以告诉屏幕阅读器您做了什么类型的更改。

上述属性的可能值：

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>