代码之家 › 专栏 › 技术社区 › pengz

角材料垫标签可访问性

wai-aria accessibility angular

pengz · 技术社区 · 5 年前

attr.aria-label

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

0 回复 | 直到 5 年前

Simon_Weaver 5 年前

关于 `[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.] 的语法 材料选择 ariaLabel 将属性输入到永远不会被设定。

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

相反,你必须使用 aria标签 输入属性。

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

[阿里亚标签] 当你应该使用 [属性标签] (因为编译器会告诉您没有这样的输入属性)。因此,如果您不想去寻找您正在使用的控件的API,请从开始 [阿里亚标签]

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

Omri L 5 年前

如果使用mat label字段,则不应直接将aria标签放置在输入元素上。对你来说这是多余的。

标签对于窗体字段控件。如果未指定浮动标签,则应使用aria label、aria labelledby或

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

推荐文章

Jun Yin · 如何修复“ARIA属性必须符合有效值”?

7 年前

bluePearl · 在没有JavaScript的情况下打开后,将键盘焦点放在modal上

7 年前

bawse · 角2和角4中的咏叹调可及性

7 年前

Taranjit Kang · Aria Live Region在Angular 2 ngIf验证中不断重复

7 年前

Semicolon · 2d x/y轴平面输入的适当aria角色和行为是什么?

7 年前

wscourge Kiran Balakrishnan · 可访问的隐藏文件输入

7 年前

martini449 · NVDA忽略具有role=“alert”的角度*ngIf块

8 年前

Andrew Pham · 为表格标题和免责声明添加WCAG 2.0 aria标签

8 年前

franenos · 可访问用户链接内的图像

9 年前

Michel · 为屏幕阅读器的元素(div)设置描述

9 年前

角材料垫标签可访问性

关于 [attr.aria-label] 和 [aria-label] :

关于 `[attr.aria-label]` 和 `[aria-label]` :