角材料垫标签可访问性 [英] Angular Material mat-label accessibility

问题描述

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

mat-label 本身是否足以用于屏幕阅读器?attr.aria-label 是必要的还是多余的?

<mat-label>用户名</mat-label><input attr.aria-label="用户名" formControlName="用户名" matInput></mat-form-field>

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

<mat-label>汽车</mat-label><mat-select formControlName="汽车"><mat-option *ngFor="let car of cars" [value]="car.name">{{车名}}</mat-option></mat-select></mat-form-field>

解决方案

[attr.aria-label] 和 [aria-label] 区别的重要说明:

对于一个按钮，你可以像这样设置一个动态的aria-label:

 <button [attr.aria-label]="'这是一个用于' + buttonDescription 的按钮">点击我</button>

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

mat-select 就是这样一种控件

源代码:

@Input('aria-label')ariaLabel: 字符串

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

<mat-select [attr.aria-label]="'这将被 undefined 覆盖！'">...</mat-select>

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

 <mat-select [aria-label]="'选择你自己的冒险！' + 123">...</mat-select><mat-select aria-label="{{ '选择你自己的冒险 - ' + 123 }}">...</mat-select><mat-select aria-label="选择你自己的冒险 123">...</mat-select>

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

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

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.

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>

解决方案

Important note about difference between [attr.aria-label] and [aria-label]:

For a button you can set a dynamic aria-label like this:

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

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

Source code:

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

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>

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>

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