多选题的语义标记

Question

你晚餐吃了什么？

• 牛肉
• 鸡
• 鱼
• 蔬菜

让我们假设上面这是长问卷中的一个问题，子弹是互斥的单选按钮。

在语义上标记此HTML的最佳方法是什么？

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

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

Answer 1

执行此操作的一种好方法是放置label包装每个单选选项，然后如果您需要完全辅助功能支持，请为该组使用aria-labelledby attribute：

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