屏幕阅读器适配问题：如何让按钮在alert触发与聚焦时读取不同文本？

我正在为网站构建一款支持屏幕阅读器的筛选器，遇到如下场景：

• 筛选器放在模态框（modal）中，包含一组复选框和一个按钮
• 按钮文本会随用户选择复选框后的命中结果数动态变化，默认显示“Show X hits”
• 已给按钮添加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>

实现逻辑说明 #

• 视觉上显示的文本通过aria-hidden="true"标记，避免被屏幕阅读器读取，防止内容重复
• 专门用sr-only容器存放供屏幕阅读器解析的内容，将静态文本“Show”和动态变化的“X hits”拆分
• 仅给动态数值部分添加role="alert"，这样当命中数变化时，屏幕阅读器只会播报变化的“X hits”；当用户聚焦按钮时，会读取完整的“Show X hits”内容

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