Angular Material 垫标签可访问性

Question

我有一个带有文本输入控件的 mat-form-field。我有一个 mat-label 并且我还直接在输入元素上放置了一个 aria-label 属性 attr.aria-label。

mat-label 屏幕阅读器本身是否足够？ attr.aria-label 是必要的还是多余的？

<mat-form-field appearance="outline" floatLabel="always">
<mat-label>Username</mat-label>
<input attr.aria-label="Username" formControlName="Username" matInput>
</mat-form-field>

同样的问题也适用于 mat-select 控件。

<mat-form-field appearance="outline" floatLabel="always">
  <mat-label>Cars</mat-label>
  <mat-select formControlName="Car">
    <mat-option *ngFor="let car of cars" [value]="car.name">
    {{car.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

Answer 1

如果您使用的是 mat 标签字段，则不应直接在输入元素上放置 aria-label。在你的情况下它是多余的。

如果指定了浮动标签，它将自动用作表单域控件的标签。如果未指定浮动标签，则应使用 aria-label、aria-labelledby 或

来标记表单域控件

[https://material.angular.io/components/form-field/overview][1]

Answer 2

关于 [attr.aria-label] 和 [aria-label] 之间区别的重要说明：

对于按钮，您可以像这样设置动态 aria-label：

 <button [attr.aria-label]="'This is a button for ' + buttonDescription">Click me</button>

这不适用于所有 material 控件，因为有些控件定义了 @Input('aria-label') 属性，它在内部设置属性（通过 @Hostbinding）

mat-select is one such control

源代码：

@Input('aria-label')
ariaLabel: string

因此，如果您确实尝试对 mat-select 使用 [attr.] 语法，它将不起作用，因为控件实际上会覆盖您显式设置的属性（因为 ariaLabel 输入 属性 到 mat-select 永远不会设置！）。

<mat-select [attr.aria-label]="'This will be overwritten with undefined!'">...</mat-select>

相反，您必须只使用 aria-label 输入 属性。

 <mat-select [aria-label]="'Choose your own adventure! ' + 123">...</mat-select>

 <mat-select aria-label="{{ 'Choose your own adventure - ' + 123 }}">...</mat-select>

 <mat-select aria-label="Choose your own adventure 123">...</mat-select>

构建会告诉您是否使用 [aria-label] 而您应该使用 [attr.aria-label]（因为编译器会告诉您没有这样的输入 属性）。因此，如果您不想为正在使用的控件寻找 API，请从 [aria-label].

开始

https://material.angular.io/components/select/api