如何将动态数据绑定到 aria-label？

我有一个 HTML 页面上的动态文本绑定到 aria-label。 这是一个 Angular 2应用程序，我正在使用这样的东西:

aria-label="Product details for {{productDetails?.ProductName}}"

但我得到了一个错误:

不能绑定到“ aria-label”，因为它不是“ div”的已知属性。

有什么解决办法吗？

65825 次浏览
小开
最佳答案

Just use attr. before aria-label:

attr.aria-label="Product details for \{\{productDetails?.ProductName}}"

or

[attr.aria-label]="'Product details for ' + productDetails?.ProductName"

Examples here: https://stackblitz.com/edit/angular-aria-label?embed=1&file=src/app/app.component.html&hideExplorer=1

Ps. As @Simon_Weaver mentioned, there are some components that implements its own aria-label @Input, like mat-select.

See his answer here Angular Material mat-label accessibility

小开

You should use square brackets ([ ]) around the target property:

[attr.aria-label]="'Product details for' + productDetails?.ProductName"
小开

this works for me without [].

attr.aria-labelledby="navbarDropdownMenuLink\{\{ i }}"

小开

Also this could be further checked if ProductName in productDetails is null or undefined as

[attr.aria-label]="(typeof productDetails.ProductName !== 'undefined') ?
'Product details for ' + productDetails.ProductName : '' "

So that the JAWS/NVDA/Narrator could able to read if it's value is present or not..


提交答案