role="spinbutton" 必须同时设置 aria-valuenow、aria-valuemin 和 aria-valuemax，否则屏幕阅读器无法识别为可调节数字控件；仅设 role 会被忽略，且需严格校验值在范围内并支持标准键盘操作。
role="spinbutton" 必须配 aria-valuenow 和 aria-valuemin/aria-valuemax
单独写 role="spinbutton" 不会触发屏幕阅读器的“微调按钮”语义，它会被当成普通元素忽略。必须同时提供当前值和取值范围，否则辅助技术无法理解这是个可调节的数字控件。
-
aria-valuenow是必需的，表示当前数值（字符串形式，如"42"） -
aria-valuemin和aria-valuemax也必须成对出现，不能只设一个 - 如果值是小数，
aria-valuenow可以带小数点，但需确保aria-valuetext（可选）不重复暴露格式细节
原生 <input type="number"> 比手动实现 role="spinbutton" 更可靠
浏览器对 <input type="number"> 的 ARIA 支持更成熟：自动映射 role、处理键盘增减（↑↓）、支持 step 属性，并正确暴露 min/max/value。手动用 div + role="spinbutton" 容易漏掉焦点管理、键盘事件（Page Up/Page Down、Home/End）或 aria-valuetext 的动态更新。
- Chrome/Firefox/Safari 对
type="number"的 screen reader 兼容性远高于自定义 spinbutton - 若需禁用原生箭头（比如用 CSS 隐藏），不影响语义；但若用 JavaScript 完全接管增减逻辑，就必须同步更新
aria-valuenow - Android TalkBack 对自定义
role="spinbutton"支持较弱，常读作“button”而非“spin button”
键盘交互必须支持 ↑ ↓ Page Up/Page Down Home/End
符合 WCAG 的 spinbutton 要响应标准数字调节快捷键，不只是鼠标点击上下按钮。仅监听 click 或自定义 click 事件，会导致键盘用户无法操作。
- ↑ / ↓：步进增减（步长由
aria-valuetext或隐含的 step 决定） - Page Up / Page Down：通常按 10 倍步长增减（需自行实现逻辑）
- Home / End：跳转到
aria-valuemin/aria-valuemax - 输入数字时应直接覆盖当前值，而非追加——这点常被忽略，导致用户输
"5"后再按 ↑ 变成"51"
不要用 role="spinbutton" 包裹整个表单或非数字控件
ARIA role 是精确语义标记，不是样式钩子。role="spinbutton" 只适用于单一数字调节场景，比如字体大小、音量、行高。把它套在日期选择器、颜色滑块或带单位的输入框（如 "12px"）上，会误导辅助技术。
- 日期选择推荐用
role="grid"+aria-activedescendant - 滑块用
role="slider"，并配aria-valuenow、aria-valuemin、aria-valuemax、aria-valuetext - 带单位的输入（如 "14pt"）本质是文本输入，应保持
role="textbox"，而非强行塞进 spinbutton
最常被忽略的是：spinbutton 的 value 必须是纯数字，且所有交互（键盘、按钮、直接输入）都要严格校验并 clamped 到 min/max 范围内——边界检查漏掉一行代码，就可能让屏幕阅读器读出 "-999999" 这种无效值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
