1

我有一个要求，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>
4

1 回答 1

0

您需要aria-atomic在元素上设置属性，它用于设置屏幕阅读器是否应始终将活动区域呈现为一个整体，即使只有部分区域发生变化。

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

上述属性的可能值：

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

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>
于 2020-08-27T07:08:17.083 回答