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

问题描述

我有一个要求，NVDA屏幕阅读器应读取lwc上的错误消息（动态显示）。我有一个包含错误消息列表的数组，用于显示它们。但是，NVDA Speech Viewer不会读取这些消息。我尝试添加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>

解决方法

您将需要在元素上设置aria-atomic属性，该属性用于设置屏幕阅读器是否应始终将实时区域整体呈现，即使仅部分区域发生变化。 / p>

此外，您需要添加一个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>