如何为带可变文本的时间周期控制按钮正确设置A11Y/ARIA属性？

API 探路者

2026-7-19

解决方案：让屏幕阅读器同时读取按钮标签和当前值

针对这个无障碍设计的问题，这里有两个实用的实现方案，既能保留按钮的动态文本，又能让屏幕阅读器获取完整的标签信息：

方案1：内部嵌入视觉隐藏的标签文本

直接在按钮内部添加一段视觉上隐藏的标签文本，和动态值放在一起。屏幕阅读器会读取完整内容，普通用户只会看到动态值。

代码示例

<button>
  <span class="sr-only">时间周期：</span>
  3 days
</button>

<!-- 视觉隐藏样式 -->
<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
</style>

效果

屏幕阅读器会读出：时间周期：3 days，按钮，视觉上仅显示3 days。

方案2：用`aria-labelledby`关联标签和值

如果标签和值需要分开维护（比如标签内容固定、值动态更新），可以用aria-labelledby将两个元素的文本合并作为按钮的无障碍标签。

代码示例

<!-- 固定的视觉隐藏标签 -->
<span class="sr-only" id="time-period-label">时间周期</span>

<button aria-labelledby="time-period-label time-period-value">
  <span id="time-period-value">1 week</span>
</button>

<!-- 视觉隐藏样式同上 -->
<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
</style>