html - 多项选择题的语义标记

Question

你晚饭吃了什么？

• 牛肉
• 鸡
• 鱼
• 蔬菜

让我们假设以上是长问卷中的一个问题，并且项目符号是互斥的单选按钮。

以语义方式标记此 HTML 的最佳方法是什么？

我是否使用<label>What did you have for dinner?</label>

还是我使用其他一些 html 结构？

Answer 1

这样做的一个好方法是放置labels 包装每个单选选项，然后如果您想要完整的可访问性支持，请使用该组的aria-labelledby属性：

<span id="label-dinner">What did you have for dinner?</span>
<div class="controls" aria-labelledby="label-dinner">
    <label><input type="radio" name="dinner" />Beef</label>
    <label><input type="radio" name="dinner" />Chicken</label>
    <label><input type="radio" name="dinner" />Fish</label>
    <label><input type="radio" name="dinner" />Vegetables</label>
</div>