多个可见 HTML 元素的 Aria 双向标签 [英] Aria two way labels for multiple visible HTML elements

问题描述

我有一组可以相互影响的元素.

<a href="#" id="a">点击我</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 class="cont"><a href="#" id="b">点击我</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>

示例:单击 A 会增加所有 B 计数器，反之亦然.

我对 aria-labelledby* 的理解使它似乎是单向运行的.所有元素都可见，非隐藏.我想也许将元素视为两个导航部分可以工作，但这似乎不是最正确的解决方案.

是否有当前规范可以正确处理此用例?

解决方案

如果我理解正确，您想知道的是如何告诉屏幕阅读器点击 A/B 会做什么，以及潜在的影响点击 A/B.

正如@slugolicious 指出的那样，aria-controls 可以做到这一点，但它在屏幕阅读器中并没有得到很好的支持.相反，您要做的是为屏幕阅读器提供足够的上下文以了解它会产生什么影响，然后宣布由单击引起的更改(否则单击它会导致静音，使其看起来像是坏了).

例如，A 按钮可以显示增加 B 计数器".这对于屏幕阅读器来说是足够的上下文信息来理解按钮的作用.如果由于某种原因你不想显示全文(所以它会在视觉上显示点击我")，你可以隐藏附加信息 仅适用于视觉用户，因此对于屏幕阅读器来说，读作单击我以增加 b 计数器".

要宣布对内容的更改，您可以将 aria-live="polite" aria-atomic="true" 添加到计数器的容器元素.aria-live 告诉屏幕阅读器宣布任何对内容的更改(polite 意味着在屏幕阅读器下方便时).但是，默认情况下它只宣布内容的更改部分(因此，如果在更新之前它是Count - 24"，然后是Count - 25"，屏幕阅读器只会宣布5"，因为这是更新的部分变了).我们可以使用 aria-atomic="true" 告诉屏幕阅读器宣布整个内容，即使它没有改变.

<a href="#" id="a">增量 B 计数器</a><div aira-live="礼貌" 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>

如果您发现计数器列表很长，因此 会让屏幕阅读器用户因过多的信息而不知所措，另一种策略是只宣布计数器已增加，但不列出它们的当前值.

不是将 aria-polite 和 aria-atomic 放在计数器周围，您可以创建一个视觉上隐藏的元素，其唯一的工作是向用户宣布事情.由于 div 现在充当状态消息，您还需要在其上放置 role="status" 属性以让屏幕阅读器知道.然后当按钮被点击时改变状态元素的文本内容来宣布动作.

<div role="status" aria-live="polite" aria-atomic="true" id="statusMsg"></div><脚本>让 statusEl = document.getElementById('statusMsg');document.getElementById('a').addEventListener('click', () => {statusEl.textContent = 'B 计数器增加';});

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?

解决方案

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>

这篇关于多个可见 HTML 元素的 Aria 双向标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！