Angular Material mat-label 无障碍性

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>

- pengz

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是其中之一的控件。

源代码:

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

因此，如果您尝试使用[attr.]语法来控制mat-select，它不起作用，因为控件实际上会覆盖您明确定义的属性（因为mat-select的ariaLabel输入属性从未设置！）。

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

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

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

- Simon_Weaver

Answer 2

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

如果指定了浮动标签，则会自动将其用作表单字段控件的标签。如果没有指定浮动标签，则应使用aria-label、aria-labelledby或来标记表单字段控件。

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

- Omri L