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告诉屏幕阅读器宣布对内容的任何更改（polite意味着屏幕阅读器的下一个方便）。但是，默认情况下，它仅宣布内容的更改部分（因此，如果在更新之前为“ 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>

Answer 2

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

是什么意思

也许像双重导航一样对待元素

您是否正在尝试通过使用此属性来实现某些动态行为？放置wai-aria属性可以在访问/聚焦元素时向屏幕阅读器提供有关该元素的更多信息。

Answer 3

aria-controls是将一个元素关联为“控制”另一个元素的属性。但是，在使用此属性之前，请先阅读“ Aria-Controls is Poop”博客。

正如@kaashan指出的那样，添加ARIA属性只会影响如何将信息呈现给屏幕阅读器。 does not add any behavior到您的页面。

Aria多个可见HTML元素的两种方式标签

3 个答案: