角材料垫标签可访问性

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

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

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

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

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

mat-select is one such control

源代码：

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

因此，如果您确实尝试对[attr.]使用mat-select语法，则该方法将无效，因为该控件实际上会覆盖您显式设置的属性（因为ariaLabel输入属性为{{ 1}}永远不会被设置！）。

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]（因为编译器会告诉您没有这种输入属性）。因此，如果您不想使用该控件的API，请使用[attr.aria-label]开头。

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

Answer 2

如果使用的是mat标签字段，则不应将aria标签直接放在输入元素上。就您而言，这是多余的。

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

标记表单字段控件

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