Angular Material mat-tab-group无障碍优化：聚焦标签仅读名称

我来帮你搞定这个JAWS读取标签时的冗余内容问题。核心问题在于关闭按钮默认属于标签区域的可访问元素，JAWS会把它的aria-label和标签名一起读取。我们可以通过控制按钮的无障碍属性和焦点逻辑来实现你的需求。

解决方案思路 #

1. 初始状态下让关闭按钮对屏幕阅读器“不可见”，且无法通过Tab键聚焦
2. 当用户激活标签（点击/回车/空格）时，激活关闭按钮的可访问性并将焦点移到按钮上
3. 按钮失焦后恢复初始状态，确保下次聚焦标签时不再读取按钮内容

修改后的代码实现 #

模板部分

<mat-tab-group dynamicHeight [(selectedIndex)]="activeTabIndex" (selectedTabChange)="changetab($event)">
  <mat-tab *ngFor="let tab of Tabs; let i = index" 
           [label]="tab.name" 
           [attr.sortColumn]="tab.sortBy" 
           [attr.sortOrder]="tab.sortOrder" 
           [attr.viewId]="tab.id" 
           [attr.viewObjectID]="tab.viewObjectId"
           aria-label="{{tab.name}}">
    <ng-template mat-tab-label>
      <div class="tab-container" 
           (click)="onTabLabelClick($event, tab.id)" 
           (keyup.enter)="onTabLabelClick($event, tab.id)" 
           (keyup.space)="onTabLabelClick($event, tab.id)">
        <div class="somestyle">
          <span class="tab-name" [matTooltip]="tab.name">{{tab.name}}</span>
        </div>
        <button mat-icon-button 
                #closeBtn 
                tabindex="-1" 
                id="{{tab.id}}" 
                class="close-btn" 
                (keyup)="closeTab($event, view)" 
                (click)="closeTab($event, view)" 
                aria-label="{{closetab}}"
                aria-hidden="true"
                (blur)="onCloseBtnBlur(closeBtn)">
          <mat-icon class="material-icons">cancel</mat-icon>
        </button>
      </div>
    </ng-template>
  </mat-tab>
</mat-tab-group>

组件类逻辑

onTabLabelClick(event: MouseEvent | KeyboardEvent, tabId: string): void {
  // 阻止事件冒泡，避免触发标签切换逻辑
  event.stopPropagation();
  
  const closeBtn = document.getElementById(tabId) as HTMLButtonElement;
  if (closeBtn) {
    // 激活按钮的可访问性
    closeBtn.tabIndex = 0;
    closeBtn.setAttribute('aria-hidden', 'false');
    // 将焦点移动到关闭按钮，此时JAWS会读取按钮的aria-label
    closeBtn.focus();
  }
}

onCloseBtnBlur(closeBtn: HTMLButtonElement): void {
  // 按钮失焦后恢复初始状态
  closeBtn.tabIndex = -1;
  closeBtn.setAttribute('aria-hidden', 'true');
}

关键修改说明 #

• tabindex="-1"：默认让按钮无法通过Tab键聚焦，也不会被屏幕阅读器的默认焦点遍历包含
• aria-hidden="true"：告诉JAWS初始状态下忽略这个按钮，所以聚焦标签时只会读取标签名
• 标签容器的事件处理：当用户点击标签区域（非按钮部分）或用键盘激活标签时，切换按钮状态并聚焦，此时JAWS会读取按钮的关闭提示
• event.stopPropagation()：避免触发mat-tab的默认切换逻辑，确保用户点击标签是为了操作关闭按钮而非切换标签
• blur事件处理：按钮失焦后恢复初始状态，保证下次聚焦标签时不会再读取按钮内容

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