HTML：如何以适当的方式表明放射线框的问题？ [英] HTML: how to indicate questions with radioboxes as answers in proper way?

问题描述

我有一个HTML格式的问题和radioboxes作为答案，如下所示：

I have a question in HTML form and radioboxes as answers, like this:

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

但我意识到，这个问题与答案无关，这可能对搜索引擎优化，可访问性和并且可能对将来的应用维护不利。所以我添加了 aria-describedby 属性：

But I realised, that question is not connected with answers, which is probably bad for SEO, accessibility and and could be bad for future maintenance of application. So I added aria-describedby attribute:

<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开发者网络我发现文章如何构建HTML表单，当建议将答案包装在 fieldset tag ans put question in legend tag：

But at Mozilla Developer Network I found article How to structure an HTML form, when advice is to wrap answers in fieldset tag ans put question in legend tag:

<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％时不值得信任，因为，因为有写道：

But it could not be trustworthy at 100%, because, because there is written:

本文需要技术审核。

This article is in need of a technical review.

这是否是以放射线框作为答案来表示问题的最佳方式？如果不是，最好的方法是什么？每个答案都要提前感谢。

Is it really a best way to indicate a question with radioboxes as answers? If it's not, what is the best way? Thank you in advance for every answer.

推荐答案

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

Yes. <legend> / <fieldset> is the correct tool to use.

尽管避免过度传说。一些屏幕阅读器会在每个标签之前读出整个图例。

Avoid overlong legends though. Some screen readers will read out the entire legend before each label.

这篇关于HTML：如何以适当的方式表明放射线框的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！