html - 用于多个可见 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

如果我理解正确的话，您想要找出的是如何告诉屏幕阅读器单击 A/B 会做什么，以及单击 A/B 可能产生的效果。

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

例如，A 按钮可以显示“增加 B 计数器”。这对于屏幕阅读器来说是足够的上下文信息，可以理解按钮的功能。如果由于某种原因您不想显示全文(因此它将在视觉上显示“单击我”)，您可以 hide the additional information仅适用于视觉用户，因此仅适用于屏幕阅读器，读取为“单击我以增加 b 计数器”。

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

<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" 属性以使屏幕阅读器知道。然后，当单击按钮时，更改状态元素的文本内容以宣布操作。

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