iOS Voice Over和Android无法在Span标签中公告文本

人气:415 发布:2022-10-16 标签: html accessibility typescript screen-readers voiceover

问题描述

我们希望在节点关闭后,屏幕阅读器会宣布";项已关闭";。有趣的是,Chrome上的NVDA正确地宣布了这一消息,而Android和iOS Voice Over却没有宣布这一消息。

以下是打字代码:

@HostListener('keydown.tab', ['$event'])
removeFilterMsg() {
    const $message = document.createElement('span');
    $message.classList.add('RemoveFilter');
    $message.setAttribute('aria-live', 'assertive');
    $message.setAttribute('display', 'none');
    window.setTimeout(() => {
        $message.innerHTML = "Filter item is removed";
    }, 100);
    document.body.appendChild($message);
}

触发上述函数的html代码为:

<button attr.aria-label="School Name" class="active-node" title="School Name">
 School Name
<span style="color:white;font-size:20px;cursor:pointer;" aria-hidden="true" (click)="removeFilterMsg()"></span>
</button>

并且此代码将在正文底部生成跨区部分。

<span class="RemoveFilter" aria-live="assertive" display="none">Filter item is removed</span>

有人知道问题出在哪里吗?

推荐答案

您没有正确使用aria-live。我最近写了一篇很长的关于aria-live的回答。您可以在Snackbars not read by screen reader when triggered from a dialog

查看

实质上,您需要在加载时间时页面上有一个aria-live元素。aria-live既不是动态属性,也不是动态添加到DOM中。Chrome很友好,宣布了新添加的活动区域,但你听到这个消息就很幸运了。

671