多个可见 HTML 元素的 Aria 双向标签

Question

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

<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>

示例：点击 A 会增加所有 B 计数器，反之亦然。

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

当前是否有正确处理此用例的规范？

Answer 1

首先，正确的 wai-aria 属性是 aria-labelledby 而不是 aria-labelby。我不明白你说的

是什么意思

maybe treating the elements like a dual navigation could work

您是否试图通过使用此属性来实现一些动态行为？ wai-aria 属性用于在元素为 visited/focused.

时向屏幕阅读器提供有关该元素的更多信息

Answer 2

aria-controls is the attribute that associates one element as "controlling" another element. However, before using this attribute, read the "Aria-Controls is Poop”博客优先。

正如@kaashan 指出的那样，添加 ARIA 属性只会影响信息在屏幕上的呈现方式 reader。它 does not add any behavior 到您的页面。

Answer 3

如果我理解正确，你想知道的是如何告诉屏幕 reader 点击 A/B 会做什么，以及点击 [=36] 的潜在影响=].

正如@slugolicious 指出的那样，aria-controls 可以做到这一点，但它在 reader 屏幕上的支持不是很好。相反，您要做的是为屏幕 reader 提供足够的上下文以了解它将产生什么效果，然后宣布单击引起的变化（否则单击它会导致静音，使其看起来就像它坏了一样）。

例如，A 按钮可以说 "Increment B counters." 这对于屏幕来说已经足够上下文信息 reader 来理解按钮将做什么。如果出于某种原因你不想显示全文（所以它会在视觉上显示 "click me"），你可以 hide the additional information 只是为了视觉用户，因此阅读为 "click me to increment b counters" 只是为了屏幕 readers。

要通告内容的更改，您可以将 aria-live="polite" aria-atomic="true" 添加到计数器的容器元素中。 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" 告诉屏幕 reader 宣布全部内容，即使它没有改变。

<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>

如果您发现计数器是一个长列表，因此 would overwhelm a screen reader 用户拥有太多信息，另一种策略是只宣布计数器已递增，但不列出它们的当前值。

您可以创建一个视觉上隐藏的元素，而不是将 aria-polite 和 aria-atomic 放在柜台周围，其唯一的工作就是向用户宣布事情。由于 div 现在充当状态消息，您还需要在其上放置 role="status" 属性以让屏幕 reader 知道。然后在单击按钮时更改状态元素的文本内容以宣布操作。

<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 双向标签

Aria two way labels for multiple visible HTML elements

html

schema

accessibility

wai-aria