当父母专注时读取子元素 - 可访问性

Question

我正在使用来自 https://material.angular.io/components/tabs/overview.(used 的 mat-tab-group 复杂标签方法和 ng-template)

标签包含标签的名称和关闭标签的按钮。

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

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

Answer 1

您是否需要使用aria-label？

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

没有比坏的 ARIA 更好的 ARIA

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

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

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

其他 GUI 控件也是如此，尽管视觉标签机制因元素类型而异。 （例如，<input> 元素需要一个对应的<label>，由于for 属性，屏幕阅读器既可以看到也可以理解。）

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

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

Answer 2

如果您将aria-label="Your preferred text here" 添加到选项卡元素，您应该能够覆盖关注整个选项卡时读取的内容。