angular - Aria-live vs Angular 材质直播播音器，兼容性和性能哪个更好

Question

我正在开发一个缩略图组件，需要公布每个缩略图的内容。这里有两个选项 1) 使用 [attr.aria-live]="polite" 或使用 angular material 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 是不错的选择。它创建了一个具有“aria-live”和“aria-atomic”属性的可见隐藏的“cdk-live-announcer-element”，但将公告消息插入为文本而不是“aria-label”，使其与大多数屏幕更兼容读者。而且它还增加了 100 毫秒的延迟来处理某些屏幕阅读器。