aria-valuetext需在aria-valuenow为纯数字但需表达自然语言语义（如“已加载3/4”）时手动设置，必须配合aria-valuemin、aria-valuemax使用，且须通过setattribute动态更新dom属性值。
aria-valuetext 什么时候需要手动设置
当 aria-valuenow 是纯数字（比如 75），但实际语义需要表达为“已加载 3/4”“剩余 2 小时”“中等强度”这类非数值描述时，aria-valuetext 才有必要显式提供。屏幕阅读器默认会把 aria-valuenow 读作数字，不会自动翻译成自然语言。
常见误用：给一个范围控件（如 <input type="range">）只设了 aria-valuenow，却没配 aria-valuetext，导致读出“七十五”，用户完全不知道这代表什么。
- 必须配合
aria-valuemin和aria-valuemax使用，否则无效 - 值应为纯文本，不包含 HTML 标签或占位符（如
"{value}%"） - 动态更新时，需同步更新
aria-valuetext的 DOM 属性值，不能只改 JS 变量
如何用 JavaScript 动态更新 aria-valuetext
直接操作 element.setAttribute('aria-valuetext', ...) 是最稳妥的方式。不要用 element.ariaValuetext = ...（部分浏览器不支持属性反射）。
示例场景：调节音量滑块，希望读作“中等音量”而非“50”：
const slider = document.querySelector('[role="slider"]');
slider.setAttribute('aria-valuenow', 50);
slider.setAttribute('aria-valuetext', '中等音量');
- 更新前先检查元素是否已挂载
aria-valuemin和aria-valuemax，否则设置aria-valuetext会被忽略 - 避免高频更新（如每帧都设），可能触发过多语音播报；建议节流或仅在用户松手后更新
- 若使用 React/Vue，确保通过 DOM API 设置，而非仅更新响应式数据
aria-valuetext 与 title 属性的区别
title 是通用提示，对屏幕阅读器支持差（多数情况下被忽略），且鼠标悬停才显示；aria-valuetext 是专为辅助技术设计的语义替代文本，仅影响读屏行为，不影响视觉呈现。
- 不要用
title替代aria-valuetext——它不会被 VoiceOver 或 NVDA 读出 - 两者可共存：
title给鼠标用户看，aria-valuetext给屏幕阅读器用户听 -
aria-valuetext不会触发 tooltip，也不影响焦点、键盘导航或 CSS 伪元素
兼容性与测试要点
主流屏幕阅读器（NVDA、JAWS、VoiceOver）均支持 aria-valuetext，但前提是控件角色正确（如 role="slider"、role="progressbar"）。纯 div 加 aria-valuenow 而无角色，整个 ARIA 套件都不生效。
- 测试时务必用真实屏幕阅读器（而非开发者工具模拟），因为 DevTools 的“无障碍树”可能显示属性，但不反映实际播报逻辑
- Android TalkBack 对
aria-valuetext支持较弱，更依赖aria-label或实时live region补充说明 - 如果控件是自定义实现（非原生
input[type="range"]），必须同时设置tabindex="0"和键盘事件处理（ArrowLeft/Right等），否则即使 ARIA 正确，也无法被键盘用户访问
aria-valuetext 没用，控件得先是个“可操作的控件”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
