我正在为一个需要使用屏幕阅读器的网站构建一个过滤器，目前我正面临这个问题。
过滤器内置在一个模态中，其中包含一组复选框和一个按钮，该按钮显示用户在选中每个复选框后获得的点击数。按钮中的文本是动态的，并根据选中复选框后的点击数而变化。
按钮中的文本写着“显示X点击”。我已经在按钮中添加了一个角色=“警报”，这样如果按钮中的值/文本发生变化，屏幕阅读器就会立即接收。
我的问题是，当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>

UPDATE设法使用以下内容获得工作解决方案：

<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>