Search code examples
htmlangularwai-ariauiaccessibility

How to bind dynamic data to aria-label?

I have dynamic text to bind to aria-label on a HTML page. This is an Angular 2 app. I am using something like this:

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

But I get an error:

Can't bind to 'aria-label' since it isn't a known property of 'div'.

Is there any workaround for this?

Solution

  • 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