咏叹调直播与角材料现场播音员哪一个具有更好的兼容性和性能

Question

我正在处理缩略图组件，需要宣布每个缩略图的内容。这里有两个选项：1(使用[attr.aria-live]="polite"或使用角度材料a11y模块。不确定是否具有更好的性能并支持更多的浏览器。

基本上，当选择缩略图时，会宣布其内容。

解决方案1：

<thumbnail aria-live="polite" aria-atomic="true" [attr.aria-label]="selectObservable$ | async === currentThumbnailId ? currentThumbnailId : ''"></thumbnail>

解决方案2：

// template
<thumbnail></thumbnail>
// component.ts
@component
class ThumbnailComponent({
constructor(liveAnnouncer: LiveAnnouncer){
selectObservable$.pipe(
filter(selectId => selectId === currentThumbnailId)
).subscribe( currentThumbnailId => 
this.liveAnnouncer.announce(currentThumbnailId);
)
} 
})

Answer 1

我通过在JAWS和NVDA中进行测试找到了答案。 棱角分明的LiveAnnouncer是不错的选择。它创建了一个明显隐藏的"cdk-live-announcer-element"，属性为"aria-live"和"aria-atomic"，但插入公告消息作为文本而不是"aria-label"，这使得它与大多数屏幕阅读器更兼容。并且它还增加了100ms的延迟来处理某些屏幕阅读器。