我正在使用来自 https://material.angular.io/components/tabs/overview.(使用复杂标签方法和 ng 模板)
该选项卡包含选项卡的名称和用于关闭选项卡的按钮。
每当我聚焦选项卡时，它都会读取名称和按钮的咏叹调标签。当选项卡聚焦时，它应该只读取名称，而不读取关闭按钮 aria 标签。当选项卡当前聚焦，然后单击选项卡将聚焦关闭按钮时，此时它应该读取关闭按钮 aria 标签。
怎么做？
法典：
<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" attr.aria-label="{{tab.name}}">
<ng-template mat-tab-label>
<div class="tab-container">
<div class="somestyle">
<span class="tab-name" [matTooltip]="tab.name">{{tab.name}}</span>
</div>
<button mat-icon-button tabindex="0" id="{{tab.id}}" class="close-btn" (keyup)="closeTab($event,view)" (click)="closeTab($event,view)" attr.aria-label="{{closetab}}">
<mat-icon class="material-icons">cancel</mat-icon>
</button>
</div>
</ng-template>
</mat-tab>
这个的输出：我正在使用"下巴"作为屏幕阅读工具。当我们专注于选项卡时，它会读取选项卡名称和关闭按钮标签(attr.aria-label="{{tab.name}}"和attr.aria-label="{{closetab}}")。
你需要使用aria-label吗？
WAI-ARIA 实践文档在其"先读我"部分的顶部有以下内容：
没有咏叹调比坏咏叹调更好
mat-tab-group 示例只是使用选项卡中的文本节点(这是一个带有role="tab"的按钮)作为辅助名称。这应该足够了。如果可能，让可视标签成为辅助名称。
应在按钮上使用aria-label的唯一原因是辅助名称是否应与按钮标签不同。 例如，在仅使用图标或 Unicode 字形作为视觉标签的情况下，代替人类可读的文本。
在所有其他情况下，只需将辅助名称放在按钮内的文本节点中即可。(当然，如果需要更精细的样式，您可以将其包装在span或其他内联元素中 - 就像 mat-tab-group 示例所做的那样)。
其他 GUI 控件也是如此，尽管可视标签机制因元素类型而异。(例如，<input>元素需要一个相应的<label>，由于for属性，屏幕阅读器既可见又可以理解。
如果必须使用aria-label，请确保它位于获得焦点的元素上，否则屏幕阅读器将尝试猜测您希望辅助名称是什么，结果不可预测。我怀疑这就是你正在经历的。
另外，如果我没记错的话，您将选项卡的"正文"(包括关闭框)添加到可聚焦选项卡本身。这不是正确的结构。同样，让 mat-tab-group 示例成为您的指南。
如果向tab 元素添加aria-label="Your preferred text here"，您应该能够覆盖聚焦整个选项卡时读取的内容。