角材料垫标签可访问性 [英] Angular Material mat-label accessibility
问题描述
我有一个带有文本输入控件的mat-form-field。我有一个mat-label，我也将一个aria-label属性 attr.aria-label 直接放在输入元素上。
I have a mat-form-field with a text input control. I have a mat-label and I also put an aria-label attribute attr.aria-label on the input element directly.
mat-label 本身足以满足屏幕阅读器的需求吗？ attr.aria-label 是必需的还是多余的？
Is the mat-label sufficient for screen readers by itself? Is the attr.aria-label necessary or redundant?
<mat-form-field appearance="outline" floatLabel="always">
<mat-label>Username</mat-label>
<input attr.aria-label="Username" formControlName="Username" matInput>
</mat-form-field>
对于垫选择控件也有同样的问题。
The same question goes for the mat-select control.
<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>
推荐答案
关于之间差异的重要说明[attr.aria-label] 和 [aria-label] ：
按钮可以设置动态 aria标签，例如：
<button [attr.aria-label]="'This is a button for ' + buttonDescription">Click me</button>
这不适用于所有物质控制，因为某些定义了 @Input （'aria-label'）属性，该属性在内部设置属性（通过@Hostbinding）
This won't work for all material controls since some define an @Input('aria-label') property, which sets the attribute internally (via @Hostbinding)
mat-select is one such control
源代码
@Input('aria-label')
ariaLabel: string
因此，如果您尝试使用 [attr。] mat-select 的c $ c>语法无效，因为该控件实际上将覆盖您显式设置的属性（因为 ariaLabel 输入属性为 mat-select 永远不会设置！）。
Therefore if you do try to use [attr.] syntax for mat-select it won't work because the control will actually overwrite your explicitly set attribute (since the ariaLabel input property to mat-select never gets set!).
<mat-select [attr.aria-label]="'This will be overwritten with undefined!'">...</mat-select>
相反，您必须只使用 aria-label 输入属性。
Instead you must just use aria-label input property.
<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] 开始。
A build will tell you if you use [aria-label] when you should be using [attr.aria-label] (because the compiler will tell you there's no such input property). So if you don't want to go seek out the API for the control you're using start with [aria-label].
https://material.angular.io/components/select/api
这篇关于角材料垫标签可访问性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
