Menu
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?
413
In the template, the aria-label attribute ensures that the control is accessible to screen readers.
Like aria-describedby , aria-labelledby can accept multiple ids to point to other elements of the page using a space separated list. This capability makes aria-labelledby especially useful in situations where sighted users use information from the surrounding context to identify a control.
Don't use aria-label or aria-labelledby on a span or div unless its given a role . When aria-label or aria-labelledby are on interactive roles (such as a link or button ) or an img role, they override the contents of the div or span .
The aria-labelledby property enables authors to reference other elements on the page to define an accessible name. This is useful when using elements that don't have native support for associating elements to provide an accessible name. Some elements get their accessible name from their inner content.
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
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
