什么是合适的 html element/attribute 来为屏幕阅读器不可见地注释字段集？

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 中包含问题文本，因为它对于有视力的用户来说是多余的。但是我需要将问题包含在字段集中，这样对于屏幕阅读器来说很明显问题与字段集相关联。

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

注意：上面的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.

什么是合适的 html element/attribute 来为屏幕阅读器不可见地注释字段集？

What's an appropriate html element/attribute to invisibly annotate a fieldset for screenreaders?

html

accessibility

screen-readers