屏幕阅读器无法正确识别父元素选中状态的技术求助

核心问题分析 #

• 点击子元素（如图片）时，屏幕阅读器未正确同步aria-selected状态更新
• 移动端原生屏幕阅读器无状态播报，根源是容器的语义化与事件处理逻辑不匹配

解决方案步骤 #

1. 语义化重构：用<button>替代<div>作为容器 #

原生<button>自带完整的无障碍语义支持，无需额外配置就能被屏幕阅读器识别为可交互控件，避免自定义<div>的语义缺失问题：

<!-- 重构前结构 -->
<div class="container" aria-selected="false" role="button" tabindex="0">
  <img src="your-image.jpg" alt="Image description">
  <span>My element</span>
</div>

<!-- 重构后结构 -->
<button class="container" aria-selected="false">
  <img src="your-image.jpg" alt="Image description">
  <span>My element</span>
</button>

注：<button>默认自带tabindex和可交互语义，无需手动添加role="button"

2. 事件委托与状态同步优化 #

确保点击任意子元素时，状态更新能被屏幕阅读器捕获，同时手动触发无障碍状态播报：

$('.container').on('click', function(e) {
  e.preventDefault();
  const $btn = $(this);
  const isSelected = $btn.attr('aria-selected') === 'true';
  
  // 切换选中状态
  $btn.toggleClass('selected').attr('aria-selected', !isSelected);
  
  // 强制聚焦按钮，确保屏幕阅读器读取更新后的状态
  $btn.focus();
});

// 支持键盘操作（无障碍标准必备）
$('.container').on('keydown', function(e) {
  if (e.key === 'Enter' || e.key === ' ') {
    $(this).trigger('click');
  }
});

3. CSS样式适配 #

重置<button>的默认样式，保持原容器的视觉效果：

.container {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  /* 保留原容器的其他自定义样式 */
}
.container.selected {
  background-color: green;
}

关键原理说明 #

• 原生<button>的语义化属性会被所有屏幕阅读器正确识别，包括移动端原生阅读器
• 点击子元素时，事件委托到按钮本身，状态更新后通过focus()强制屏幕阅读器重新读取控件状态
• 键盘操作支持（Enter/空格触发）符合WCAG无障碍标准

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