应使用 fieldset 包裹的 radio 按钮实现星星评分，而非 range 输入框；它天然支持键盘导航、屏幕阅读器播报、表单提交，并可通过 aria-roledescription 和动态 aria-valuetext 满足无障碍要求。
HTML input[type="range"] 不能直接替代星星组件
它能实现数值选择，但缺少语义、可访问性与交互反馈——用户点不到“半颗星”，屏幕阅读器读不出“3.5星好评”，hover 时也无法高亮前3颗星。原生 range 滑块只是个数值控制器，不是评分表达载体。
常见错误现象：input[type="range"] 被套上「评分」label 后，测试发现移动端拖动不灵敏、键盘无法用方向键微调、焦点离开后值丢失；更关键的是，设计师给的交互稿里要求“鼠标移到第4颗星就显示4星预览”，这完全超出 range 的能力边界。
- 星星组件本质是「离散状态 + 视觉映射 + 可点击区域」，而 range 是连续数值输入控件
- WCAG 要求评分控件必须支持键盘操作（Tab 进入、空格/回车确认、方向键切换整星）、提供明确的当前值描述（
aria-valuetext="4颗星"） - range 默认无视觉分段，强行用 CSS 刻度线模拟星星，会破坏语义结构，导致
role="slider"与实际视觉不符
用 fieldset + input[type="radio"] 实现真正可用的星星评分
这是目前最稳妥、兼容性最好、无障碍支持最完整的方案。每颗星是一个带 label 的 radio 按钮，天然支持键盘导航、屏幕阅读器播报、表单序列化，且 CSS 可完全控制视觉表现。
使用场景：需要提交到后端的评分（如商品评价）、需支持键盘和触控双模操作、SEO 或无障碍合规有硬性要求。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须用
fieldset包裹，legend提供整体说明（如“请为本次服务打分”），否则屏幕阅读器无法理解控件用途 - 每个
input[type="radio"]的value设为数字（1–5），id与对应label[for]严格匹配 - 隐藏原生 radio，用
::before或背景图绘制星星，hover/focus 时通过兄弟选择器高亮前面所有星星（例如input:nth-of-type(3):checked ~ label） - 务必添加
aria-label或动态aria-valuetext（JS 监听 change 后更新），让读屏软件说出“4颗星，推荐”而非“选中，选项4”
aria-roledescription 和 aria-valuetext 是无障碍落地的关键
光有结构不够，必须告诉辅助技术“这是星星，不是普通单选”。很多项目加了 radio 却仍被无障碍审计打低分，问题就出在这两个属性没配对。
参数差异：aria-roledescription="star rating" 是静态说明，告诉用户这个控件类型；aria-valuetext 必须动态更新，比如用户选中第3颗星时，对应 label 的 aria-valuetext 应设为“3颗星，一般”（中文需带程度描述，不能只写“3”）。
- 不要只依赖
title属性——它在部分读屏模式下不播报，且无语义权重 - 避免在
input上直接写aria-valuetext，应绑定到可视的label或旁白容器（role="status"）上，确保实时可感知 - 移动端 Safari 对
aria-roledescription支持较弱，需额外测试 VoiceOver 下是否正确朗读“star rating”
要不要用第三方星星组件？看三点
除非团队有专职前端保障长期维护，否则不建议引入纯 JS 星星库（如 raty-js 或早期 jQuery 插件）。它们往往绕过原生表单机制，把值存在自定义 data 属性里，导致 submit 时拿不到、Vue/React 中难以响应式同步、SSR 渲染错乱。
- 优先选「零依赖、基于原生表单」的轻量方案（如用纯 CSS + 少量 JS 绑定
change事件） - 如果必须用库，检查它是否输出标准
input[type="radio"]结构、是否支持aria-*属性透传、是否有 TypeScript 类型定义 - 警惕“自动初始化”行为——很多库在 DOM ready 时遍历所有
.rating元素并替换为 canvas 或 div，这会破坏服务端渲染首屏内容，也干扰 CSS-in-JS 的样式隔离
复杂点在于：视觉上要像星星，语义上得是表单控件，交互上得兼顾鼠标、键盘、触摸，而三者稍有偏废，就会在某个用户群体里彻底失效。别为了少写几行 CSS，把整个评分控件变成不可访问的装饰品。
