iOS Voice Over和Android无法在Span标签中公告文本 [英] iOS Voice Over and Android Fail to Announce Text In Span Tag
本文介绍了iOS Voice Over和Android无法在Span标签中公告文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我们希望在节点关闭后,屏幕阅读器会宣布";项已关闭";。有趣的是,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很友好,宣布了新添加的活动区域,但你听到这个消息就很幸运了。
这篇关于iOS Voice Over和Android无法在Span标签中公告文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文