筛选器组件移除时强制屏幕阅读器播报指定内容的实现咨询

步骤1：添加常驻ARIA Live播报区域 #

你需要先新增一个仅对屏幕阅读器可见的ARIA live区域，这个区域是专门用于动态内容播报的容器，只要内部内容发生变化，屏幕阅读器就会自动播报，不需要元素获得焦点，也不需要挂载到交互元素上，无需销毁会一直存在于页面中。
修改HTML代码如下：

<!-- 常驻屏幕阅读器专用播报区域，普通用户视觉上完全隐藏 -->
<div 
  aria-live="polite" 
  class="sr-only"
  #filterLiveRegion
></div>

<!-- 原有激活筛选器的渲染逻辑保持不变 -->
<div *ngIf="activeFilters.length > 0">
    <div class="active-filters" attr.aria-label="{{'List of active filters'}}">
        <h4 class="active-filters-headline">{{'Active filters'}}</h4>
    </div>
</div>

添加通用的屏幕阅读器隐藏样式，该样式不会影响普通用户的视觉展示，只会被读屏软件识别：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

步骤2：修改TypeScript逻辑触发播报 #

先获取live区域的DOM引用，在筛选器全部清空时直接给live区域赋值需要播报的内容即可：

import { ViewChild, ElementRef } from '@angular/core';

// 组件类内部声明DOM引用
@ViewChild('filterLiveRegion') filterLiveRegion: ElementRef<HTMLDivElement>;

ngAfterViewChecked() {
  if (this.interaction && this.interactionDataDelivery) {
    this.interaction = this.interactionDataDelivery = false;
    if (this.activeFilters.length == 0) {
      // 给live区域赋值播报内容，屏幕阅读器会自动读取
      if (this.filterLiveRegion) {
        this.filterLiveRegion.nativeElement.textContent = 'All Filters Are Removed';
        // 可选：播报完成后清空内容，避免后续重复播报
        setTimeout(() => {
          this.filterLiveRegion.nativeElement.textContent = '';
        }, 1000);
      }
    }
  }
}

注意事项 #

• aria-live="polite" 会在用户当前操作结束后再播报内容，不会打断正常交互，是这类状态提示的首选参数
• 不推荐使用aria-live="assertive"，该参数会强制打断用户正在进行的操作，仅适合紧急类提示使用
• 常驻live区域的兼容性覆盖所有主流屏幕阅读器（NVDA、VoiceOver、JAWS、TalkBack），比动态创建临时播报元素的兼容性更好

内容的提问来源于stack exchange，提问作者superninja