如何为Angular星级评分组件添加aria-label适配JAWS等屏幕阅读器

看起来你遇到的问题是Angular属性绑定的语法错误导致aria-label没有正确渲染，所以JAWS无法读取到评分描述。我来帮你梳理下正确的实现方式：

首先，你当前代码里的核心问题：在使用[attr.aria-label]进行属性绑定时，不需要再嵌套{{}}插值语法——方括号内部已经是表达式上下文了，双重插值会导致语法错误，最终aria-label不会被正确赋值。

正确的实现方式 #

有两种简洁的写法可以实现需求：

1. 字符串拼接表达式

直接在属性绑定里用普通字符串拼接，Angular会自动解析表达式并生成正确的aria-label值：

<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>

2. ES6模板字符串（推荐）

使用模板字符串可以让表达式更易读，尤其是变量较多的时候：

<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>

额外的无障碍优化建议 #

为了让屏幕阅读器更好地识别这是一个评分组件，建议给外层div添加role="rating"属性，明确告诉JAWS等工具当前控件的类型：

<div role="rating" [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>

验证方法 #

修改代码后，你可以先在浏览器开发者工具的Elements面板中检查这个div元素，确认aria-label属性已经正确渲染出预期文本（比如当rating=3、starAmount=5时，aria-label应该是The rating is 3 out of 5 stars）。之后再用JAWS测试，按Tab键聚焦到该组件时，应该就能听到对应的评分播报了。

内容的提问来源于stack exchange，提问作者FakeEmpire