Flutter中如何避免屏幕阅读器同时播报静态内容与按钮组件的集合信息

嘿，这个需求我刚好在项目里落地过，核心思路就是精准控制屏幕阅读器的可访问范围，不让它一次性遍历整个Card的所有内容，而是只聚焦当前滑动到的元素。下面是几个亲测有效的实现方式：

1. 用aria-hidden动态控制内容可访问性 #

这是最直接的方案：当元素滑出视口后，给它加上aria-hidden="true"，同时设置tabindex="-1"防止键盘意外聚焦；当前激活的元素则移除这些属性，让屏幕阅读器正常读取。

示例代码：

<!-- 非当前激活的卡片项 -->
<div class="card-item" aria-hidden="true" tabindex="-1">
  <p>静态内容...</p>
  <button>动态按钮</button>
</div>

<!-- 当前激活的卡片项 -->
<div class="card-item active" aria-hidden="false">
  <p>当前要播报的静态内容...</p>
  <button>当前可交互按钮</button>
</div>

配合JavaScript在滑动结束后更新状态：

const cardItems = document.querySelectorAll('.card-item');
const sliderContainer = document.querySelector('.card-slider');

// 监听滑动结束事件（如果用第三方滑动库比如Swiper，替换成对应库的回调即可）
sliderContainer.addEventListener('scrollend', () => {
  // 找到当前完全可见的卡片项
  const activeItem = [...cardItems].find(item => {
    const rect = item.getBoundingClientRect();
    return rect.left >= 0 && rect.right <= window.innerWidth;
  });

  // 遍历所有卡片，更新可访问属性
  cardItems.forEach(item => {
    if (item === activeItem) {
      item.setAttribute('aria-hidden', 'false');
      item.removeAttribute('tabindex');
      // 主动聚焦到当前项的第一个可交互元素，提升键盘可访问性
      item.querySelector('button')?.focus();
    } else {
      item.setAttribute('aria-hidden', 'true');
      item.setAttribute('tabindex', '-1');
    }
  });
});

2. 给每个滑动项添加独立区域角色 #

给每个可滑动元素容器加上role="region"和唯一的aria-label，让屏幕阅读器把每个滑动项识别为独立的内容区域，配合滑动时的焦点切换，就能实现仅播报当前区域的效果。如果需要动态通知用户切换了区域，可以加上aria-live="polite"。

示例代码：

<div class="card-slider">
  <div class="card-slide" role="region" aria-label="第1个卡片内容" aria-live="polite">
    <p>静态内容1</p>
    <button>操作按钮1</button>
  </div>
  <div class="card-slide" role="region" aria-label="第2个卡片内容" aria-live="polite">
    <p>静态内容2</p>
    <button>操作按钮2</button>
  </div>
</div>

3. 关键注意事项 #

• 支持键盘导航：除了手势滑动，一定要允许用户用左右箭头键切换卡片，切换时同步更新焦点和可访问属性，确保键盘用户也能正常操作。
• 多阅读器测试：不同屏幕阅读器（比如VoiceOver、NVDA、JAWS）对属性的解析有细微差异，务必在目标平台上验证效果。
• 避免过度隐藏：aria-hidden只适合暂时不可见但仍存在于DOM的内容；如果是永久隐藏的内容，直接用display: none更合适，它会自动从可访问树中移除。

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