aria-valuetext必须在aria-valuenow为纯数字且需传达自然语言含义（如“中等音量”）时手动设置，且须与aria-valuemin、aria-valuemax同时存在才生效；值须为纯文本，须用setattribute动态同步，不可仅靠框架响应式更新。
aria-valuetext 什么时候必须手动配
当 aria-valuenow 是纯数字（比如 65），但用户需要理解的是“上传进度：已完成 65%”“剩余 2 小时”“中等音量”这类自然语言含义时，aria-valuetext 才有必要显式设置。屏幕阅读器默认只读数字，不会自动补语义。
常见错误：给 <input type="range"> 或 <progress></progress> 只设了 aria-valuenow，没配 aria-valuetext，结果读出“六十五”，用户完全不知道这代表什么。
- 必须同时存在
aria-valuemin和aria-valuemax，否则aria-valuetext会被浏览器静默忽略 -
aria-valuetext值必须是纯文本，不能含 HTML 标签、占位符（如"{value}%"）或 JS 变量引用 - 它只对原生支持范围控件语义的元素有效：
<progress></progress>和<input type="range">；<meter></meter>加了也无效，会被丢弃
怎么用 JavaScript 动态更新 aria-valuetext
不能只改 JS 变量或组件 state，必须直接操作 DOM 属性。最稳妥方式是 element.setAttribute('aria-valuetext', '新文本')。
别用 element.ariaValuetext = 'xxx' —— 部分浏览器不支持属性反射，设了也没用。
- 更新前先检查元素是否已挂载
aria-valuemin和aria-valuemax，否则设置白费 - 避免高频更新（比如每帧都设），可能触发连续语音播报；建议节流，或仅在用户松手（
input事件结束）后更新 - React/Vue 中，不能只靠响应式数据更新；必须在 effect 或生命周期里调用
setAttribute同步 DOM - 示例：调节音量滑块时想读“中等音量”而非“50”：
const slider = document.querySelector('[role="slider"]');<br>slider.setAttribute('aria-valuenow', 50);<br>slider.setAttribute('aria-valuetext', '中等音量');
aria-valuetext 和 aria-labelledby 怎么选
如果页面上已有可见的、语义明确的文本（比如旁边写着“电量：充足（87%）”），优先用 aria-labelledby 关联，而不是重复写 aria-valuetext。
冗余设置会导致屏幕阅读器重复朗读，干扰用户。
-
aria-labelledby="id1 id2"支持跨元素组合，比如把图标 ID、说明文字 ID、数值容器 ID 一起引过去 -
aria-valuetext适合没有可见文本、或需动态生成描述的场景（如实时进度：“约剩余 1 分 23 秒”） - 二者不要混用：同一元素上同时存在时，
aria-valuetext会覆盖aria-labelledby的播报 - 保留原生
<meter></meter>时，aria-labelledby是唯一可靠方案；强行加aria-valuetext会被忽略
容易被忽略的边界和兼容性细节
aria-valuetext 不是“锦上添花”，而是数值型交互控件的语义刚需——但它的生效前提是整个 ARIA 状态链完整。
- 值超出
aria-valuemin/aria-valuemax范围时，部分读屏器（如 ChromeVox）会报错，NVDA 可能直接跳过播报 - 原生
<input type="range">必须带min、max、value属性，哪怕初始值为 0；否则aria-valuenow和aria-valuetext可能失效 - 用
role="progressbar"替代<meter></meter>时，要额外加aria-busy="false"表明值非自动更新，否则读屏器可能误判为“正在加载” - 动态更新时，
aria-valuenow和aria-valuetext必须同步修改；只改一个，读屏器会读出矛盾信息（比如数值是 90，但文本还说“刚开始”）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
