在网页无障碍开发中，meter标签用于展示已知范围内的标量测量值或分数值，比如进度条、评分、电量等场景，默认情况下读屏工具只会播报具体的数值，无法传达数值对应的实际含义，这时候就需要通过aria-valuetext属性补充更清晰的描述信息。
meter标签基础用法
meter标签的核心属性包括min、max、value，分别表示最小值、最大值和当前值，基本的使用示例如下：
<meter min="0" max="100" value="75">75%</meter>
上述代码展示了一个最大值为100、最小值为0、当前值为75的进度条，普通用户可以看到进度条填充到75%的位置，但读屏用户只会听到“75”，无法知道这是进度、评分还是其他含义。
aria-valuetext的作用
aria-valuetext是WAI-ARIA规范中定义的属性，用于为数值类型的控件提供人类可读的文本描述，补充aria-valuenow无法表达的实际意义。对于meter标签来说，添加该属性后，读屏工具会优先播报aria-valuetext的内容，而不是单纯的数值，让视障用户能更直观理解信息。
meter标签添加aria-valuetext的方法
直接在meter标签上添加aria-valuetext属性即可，属性值填写需要播报的描述文本，具体示例如下：
场景1：进度条场景
当meter用于展示任务进度时，可以补充进度对应的描述：
<meter min="0" max="100" value="75" aria-valuetext="当前任务进度为百分之七十五，还剩百分之二十五未完成">75%</meter>
场景2：评分场景
当meter用于展示用户评分时，可以补充评分对应的等级描述：
<meter min="0" max="5" value="4.5" aria-valuetext="用户评分为4.5分，属于优秀等级">4.5分</meter>
场景3：动态更新数值的场景
如果meter的数值是动态变化的，需要通过JavaScript同步更新aria-valuetext的值，示例代码如下：
// 获取meter元素
const meterEle = document.getElementById('dynamic-meter');
// 模拟动态更新数值
let currentValue = 0;
const timer = setInterval(() => {
currentValue += 10;
if (currentValue > 100) {
clearInterval(timer);
return;
}
// 更新meter的value值
meterEle.value = currentValue;
// 同步更新aria-valuetext
meterEle.setAttribute('aria-valuetext', `当前加载进度为百分之${currentValue}`);
}, 1000);
对应的HTML结构为：
<meter id="dynamic-meter" min="0" max="100" value="0" aria-valuetext="当前加载进度为百分之零">0%</meter>
相关注意事项
- aria-valuetext的内容要简洁准确，避免过长导致读屏播报冗余。
- 如果meter标签已经通过子元素内容传达了明确的含义，也可以不添加aria-valuetext，但建议优先保证读屏体验。
- 不要同时使用
title属性替代aria-valuetext，title属性的读屏支持性不如WAI-ARIA属性稳定。 - 确保aria-valuetext的描述和value数值对应，避免出现描述和实际数值不符的情况。
meteraria-valuetext无障碍访问读屏适配修改时间：2026-06-21 10:36:28