vue-star-rating 无障碍实践：用 screen-reader 插槽提升评分的可访问性

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），组件会向它注入两个属性：

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）实际验证过一遍

快速开始

想亲手试试？两条路任选：

1. 通过 npm 安装：npm install vue-star-rating（Vue 3 用户请用npm install vue-star-rating@next）
2. 克隆源码仓库：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