Angular material 当父元素处于焦点时读取子元素-可访问性

我使用的是来自复杂标签的mat选项卡组（使用ng模板）

该选项卡包含选项卡的名称和用于关闭选项卡的按钮

每当我聚焦选项卡时，它都会读取名称和按钮的标签。当选项卡处于焦点时，它应该只读取名称，而不读取关闭按钮标签。当选项卡当前处于焦点时，然后单击选项卡将焦点对准关闭按钮，此时应读取关闭按钮标签

如何做到这一点

代码：

<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>

{{tab.name}
取消

---

这个输出：我使用“jaws”作为屏幕阅读工具。当我们关注选项卡时，它会读取选项卡名称并关闭按钮标签（attr.aria label=“{{tab.name}}”和attr.aria label=“{{closetab}”）。

如果添加

aria label=“此处为您的首选文本”，您应该能够覆盖关注整个选项卡时读取的内容

添加到选项卡元素。

是否需要使用

aria标签

:

没有咏叹调总比不好的咏叹调好

mat选项卡组示例仅使用选项卡内的文本节点（这是一个带有

role=“tab”

的按钮）作为可访问名称。这应该足够了。如果可能，让可视标签成为可访问的名称

在按钮上使用

aria标签

的唯一原因是，可访问的名称是否应与按钮标签不同。e、 g.如果仅使用图标或unicode字形作为可视标签，而不是人类可读的文本

在所有其他情况下，只需将可访问名称放在按钮内的文本节点中。（当然，您可以将其包装在

span

或其他内联元素中-如mat选项卡组示例所示，如果您需要更精细的样式设置）

其他GUI控件也是如此，尽管元素类型之间的可视标签机制不同。（例如，

元素需要一个相应的

，由于

for

属性，屏幕阅读器可以看到和理解该元素。）

如果您必须使用

aria标签

，请确保它位于获得焦点的元素上，否则屏幕阅读器会试图猜测您想要的可访问名称，结果不可预测。我怀疑这就是你正在经历的

---

此外，如果我没有弄错的话，您正在将选项卡的“主体”（包括关闭框）添加到可聚焦选项卡本身。这不是正确的结构。同样，让mat选项卡组示例作为您的指南。

是的，我尝试过，但它仍然显示关闭按钮标签。我想您还没有看到mat tab元素，我已经在使用它了。我在画外音上测试过。你使用哪种屏幕阅读器？你们能在这里发布它输出/读取的内容吗？我使用“jaws”作为屏幕读取工具。当我们关注tab时，它会读取tab name并关闭按钮标签（attr.aria label=“{{tab.name}}”和attr.aria label=“{{closetab}”）。