屏幕阅读器辅助功能：两个按钮，一个标签

Answer 1

从技术上讲，您只需通过

aria-labelledby

引用同一元素即可将其用作多个元素的标签。

这将导致两个按钮具有“相同”的可访问名称，这并不是很有帮助。因此您还需要添加自己的内容。直接在 aria-label 中提供它是最简单的：

<fieldset>
  <legend>Legend</legend>
  <span>Labeltext</span>
  <button aria-pressed="false" aria-label="Labeltext Filter 1">Filter 1</button>
  <button aria-pressed="true" aria-label="Labeltext Filter 2">Filter 2</button>
</fieldset>

我对实际用例很好奇，因为已经有 Legend 足以为两个按钮提供包装标签。额外的

Labeltext

似乎没有必要。 如果

Labeltext

“描述或注释当前元素”，则可以使用

aria-describedby

：

<fieldset>
  <legend>Legend</legend>
  <span id="button-desc">Labeltext</span>
  <button aria-pressed="false" aria-describedby="button-desc">Filter 1</button>
  <button aria-pressed="true" aria-describedby="button-desc">Filter 2</button>
</fieldset>