html - 什么是合适的 html 元素/属性来为屏幕阅读器不可见地注释字段集？

Question

我正在使用一个字段集，该字段集允许用户回答多项选择题，该问题显示在页面上其他地方的显着位置，但与字段集分开。

例如

<div>
  <div id="main">
    <h3> What is the capitol of France? </h3>
  </div>
  <div id="sidebar"> 
    <fieldset>
      <legend>Choose One:</legend>
      <!-- radio buttons -->
    </fieldset>
  </div>
</div>

我不想在字段集的 legend 中包含问题文本，因为它对于有视力的用户来说是多余的。但我需要将问题包含在字段集中，这样屏幕阅读器就可以清楚地看到问题与字段集相关联。

任何链接/见解将不胜感激。我用谷歌搜索并询问了同事，但没有找到任何明确的答案。

注意:上面的 html 不是实际代码。 #main 和#sidebar 的实际代码嵌套很深而且相当复杂。因此，重新安排 html 以将显示的问题与字段集结合起来是不切实际的。

Answer 1

你必须使用aria-describedby

<div>
  <div id="main">
    <h3 id="question"> What is the capitol of France? </h3>
  </div>
  <div id="sidebar"> 
    <fieldset aria-describedby="question">
      <legend>Choose One:</legend>
      <!-- radio buttons -->
    </fieldset>
  </div>
</div>

来自 MDN :

The aria-describedby attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need.