CODEWITHSUNDEEP
htmlschemaaccessibilitywai-aria
Chris
Chris

Reputation: 514

Aria two way labels for multiple visible HTML elements

I have a set of elements that can affect each other. 

<div class="cont">
    <a href="#" id="a">Click Me</a>
    <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 class="cont">
    <a href="#" id="b">Click Me</a>
    <span>Count - <span class="count" id="b-count-1"></span></span>
    <span>Count - <span class="count" id="b-count-2"></span></span>
    <span>Count - <span class="count" id="b-count-3"></span></span>
</div>

example: Clicking on A increments all B counters and vice versa.

My understanding of aria-labelledby* makes it seem to function one-directionally. All elements are visible and non are hidden. I thought maybe treating the elements like as two navigation sections could work, but it doesn't seem the most correct solution.

Is there current spec that properly handles this use case?

Upvotes: 2

Views: 2240

Answers (3)

Steven Lambert
Steven Lambert

Reputation: 5891

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>

Upvotes: 3

slugolicious
slugolicious

Reputation: 17445

aria-controls is the attribute that associates one element as "controlling" another element. However, before using this attribute, read the "Aria-Controls is Poop" blog first.

And as @kaashan noted, adding ARIA properties only affects how the information is presented to a screen reader. It does not add any behavior to your page.

Upvotes: 3

Kaashan
Kaashan

Reputation: 382

Firstly, the correct wai-aria attribute is aria-labelledby and not aria-labelby. I do not understand what do you mean by

maybe treating the elements like a dual navigation could work

Are you trying to achieve some dynamic behavior by using this attrubute? The wai-aria attributes are put in place to provide more information about an element to screen readers when the element is visited/focused.

Upvotes: 0

Related Questions