将ARIA-LABEL添加到角分量中

Question

我已经构建了一个星级评分组件，我想将其添加到屏幕读取器(如Jaws(的描述中，以便在选项卡上阅读。现在，当我用下巴测试此问题时，没有读取描述(理想情况下，它应该为用户读取评级(。如何在角度组件中添加ARIA标签？

star-rating.component.ts

<div [attr.aria-label]="'the rating is' + {{rating}} + 'out of' + {{starAmount}} + 'stars'">
    <app-star 
    *ngFor="let star of stars; let i = index"
    [rating]="rating"
    [starAmount]="starAmount">
    </app-star>
<div>

star-rating.component.ts

import { Component, Input } from "@angular/core";
@Component({
  selector: "app-star-rating",
  templateUrl: "./star-rating.component.html",
  styleUrls: ["./star-rating.component.css"]
})
export class StarRatingComponent {
  @Input() starAmount;
  @Input() rating;
  total;
  Arr = Array;

}

Answer 1

div中的 aria-label出现问题：当您使用角度输入([attr.aria-label](时，该值已经是JavaScript。因此，您无需在其中使用{{ }}。

以下行应该有效： [attr.aria-label]="'the rating is ' + rating + ' out of ' + starAmount + ' stars'"

我想知道，为什么您首先没有从Angular遇到任何错误。

Answer 2

在我的情况下，NVDA和下巴都从下面的语义读取屏幕读取器读取如下所示的条件值

[attr.aria-label]="((client.issbInstalled)? 'Secure Browser is installed' :
 'Secure Browser is not installed ') + 'with' + index + client?.clientHostName"

或

[attr.aria-label]="{
 true:'Secure Browser is installed with' + client?.clientHostName, 
 false: 'Secure Browser is not installed with' + client?.clientHostName
}[client.issbInstalled]"