How to bind the selection state of a button

Question

I am trying to bind the selection state of button (selected or not selected) with aria-pressed or aria-checked property. But in none of the case sreen reader is announcing the value. I tried like:

 1. data-bind="attr:{'aria-checked': knockoutBooleanVar()}", role = "button"
 2. data-bind="attr:{'aria-pressed': knockoutBooleanVar()}", role = "button"

How can I achieve the screen reader announcing a selection state for the button?

Answer 1

The screenreader will only announce what is in focus, or what is in aria-live regions. If the button is not in focus, the state will not be announced by the screenreader.

You might consider setting up a (small) aria-live region for announcing state changes to controls which are not in focus. This may be useful for giving feedback about input validity or whatever.