button必须用type="button"，否则在form内会触发表单提交导致页面刷新；需确保键盘可聚焦、屏幕阅读器可识别、移动端触控区达标且焦点管理正确。
button必须用type="button"，不能省略
省略 type="button" 会导致点击时触发表单提交，尤其在 <form></form> 内嵌套时极易意外刷新页面。这不是样式问题，而是语义与行为绑定的强制要求。
- 用
<div> 或 <code><span></span>模拟按钮：键盘无法聚焦、Enter/Space不触发、屏幕阅读器读不出可操作性 - 写了
type但值为"submit"或空字符串：等同于默认 submit 行为 - 移动端双击缩放可能被误触发，需配合
touch-action: manipulation禁用非必要缩放 -
aria-label="增加数值"和aria-label="减少数值"必须分别写在两个<button></button>上，不可共用 - 避免只用 placeholder 当 label——它不参与无障碍树，且失焦即消失
- 若用视觉隐藏 label（如
class="sr-only"），确保 CSS 不影响其可读性（例如未设clip或display: none） - 例如 HTML 设
min="0" max="100" step="1"，但 JS 加减时用了Math.round(value + 0.5)，就可能产生 0.5 这种非法值 - change 事件中校验后若重置了
input.value，必须同步触发input事件（或使用setRangeText等兼容方式），否则 NVDA/JAWS 可能不重读新值 - 避免依赖
input事件做实时防超限——它不覆盖粘贴行为，且在 Safari 中对步进器箭头点击不触发 - 给按钮加
padding或min-width/min-height保证触控区达标，别只靠 font-size 帽子撑大 - 用
:focus-visible而非:focus控制焦点样式，避免鼠标用户看到冗余轮廓 - 点击增减按钮后，焦点应保留在按钮上（而非跳到 input），否则视障用户会丢失操作位置；如需自动聚焦 input，请明确用
input.focus()并延时 1 帧以避开 Safari 的 focus 抑制
aria-label 和 input 的 label 必须成对存在
仅靠视觉上的“+”“−”符号无法被屏幕阅读器识别动作意图，aria-label 是补全语义的最低要求；但更关键的是，<input> 本身必须有明确的关联 <label></label>（显式 for/id 或隐式包裹），否则数值变更后，辅助技术无法定位上下文。
min/max/step 属性必须与 JS 校验严格一致
HTML 原生约束（min、max、step）只是第一道防线，但用户仍可通过粘贴、脚本或 devtools 绕过。如果 JS 中的边界逻辑和 HTML 属性不一致，会导致屏幕阅读器播报的值与实际状态错位，破坏「可预测性」这一 WCAG 核心原则。
移动端触摸反馈和焦点管理容易被忽略
很多团队只测桌面键盘流，但 WCAG 2.2 明确要求「指针目标尺寸 ≥ 44×44px」且「焦点指示清晰可见」。原生 <button></button> 在 iOS 上默认无视觉反馈，Android TalkBack 则对快速连点敏感，这两点不处理，等于放弃移动无障碍。
