屏幕阅读器 - 仅阅读具有 role="alert" 而不是焦点的元素

Question

我正在为需要使用屏幕阅读器的网站构建过滤器，而我目前正面临这个问题。

该过滤器构建在一个模态中，该模态包含一组复选框和一个按钮，该按钮显示用户在选中每个复选框后获得的点击次数。 按钮中的文本是动态的，并且会根据选中复选框后的点击次数而变化。

按钮中的文字显示“显示 X 次匹配”。 我在按钮上添加了一个 role="alert" ，以便屏幕阅读器在按钮中的值/文本发生变化时立即获取。

我的问题是，当按钮被 role="alert" 触发时，屏幕阅读器是否可以阅读文本“X hits”，而当用户向下导航到按钮时，文本“Show X hits”？

我的按钮示例：

<button type="button" role="alert" class="btn btn-primary" v-on:click="search()">
   <span class="sr-only">{{amount}} hits.</span>
   <span>Show {{amount}} hits.</span>
</button>

更新设法使用此方法获得有效的解决方案：

<button type="button" class="btn btn-primary" v-on:click="search()">
   <span aria-hidden="true">Show {{amount}} hits.</span>
      <div class="sr-only">
          <span>Show</span>
          <span role="alert">{{amount}} hits</span>
      </div>
</button>

Answer 1

您不应该将活动区域放在按钮内。 button角色有presentational children 。

这意味着，根据 ARIA 标准，应该忽略按钮的任何子项的角色。 这包括role="alert" 。

也许它适用于您的浏览器/屏幕阅读器组合，但我不会依赖它。

我看不出文本为什么会在按钮内的原因，因为你隐藏了它。

所以我推荐这个：

<button type="button" class="btn btn-primary" v-on:click="search()">
  Show {{amount}} hits.
</button>
<div class="sr-only" role="alert">{{amount}} hits</div>