aria-valuenow是ARIA属性，用于向辅助技术描述当前值，但不触发视觉更新或逻辑变化；必须用JavaScript通过setAttribute动态同步，且需与aria-valuemin、aria-valuemax和aria-valuetext保持一致。
aria-valuenow 是什么，为什么不能直接用 HTML 属性“设置”
aria-valuenow 是一个 ARIA 属性，用于向辅助技术（如屏幕阅读器）传达当前值，但它本身不控制逻辑或视觉状态。它只是“描述性”的——你改了 aria-valuenow，浏览器不会自动更新进度条、滑块或数值显示，也不会触发任何事件或样式变化。
常见错误是写成：<div role="progressbar" aria-valuenow="50"></div>，然后以为值就“生效”了。其实这只是初始快照；后续变化必须由 JS 主动更新 DOM 属性。
如何用 JavaScript 动态更新 aria-valuenow
绝大多数真实场景中，aria-valuenow 需要和实际状态同步。比如用户拖动 <input type="range">，或定时更新进度条。
- 用
element.setAttribute('aria-valuenow', newValue)更新属性值（推荐，兼容性好） - 或用
element.ariaValueNow = newValue（仅 Chromium/Edge 111+ 和 Safari 17.4+ 支持，Firefox 不支持，慎用） - 务必同时更新
aria-valuetext（如有自定义读法，比如“半满”而不是“50”） - 如果关联了
aria-valuemin/aria-valuemax，三者必须逻辑一致，否则屏幕阅读器会报错或读错
示例（更新进度条）：
立即学习“前端免费学习笔记（深入）”；
const bar = document.querySelector('[role="progressbar"]');
bar.setAttribute('aria-valuenow', 73); // 必须用 setAttribute
bar.style.width = '73%'; // 视觉同步需手动做
哪些元素需要手动管理 aria-valuenow
原生表单控件（如 <input type="range"> 或 <progress>）内部已自动维护 aria-valuenow，无需手动设。但一旦你用 div + role="slider" 或 role="progressbar" 自定义实现，就必须自己管。
-
<div role="progressbar">：必须手动设aria-valuenow、aria-valuemin、aria-valuemax -
<div role="slider">：除aria-valuenow外，还需处理键盘交互（ArrowLeft/ArrowRight等）并同步属性 -
<input type="range">：不要覆盖它的aria-valuenow—— 浏览器会根据value自动计算并暴露给 AT
容易被忽略的兼容性和可访问性坑
只设 aria-valuenow 不够，漏掉关键配套属性会导致屏幕阅读器静默或误读。
- 没设
aria-valuemin和aria-valuemax：部分读屏软件（如 NVDA）可能跳过该控件，或把 50 当成绝对值而非相对比例 - 值超出范围（如
aria-valuenow="120"但aria-valuemax="100"）：会触发 Chrome 的 AX 报告警告，AT 行为不可预测 - 更新后没触发
aria-live：用户无法感知变化（尤其对非焦点控件），可加aria-live="polite"容器包裹并用innerHTML触发播报 - 中文读屏（如 NVDA + Chinese Voice）对
aria-valuetext依赖更强——纯数字“50”可能读成“五十”，而设aria-valuetext="一半"才能准确传达语义
真正麻烦的不是怎么写那行 setAttribute，而是确保它在每次状态变更时被调用、范围合法、且有配套的交互与反馈机制。
