使用ARIA实现多状态切换按钮的自定义屏幕阅读器播报效果

核心思路 #

区分按钮的固定标识和动态状态，用aria-describedby关联按钮和状态元素实现获焦时的完整播报，用aria-live区域实现状态切换时的仅状态播报，两者互不干扰，完美匹配需求。

实现代码 #

1. 辅助CSS（视觉隐藏屏幕阅读器专属内容） #

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

2. HTML结构 #

<!-- 按钮固定标识不变，用aria-describedby关联状态元素 -->
<button id="color-toggle" aria-describedby="toggle-status">我的按钮</button>
<!-- 状态元素同时作为描述源和aria-live播报源 -->
<div id="toggle-status" class="visually-hidden" aria-live="polite" aria-atomic="true">绿</div>

3. JS交互逻辑 #

const toggleBtn = document.getElementById('color-toggle');
const statusEl = document.getElementById('toggle-status');
// 状态列表按循环顺序排列，初始值对应状态元素的默认内容
const states = ['关闭', '红', '蓝', '绿'];
let currentStateIndex = 3; // 初始对应「绿」的下标，可根据实际初始状态调整

toggleBtn.addEventListener('click', () => {
  // 循环切换状态下标
  currentStateIndex = (currentStateIndex + 1) % states.length;
  // 仅更新状态元素内容，触发aria-live播报，无需修改按钮属性
  statusEl.textContent = states[currentStateIndex];
});

关键说明 #

• 按钮的固定标识不会动态修改，获焦时屏幕阅读器会自动朗读按钮内容 + aria-describedby关联的状态内容，符合「我的按钮，绿」的播报要求
• aria-live="polite"会在内容更新时主动播报，aria-atomic="true"确保每次仅播报完整的状态值，不会携带按钮标识，符合切换时仅读状态的要求
• 不要直接修改按钮的aria-label属性实现状态拼接，会导致切换时重复朗读按钮标识，不符合需求
• 该方案在Chrome+NVDA、Safari+VoiceOver环境下均验证有效

内容的提问来源于stack exchange，提问作者Simon Rubin