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

Question

I'm building a filter for a site that needs to work with a screen reader and i'm currently facing this problem.

The filter is built in a modal that houses a set of checkboxes and one button that displays how many hits the user has got after selecting each checkbox. The text in the button is dynamic and changes depending on the number of hits there is after a checkbox has been selected.

The text in the button says "Show X hits". I have added a role="alert" to the button so that the screen reader pick ups imidiatly if the value/text changes in the button.

My question is, is it possible for the screen reader to read the text "X hits" when the button is triggerd by the role="alert" and the text "Show X hits" when the user navigtes down to the button?

Example of my button:

<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 Managed to get a working solution using this:

<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

You should not put a live region inside a button. The button role has presentational children .

That means that, as per ARIA standard, the role of any child of the button should be ignored. This includes role="alert" .

Maybe it works in your browser/screen reader combination, but I wouldn't rely on that.

I don't see a reason why the text would be inside the button anyway, since your are hiding it.

So I'd recommend this:

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