meter不支持aria-valuetext因其是静态只读标签,属HTML原生语义元素而非ARIA可交互控件;规范限定该属性仅适用于range、progressbar等widget角色。

meter 标签本身不支持 aria-valuetext 属性,但可以通过组合使用 role="progressbar" 或包裹在带 aria-label/aria-labelledby 的容器中,来为读屏器提供更清晰、语义准确的数值描述。
为什么 meter 不直接支持 aria-valuetext
根据 WAI-ARIA 规范,aria-valuetext 是专为可交互的“范围控件”(如 input[type="range"]、progress、slider)设计的,用于替代原始数值(如 0.73)提供自然语言描述(如“高水位”)。而 meter 是静态语义化标签,表示只读的标量测量值,其角色是 meter,不属于 ARIA 的“widget”范畴,因此浏览器和读屏器不解析它上面的 aria-valuetext。
推荐做法:用 role="progressbar" 模拟可读性更强的 meter
如果需要自定义读屏文本,可将 meter 替换为语义等效但支持 ARIA 的结构——即使用 div + role="progressbar",并显式声明 aria-valuenow、aria-valuemin、aria-valuemax 和 aria-valuetext:
aria-valuemin="0"
aria-valuemax="100"
aria-valuetext="电量充足(75%)"
>
注意:role="progressbar" 默认暗示“正在变化”,若实际为静态值,建议同时添加 aria-busy="false" 或在文档中明确说明该值不实时更新。
替代方案:用 aria-labelledby 关联可见文本
保留原生 meter,通过外部可见文本(如 span)描述状态,并用 aria-labelledby 关联:
系统负载:中等(75%)
这种方式兼容性好,所有主流读屏器(NVDA、VoiceOver、JAWS)都会朗读 id="meter-label" 的内容,且保持了 meter 的原生语义和样式能力。
避免的错误写法
- 直接在
上写aria-valuetext—— 大部分读屏器会忽略 - 仅用
aria-label包裹meter—— 可能覆盖原生标签名(如“meter”),丢失结构信息 - 省略
aria-valuemin/aria-valuemax(当使用role="progressbar"时)—— 导致读屏器无法正确计算百分比或范围









