Question

所以..我一直试图在我的网站开发项目中不惜一切代价避免使用单选按钮，因为我无法找到正确的编码方式。

您是否为单选按钮设置了标签..如果是这样，那对屏幕阅读器有何用处。

我一直在做大部分表单的方式是使用无序列表。每个输入都是一个列表项。我一直在做单选按钮时遇到麻烦。我永远无法在所有浏览器中看到它..

例如，请查看http://usfultimate.com/index.php/hatter/register。这种结构有意义吗？

快速结构样本：

<ul>
  <li>
    <label for='first_name'>First Name:</label>
    <input type="text" name="first_name" value=""  />
  </li>
  <li>
    <label for='last_name'>Last Name:</label>
    <input type="text" name="last_name" value=""  />
  </li>
  <li>
    <label for='email'>Email Address:</label>

    <input type="text" name="email" value=""  />
  </li>

  <li class="radio">
    <ul>
      <li>
        <input type="radio" name="skill" value="Never Played" id="neverPlayed" />
        <label for="neverPlayed">Never Played</label>
      </li>

      <li>
        <input type="radio" name="skill" value="Unorganized Pickup"
          id="unorganizedPickup" />
        <label for="unorganizedPickup">Unorganized Pickup</label>
      </li>
      <li>
        <input type="radio" name="skill" value="Organized Pickup / League Play"
          id="organizedPickup" />
        <label for="organizedPickup">Organized Pickup or League Play</label>
      </li>
      <li>
        <input type="radio" name="skill" value="Played on a Competative Team"
          id="competativeTeam" />
        <label for="competativeTeam">Competative Team</label>
      </li>

      <li>
        <input type="radio" name="skill" value="Baller Shot Caller" id="baller" />
        <label for="baller">Baller Shot Caller</label>
      </li>
    </ul>
  </li>
</ul>

任何指针都会受到赞赏！

Answer 1

可访问性：

将您的单选按钮整理为fieldset，并为其指定legend属性，以便屏幕阅读器了解每组单选按钮的含义。
为每个单选按钮指定一个ID，并使用相关for=""元素的label属性中的ID。这不仅有利于可访问性 - 它还意味着您可以通过单击标签来选择一个单选按钮（比单选按钮本身更大，更容易击中）

然后，使用CSS设置fieldset，legend和label属性的样式以匹配您的网站设计，如下例所示：

<html>
    <head>
        <style>
        body {
            font-family: arial;
            font-size: 15px;
            line-height: 1.4em;
        }
        fieldset.radioGroup  { border: none; }
        fieldset.radioGroup  legend { font-weight: bold; }

        /* Make each radio/label render on a new line */
        fieldset.radioGroup  label { display: block; }

        /* add some horizontal spacing between radio buttons and their label text */
        fieldset.radioGroup label input { margin-right: 32px; }
        </style>
    </head>
<body>
    <fieldset class="radioGroup">
        <legend>Skill Level</legend>
        <label for="neverPlayedRadioButton">
            <input type="radio" name="skill" value="neverPlayed" id="neverPlayedRadioButton" />
            Never Played
        </label>
        <label for="unorganizedPickupRadioButton">
                <input type="radio" name="skill" value="unorganizedPickup" id="unorganizedPickupRadioButton" />
                Unorganized Pickup
        </label>
        <label for="organizedPickupRadioButton">
            <input type="radio" name="skill" value="organizedPickup" id="organizedPickupRadioButton" />
            Organized Pickup / League Play
        </label>
    </fieldset>
</body>
</html>

Answer 2

<label for="baller">Baller Shot Caller</label>
<input type="radio" name="skill" value="Baller Shot Caller" id="baller" />

至于屏幕阅读器，它取决于它的正文。

Answer 3

您可以使用for属性将label显式关联到表格元素，例如复选框或单选按钮，如示例中所示。

此外，在HTML 4.01中，您还可以通过执行以下操作隐式地将label与表单元素相关联（示例来自链接的w3c页面）：

<FORM action="..." method="post">
<P>
<LABEL>
   First Name
   <INPUT type="text" name="firstname">
</LABEL>
<LABEL>
   <INPUT type="text" name="lastname">
   Last Name
</LABEL>
</P>
</FORM>

这有时更方便，但并不总是合适，例如在label与HTML中的表单元素不相邻的情况下（例如：在表格中）。

Answer 4

您的代码不正确，因为您的输入标记位于标签元素中。理想情况下，标签应仅包含文字。否则你的代码是完全正确的。

要记住的一些事情是，使用屏幕阅读器的用户无法为一系列单选按钮和一些建立该公共上下文的文本建立公共上下文。其他人指出将单选按钮放在字段集中并使用图例元素来建立此上下文。然而，可访问性的理想解决方案是确保文本值和标签足够清晰，以便完全理解它们自己。从您的示例中，盲人用户可能很难知道“无组织的皮卡”是与技能水平相关的选择。如果说“无组织的皮卡技能水平”这样的话会更容易理解。然后，单选按钮的内容绝对没有混淆。

您使用了无序列表来构建单选按钮。那样就好。您还可以使用在fieldset或div容器下分组的段落。重要的是你希望如何传达这些元素的结构。无序列表表示一系列某些内容，其中该系列的枚举不相关，但系列的元素是表示整个系列的价值所必需的。一组段落建议正式声明内容，其中每个段落旨在明确消费，而不必立即考虑该组中的其他类似元素，此类元素的顺序或这些元素的数量，只要每个段落被单独消费。语义结构很重要，但更重要的是，您希望这样的结构能够与需要分析和解析代码的辅助技术进行通信。

您的代码符合XHTML的更严格要求。好。不要仅仅因为通常允许这种无能而偏离统一严格的灵活无能。

Answer 5

您还可以使用'fieldset'标记整理屏幕。它将很好地组合不同的单选按钮组。

正确的方式做单选按钮？

5 个答案: