meter 标签如何添加 aria-valuetext 提供更清晰的读屏信息

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-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuetext="电量充足（75%）"
>

注意：role="progressbar" 默认暗示“正在变化”，若实际为静态值，建议同时添加 aria-busy="false" 或在文档中明确说明该值不实时更新。

替代方案：用 aria-labelledby 关联可见文本

保留原生 meter，通过外部可见文本（如 span）描述状态，并用 aria-labelledby 关联：

  
  

这种方式兼容性好，所有主流读屏器（NVDA、VoiceOver、JAWS）都会朗读 id="meter-label" 的内容，且保持了 meter 的原生语义和样式能力。

避免的错误写法

• 直接在 上写 aria-valuetext —— 大部分读屏器会忽略
• 仅用 aria-label 包裹 meter —— 可能覆盖原生标签名（如“meter”），丢失结构信息
• 省略 aria-valuemin/aria-valuemax（当使用 role="progressbar" 时）—— 导致读屏器无法正确计算百分比或范围