html星级评分必须用原生input[type="radio"]实现，否则将导致屏幕阅读器无法识别、键盘无法聚焦、表单提交丢失值；须用css隐藏radio并配合带aria-label的label控制交互，dom顺序为5→1星，禁用pointer-events:none，半星仅用于只读展示且需aria-hidden="true"。
HTML星级评分必须用 input[type="radio"] 实现，否则屏幕阅读器读不出选项、键盘无法聚焦、表单提交丢失值——这是可访问性的底线，不是优化项。
为什么不能用 div 或 span 模拟星星
纯JS或div模拟的“星级”在无障碍层面是失效的：没有语义、不响应 Tab 键导航、Enter 或 Space 无法选中、屏幕阅读器只朗读“星号图片”，不说明“5星可选”或“当前已选4星”。更严重的是，表单提交时 name="rating" 根本不会带出任何值。
必须保留原生 input[type="radio"]，仅通过CSS隐藏视觉样式（如 position: absolute; left: -9999px），再用 label 承载交互区域和图标。
- 每个
input必须有唯一id，对应label[for]属性 -
label必须包含title或aria-label，例如aria-label="选中4星" - 禁用
pointer-events: none在容器上，iOS Safari 会直接忽略点击
键盘操作与焦点管理怎么配
用户用 Tab 进入评分组时，焦点应落在第一个可选星（通常是5星）上；按方向键（←→）需能切换选项，Space 或 Enter 确认。这依赖浏览器对 radio 组的原生支持，无需额外JS。
但要注意两点：一是 radio 元素在DOM中必须按 5→1 星顺序排列（即高分在前），否则方向键逻辑错乱；二是必须给每个 label 设置 tabindex="0" 吗？不需要——只要 input 是可聚焦的（未设 disabled 或 tabindex="-1"），点击 label 就会自动聚焦对应 input，且焦点样式要可见（比如加 outline）。
- 避免写
tabindex="0"到label上，会造成重复焦点项 - 用
:focus-within或input:focus + label控制焦点高亮，确保视觉反馈明确 - 移动端 Safari 对
label的点击热区敏感，建议最小尺寸 ≥ 44×44px
半星显示如何兼顾可访问性
半星（如 4.5）本质是展示态，不是交互态。用户仍只能点选整星（1–5），半星只用于渲染平均分或只读结果。若强行让半星可点选，会破坏 radio 的单选语义，也增加键盘操作复杂度。
实现只读半星推荐双层结构：底层灰色整星 + 上层黄色宽度为 90% 的同尺寸元素（用 overflow: hidden 截断，比 clip-path 兼容性更好）。关键在于：这个半星容器不能包裹 input，也不参与表单提交，仅用作 aria-hidden="true" 的视觉补充。
- 交互评分区必须是独立的
radio组，与只读半星 DOM 分离 - 只读半星旁加
aria-live="polite"区域，动态播报 “平均评分 4.5 星” - 避免用 SVG
<use></use>引用无aria-label的 symbol，会导致屏幕阅读器静默
最易被忽略的一点：所有星星 label 的 title 值必须动态匹配当前 value，比如 value="3" 对应 title="3星"，而不是统一写“点击评分”。否则键盘用户听到的永远是同一句话，无法区分选项差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
