2

我正在使用https://material.angular.io/components/tabs/overview中的 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}}"）。

4

2 回答 2

4

你需要使用aria-label吗？

WAI-ARIA 实践文档在其“Read Me First”部分的顶部有这个：

没有 ARIA 比 Bad ARIA 更好

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

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

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

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

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

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

于 2019-09-26T15:21:58.410 回答
-1

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

于 2019-07-19T13:04:20.443 回答