什么是一个合适的html元素/属性来无形地为屏幕阅读器注释字段集？

Question

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

EG

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

我不想在fieldset的legend中包含问题文本，因为对于有视力的用户来说这将是多余的。但是我需要在fieldset中包含这个问题，因此对于屏幕阅读器来说，这个问题与fieldset相关联是显而易见的。

任何链接/见解将非常感激。我做了一些谷歌搜索，并询问同事，没有找到任何明确的答案。

注意：上面的html不是实际的代码。 #main和#sidebar的现实代码深深嵌套且相当复杂。因此，重新排列html以将显示的问题与fieldset结合起来是不切实际的。

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：

aria-describedby属性用于指示描述对象的元素的ID。它用于建立窗口小部件或组与描述它们的文本之间的关系。这与aria-labelledby非常相似：标签描述了对象的本质，而描述提供了用户可能需要的更多信息。