HTML:如何以正确的方式用单选框表示问题作为答案？

Question

我有一个 HTML 形式的问题和单选框作为答案，如下所示:

<span>What is your favorite fruit?</span>
<input type="radio" name="favFruit" id="banana"><label for="banana">Banana</label>
<input type="radio" name="favFruit" id="orange"><label for="orange">Orange</label>

但我意识到，这个问题与答案无关，这可能不利于 SEO、可访问性，并且可能不利于应用程序的 future 维护。所以我添加了 aria-describedby 属性:

<span id="favFruitQuestion">What is your favorite fruit?</span>
<input type="radio" name="favFruit" id="banana" aria-describedby="favFruitQuestion">
    <label for="banana">Banana</label>
<input type="radio" name="favFruit" id="orange" aria-describedby="favFruitQuestion">
    <label for="orange">Orange</label>

但是在 Mozilla Developer Network我找到文章 How to structure an HTML form ，当建议将答案包装在 fieldset 标签中并将问题放在 legend 标签中时:

<fieldset>
    <legend>What is your favourite fruit?</legend>
    <input type="radio" name="favFruit" id="banana"><label for="banana">Banana</label>
    <input type="radio" name="favFruit" id="orange"><label for="orange">Orange</label>
</fieldset>

但它不能 100% 可信，因为，因为上面写着:

This article is in need of a technical review.

用单选框作为答案来指示问题真的是最好的方法吗？如果不是，最好的方法是什么？预先感谢您的每一个回答。

Answer 1

是的。 <legend>/<fieldset>是正确的工具。

不过要避免过长的图例。一些屏幕阅读器会在每个标签之前读出整个图例。