vue-star-rating 无障碍实践：用 screen-reader 插槽提升评分的可访问性
【免费下载链接】vue-star-rating:star: A simple, highly customisable star rating component for Vue 2.x. / 3.x项目地址: https://gitcode.com/gh_mirrors/vu/vue-star-rating
vue-star-rating 是一款简单、高度可定制的 Vue 2.x / 3.x 星级评分组件（star rating component），基于 SVG 渲染，支持半星、自定义颜色、只读模式等丰富特性。你可能不知道，它还内置了完善的无障碍（Accessibility）支持：通过screen-reader插槽，可以让屏幕阅读器准确朗读评分结果。本文用通俗的语言，带你彻底掌握 vue-star-rating 的无障碍实践，让每一个用户——包括视障人士——都能顺畅地使用你的评分功能。
为什么评分组件需要无障碍支持？
星级评分是一个典型的"视觉化交互"组件：星星亮了几颗、半星状态、鼠标悬停预览……这些信息对普通用户一目了然，但对使用屏幕阅读器（Screen Reader）的用户来说，却可能是一团"无声的图形"。
无障碍（可访问性，a11y）的核心目标，就是为这类用户提供等价的文本信息。评分组件的无障碍优化通常要回答三个问题：
- 🗣️ 当前评分是多少？
- ⭐ 总共几颗星？
- 👆 我能不能操作、如何操作？
vue-star-rating 从 2.1.0 版本起就内置了针对 screen reader 的支持，开箱即用，无需任何额外配置。
vue-star-rating 内置的无障碍实现原理
在 src/star-rating.vue 的模板最上方，有一段"看不见但读得出"的代码：组件把朗读文本放进了一个sr-only容器中。
<div class="sr-only"> <slot name="screen-reader" :rating="selectedRating" :stars="maxRating"> <span>Rated {{ selectedRating }} stars out of {{ maxRating }}</span> </slot> </div>sr-only的 CSS 实现非常经典（见 src/star-rating.vue 样式部分）：把元素定位到屏幕外、宽高压缩到 1px、并隐藏溢出。这样它对视觉用户完全不可见，但对屏幕阅读器完全可读。
默认情况下，屏幕阅读器会朗读："Rated 4 stars out of 5"（评了 4 星，共 5 星）。这个默认文案已经足够清晰，但如果你想让它更贴合自己的业务场景，就该轮到screen-reader插槽登场了。
用 screen-reader 插槽自定义朗读文本
screen-reader是一个作用域插槽（scoped slot），组件会向它注入两个属性：
| 插槽属性 | 含义 | 类型 |
|---|---|---|
rating | 当前选中的评分值 | Number |
stars | 星级总数（由max-rating决定） | Number |
Vue 3 用法示例
<star-rating v-model:rating="rating"> <template v-slot:screen-reader="slotProps"> 这款商品已被用户评为 {{ slotProps.rating }} 分（满分 {{ slotProps.stars }} 分） </template> </star-rating>Vue 2 用法示例
<star-rating v-model="rating"> <template slot="screen-reader" slot-scope="slotProps"> 这款商品已被用户评为 {{ slotProps.rating }} 分（满分 {{ slotProps.stars }} 分） </template> </star-rating>就这么简单！替换之后，屏幕阅读器朗读的就不再是默认的英文句式，而是你自定义的中文（或任何语言）文案。项目自带的示例 examples/commonjs/App.vue 里就有完整可运行的自定义插槽代码，可以直接参考。
三个提升无障碍体验的实战技巧
技巧一：结合只读模式，服务"展示型"评分
很多电商详情页的评分是只读展示的。这时可以配合read-only属性，让屏幕阅读器也能读到最终评分：
<star-rating :rating="4.5" :read-only="true" :increment="0.5" > <template v-slot:screen-reader="slotProps"> 商品综合评分 {{ slotProps.rating }} 分，共 {{ slotProps.stars }} 星 </template> </star-rating>技巧二：为半星和自定义步进写清文案
当使用increment="0.5"（半星）或increment="0.1"（流体星星）时，slotProps.rating可能是3.5、4.2这类小数。建议在文案中明确"满分"概念，避免用户听到一串莫名其妙的小数。
技巧三：用测试守护你的无障碍文案
组件默认朗读文案的正确性，其实是有单元测试保障的。在 spec/star-rating.spec.js 中可以看到这样的断言：
it('should set the screenReader scoped slot to the default', () => { const wrapper = mount(StarRating, { propsData: { rating: 4 } }) expect(wrapper.text()).toContain('Rated 4 stars out of 5') })如果你自定义了插槽文案，也建议仿照这个模式补一条测试，防止后续改动不小心破坏了无障碍输出。
无障碍实践检查清单 ✅
给组件做完无障碍优化后，可以对照这份清单自查：
- 默认朗读文案是否存在（未删除
sr-only容器） - 自定义文案是否包含"评分值"和"总分"两个关键信息
- 文案语言是否与页面语言一致
- 只读场景下，评分是否依然可以被朗读
- 是否已用屏幕阅读器（如 NVDA、VoiceOver）实际验证过一遍
快速开始
想亲手试试？两条路任选：
- 通过 npm 安装：
npm install vue-star-rating（Vue 3 用户请用npm install vue-star-rating@next） - 克隆源码仓库：
git clone https://gitcode.com/gh_mirrors/vu/vue-star-rating
然后在组件中注册StarRating，加上一个screen-reader插槽，无障碍评分功能就完成了。
总结
无障碍不是可选项，而是优秀前端产品的必备素质。vue-star-rating 用一个小小的screen-reader插槽，把"评分可访问性"的门槛降到了最低：默认可用、一行代码即可定制、还有现成的测试样例可参考。下次使用 vue-star-rating 时，记得为你的星星们配上"会说话"的文案——这对所有用户都是一种温柔的关怀 💛
【免费下载链接】vue-star-rating:star: A simple, highly customisable star rating component for Vue 2.x. / 3.x项目地址: https://gitcode.com/gh_mirrors/vu/vue-star-rating
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
)
