如何利用HTML的aria-valuetext属性为数值型控件添加易读状态描述？
- 内容介绍
- 文章标签
- 相关推荐
本文共计983个文字，预计阅读时间需要4分钟。
只有明确属于范围控件（range widget）语义的原生元素才原生支持 `aria-valuetext`。目前仅包括：
常见误解是给 <meter> 加 aria-valuetext —— 它会被浏览器忽略，因为 <meter> 的角色是 meter，不是 widget，WAI-ARIA 规范禁止在非交互/非范围类元素上使用该属性。
-
<progress value="65" max="100" aria-valuetext="上传进度：已完成 65%">✅ 有效 -
<input type="range" aria-valuetext="音量：中等">✅ 有效（需同步管理aria-valuenow） -
<meter value="82" min="0" max="100" aria-valuetext="高水位">❌ 无效，属性被静默丢弃
为什么 <meter> 不能加 aria-valuetext，但可以换种方式实现
<meter> 是只读语义标签，设计初衷就是展示静态标量值（如磁盘使用率、电池电量），不表示“正在变化”或“可操作”。
本文共计983个文字，预计阅读时间需要4分钟。
只有明确属于范围控件（range widget）语义的原生元素才原生支持 `aria-valuetext`。目前仅包括：
常见误解是给 <meter> 加 aria-valuetext —— 它会被浏览器忽略，因为 <meter> 的角色是 meter，不是 widget，WAI-ARIA 规范禁止在非交互/非范围类元素上使用该属性。
-
<progress value="65" max="100" aria-valuetext="上传进度：已完成 65%">✅ 有效 -
<input type="range" aria-valuetext="音量：中等">✅ 有效（需同步管理aria-valuenow） -
<meter value="82" min="0" max="100" aria-valuetext="高水位">❌ 无效，属性被静默丢弃
为什么 <meter> 不能加 aria-valuetext，但可以换种方式实现
<meter> 是只读语义标签，设计初衷就是展示静态标量值（如磁盘使用率、电池电量），不表示“正在变化”或“可操作”。