aria-valuenow 是只读属性，不能直接用 js 修改，必须先更新控件状态再同步设置，且需与 aria-valuemin、aria-valuemax 一致；适用于自定义滑块、进度条等无原生语义的控件。
aria-valuenow 是只读属性，不能直接用 JS 修改
浏览器会忽略对 aria-valuenow 属性的直接赋值（比如 el.setAttribute('aria-valuenow', '42')），因为它不是 DOM 可写属性，而是辅助技术（如屏幕阅读器）读取的“快照”。真实值必须和控件的交互状态保持一致，否则会误导残障用户。
正确做法是：先更新控件本身的值或状态，再同步设置 aria-valuenow —— 且仅在必要时手动设置（多数原生控件已自动处理）。
什么时候需要手动设 aria-valuenow？
常见于自定义滑块、进度条、仪表盘等非标准控件，它们没有原生 <input type="range"> 或 <progress></progress> 的语义支持。
- 使用
div+ 拖拽实现的滑块 - 用
canvas绘制的环形进度图 - 纯 CSS 动画驱动的加载指示器（无实际 value 属性）
此时必须手动维护 aria-valuenow、aria-valuemin、aria-valuemax 三者一致性，否则屏幕阅读器读不出当前值。
怎么安全地更新 aria-valuenow？
关键原则：值变更必须与视觉/行为同步，且校验范围。示例：
const slider = document.querySelector('.custom-slider');
const valueDisplay = document.querySelector('.value-display');
function updateSliderValue(newValue) {
// 1. 先做范围校验
const clamped = Math.max(0, Math.min(100, newValue));
// 2. 更新视觉（比如 left 偏移）
slider.style.left = `${clamped}%`;
// 3. 更新显示文本（可选但推荐）
valueDisplay.textContent = clamped;
// 4. 最后同步 ARIA 属性 —— 这才是有效写法
slider.setAttribute('aria-valuenow', clamped);
}
// 绑定拖拽或键盘事件后调用 updateSliderValue()
注意：aria-valuenow 必须是数字字符串（如 "50"），不能是浮点数（"50.0" 会被部分读屏软件截断）；也不建议频繁高频更新（如每帧都设），可能触发冗余播报。
常见坑：设了 aria-valuenow 却没设 min/max
单独设 aria-valuenow 没有意义。屏幕阅读器需要知道范围才能计算百分比和播报“50%”或“50 out of 100”。漏设会导致读作“50”，而非“50 percent”或“50 out of 100”。
- 必须同时存在
aria-valuemin和aria-valuemax - 三者类型要一致（都为整数字符串，避免
"0"、"100"、"50.5"混用） - 如果控件支持小数步进，
aria-valuenow可保留一位小数（如"50.5"），但需确保aria-valuemin/aria-valuemax也支持相同精度
最易被忽略的是动态范围变化场景——比如切换数据维度后 max 变了，但忘了更新 aria-valuemax 和重置 aria-valuenow，这时读屏器会把新值误判为超限。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
