Question

我正在将https://material.angular.io/components/tabs/overview.(used复杂标签方法中的mat-tab-group与ng-template一起使用）

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

每当我聚焦选项卡时，它都会读取名称的aria标签和按钮。当选项卡聚焦时，它应该仅读取名称，而不是关闭按钮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>

Answer 1

您是否需要使用aria-label？

The WAI-ARIA Practices document has this at the top of its "Read Me First" section：

没有ARIA会比Bad ARIA更好

mat-tab-group示例仅使用选项卡内的文本节点（带有role="tab"的按钮）作为可访问名称。那应该足够了。如果可能的话，让可视标签为可访问名称。

您应该在按钮上使用aria-label的唯一原因是可访问名称是否与按钮标签不同。例如如果仅将图标或Unicode字形用作视觉标签，以代替人类可读的文本。

在所有其他情况下，只需将可访问名称放在按钮内的文本节点中即可。（当然，您可以将其包装在span或其他内联元素中，如果需要更精致的样式，可以像mat-tab-group示例一样进行包装。）

其他GUI控件也是如此，尽管视觉标签机制在元素类型之间有所不同。（例如，<input>元素需要一个相应的<label>，由于for属性的存在，屏幕阅读器既可以看到它也可以看到它。）

如果您必须使用aria-label，请确保它位于获得焦点的元素上，否则屏幕阅读器将尝试猜测您想要的可访问名称是什么，不可预测的结果。我怀疑这就是您正在经历的事情。

此外，如果我没记错的话，您就是将标签的“正文”（包括关闭框）添加到可聚焦标签本身。这不是正确的结构。再次，以mat-tab-group示例为指南。

Answer 2

如果在标签元素上添加SELECT 1 AS measure, measure_1_actual AS actual, measure_1_predicted AS predicted FROM tb WHERE id = 1 UNION SELECT 2 AS measure, measure_2_actual AS actual, measure_2_predicted AS predicted FROM tb WHERE id = 1，则应该能够覆盖聚焦整个标签上的内容。

父母关注时阅读子元素-可访问性

2 个答案: