Aria live vs Angular material live播音员哪一个具有更好的兼容性和性能

我正在制作一个缩略图组件，需要公布每个缩略图的内容。这里有两个选项1使用[attr.aria live]=礼貌或使用角度材质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);
       )
  } 
})

---

我通过在JAWS和NVDA中测试找到了答案。广播员是一个好办法。它创建了一个明显隐藏的“cdk live announcer element”，其属性为“aria live”和“aria atomic”，但将公告消息作为文本插入，而不是“aria label”，这使得它与大多数屏幕阅读器更兼容。此外，它还增加了100毫秒的延迟来处理一些屏幕阅读器