아리아 레이블에 동적 데이터를 바인딩하는 방법은 무엇입니까?

아리아 레이블에 동적 데이터를 바인딩하는 방법은 무엇입니까?

바인딩할 동적 텍스트가 있습니다.aria-labelHTML 페이지에서.이것은 Angular 2 앱입니다.나는 다음과 같은 것을 사용하고 있습니다.

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

하지만 오류가 발생합니다.

'aria-label'은 'div'의 알려진 속성이 아니므로 'aria-label'에 바인딩할 수 없습니다.

이것에 대한 해결책이 있습니까?

그냥 사용하기attr.아리아 레이블 앞:

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

또는

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

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

Ps. @Simon_Weaver가 언급했듯이 자체 아리아 레이블을 구현하는 일부 구성 요소가 있습니다.@Input,맘에 들다mat-select.

여기에서 각진 재료 매트 라벨 접근성에 대한 답변을 확인하십시오.

대괄호([ ]) 대상 속성 주위:

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

또한 productDetails의 ProductName이 null인지 다음과 같이 정의되지 않았는지 추가로 확인할 수 있습니다.

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

JAWS/NVDA/Narator가 값이 존재하는지 여부를 읽을 수 있도록 합니다.

이것은 없이도 나에게 효과가 있습니다.[].

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

언급URL : https://stackoverflow.com/questions/42658800/how-to-bind-dynamic-data-to-aria-label