If I understand correctly, what you're trying to find out is how to tell a screen reader what clicking on A/B will do, and potentially the effects of clicking on A/B.
As @slugolicious pointed out, aria-controls
would sort of do that, but it's not very well supported across screen readers. Instead, what you'll want to do is provide the screen reader with enough context to understand what it will effect, and then announce the changes caused by the click (otherwise clicking on it will result in silence, making it look like it's broken).
For example, the A button could say "Increment B counters." This would be enough contextual information for the screen reader to understand what the button will do. If for some reason you don't want to show the full text (so it'll show "click me" visually), you can hide the additional information just for visual users, thus reading as "click me to increment b counters" just for screen readers.
To announce changes to the content, you could add aria-live="polite" aria-atomic="true"
to the container element of the counters. aria-live tells the screen reader to announce any changes to the content (polite
meaning at the screen readers next convenience). However, by default it only announces the changed part of the content (so if before the update it was "Count - 24" and then after was "Count - 25", the screen reader would only announce "5" as that's the part that changed). We can use aria-atomic="true" to tell the screen reader to announce the entire content even if it didn't change.
<div class="cont">
<a href="#" id="a">Increment B counters</a>
<div aira-live="polite" aria-atomic="true">
<span>Count - <span class="count" id="a-count-1"></span></span>
<span>Count - <span class="count" id="a-count-2"></span></span>
<span>Count - <span class="count" id="a-count-3"></span></span>
</div>
</div>
If you find the counters to be a long list and thus would overwhelm a screen reader user with too much information, another tactic would be to just announce that the counters were incremented, but not list their current values.
Instead of putting the aria-polite
and aria-atomic
around the counters, you could create a visually hidden element whose sole job is to announce things to the user. Since the div now acts as a status message, you'll also want to put the role="status"
attribute on it to let the screen reader know. Then when the button is clicked change the text contents of the status element to announce the action.
<div role="status" aria-live="polite" aria-atomic="true" id="statusMsg"></div>
<script>
let statusEl = document.getElementById('statusMsg');
document.getElementById('a').addEventListener('click', () => {
statusEl.textContent = 'B counters incremented';
});
</script>