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

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

例如

<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 以将显示的问题与字段集结合起来是不切实际的。

最佳答案

你必须使用 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 :

关于html - 什么是合适的 html 元素/属性来无形地为屏幕阅读器注释字段集？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49114551/