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、可访问性，并且可能不利于应用程序的未来维护。所以我添加了 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 I found article 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> 是正确的工具。

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

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

HTML: how to indicate questions with radioboxes as answers in proper way?

html

seo

accessibility

radio-button