HTML和CSS中的标签和单选按钮

Question

我正在尝试使用单选按钮创建满意度调查，但不确定我的语法是否正确。这就是我所做的：

​

据我所知，我正在阅读的这篇文章说每个单选按钮都应该有一个标签，但在本例中，每个单选按钮都没有标签，因为我想在“差”、“好”、“更好”和“超级”下面对齐它们。

我是这样做的：

​

<div class="radio_menu">
  <p>Menu selection</p>
  <input type="radio" id="menu_selection_poor" name="menu_selection" value="poor">
  <input type="radio" id="menu_selection_good" name="menu_selection" value="good">
  <input type="radio" id="menu_selection_better" name="menu_selection" value="better">
  <input type="radio" id="menu_selection_super" name="menu_selection" value="super">
</div>

​

这是正确的吗？

Answer 1

单选按钮需要标签才能访问。然而，如果表单对于没有它们的有视力的用户来说是有意义的，那么它们就不需要是可见的。您可以在<label>元素中使用带有"screen-reader only" class的<span>元素，以可视方式隐藏用于屏幕阅读器和其他辅助技术的文本。

另外，考虑使用<fieldset>和<legend>元素对表单域进行分组。

这可能看起来像这样：

<fieldset class="radio_menu">
  <legend>Menu selection</legend>
  <label>
    <input type="radio" id="menu_selection_poor" name="menu_selection" value="poor">
    <span class="sr-only">Poor</span>
  </label>
  <label>
    <input type="radio" id="menu_selection_good" name="menu_selection" value="good">
    <span class="sr-only">Good</span>
  </label>
  <label>
    <input type="radio" id="menu_selection_better" name="menu_selection" value="better">
    <span class="sr-only">Better</span>
  </label>
  <label>
    <input type="radio" id="menu_selection_super" name="menu_selection" value="super">
    <span class="sr-only">Super</span>
  </label>
</fieldset>