做单选按钮的正确方法？

问题描述：

所以..我一直试图在我的web开发项目中不惜一切代价避免单选按钮，因为我只是不能找出正确的方式来编写它们。做单选按钮的正确方法？

您是否为单选按钮设置了标签？如果是这样，屏幕阅读器如何工作？

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

例如，请看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>

任何指针将不胜感激！

一个指针，考虑格式化您的代码块以避免水平滚动，这使得它们更容易阅读和响应。我冒昧地重新格式化你的例子以适应。 – 2009-09-28 21:54:09

答

出于辅助功能：

整理单选按钮为fieldset，并给它一个legend属性，以便于屏幕阅读器了解各组单选按钮的手段。
为每个单选按钮指定一个ID，并使用相关联的label元素的for=""属性中的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>

可以将字段集放入字段集中吗？因为我想为更大的输入组使用字段集..可能有2个文本输入和2个无线电输入区..全部在1个字段集中。所以然后我会有一个字段集内的字段集。 – Roeland 2009-09-29 01:54:00

是的 - 根据W3C验证程序，嵌套字段集在HTML 4.01 Transitional和XHTML 1.0中都是有效的标记。 – 2009-09-29 07:59:06

很好的回答，迪伦！我总是忘记如何连接标签和按钮，以便点击标签，现在我可以随时来到这里。 – 2009-12-23 00:31:17

答

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

至于屏幕阅读器，它取决于它的只是文本。

我把标签放在收音机后面，所以看起来会更好..我在这里看到的唯一改变就是你改变了它。所以即时通讯正确的方式..只是反标签？ – Roeland 2009-09-28 21:59:43

+1标签中的for与输入中的id匹配。让你点击所有浏览器中的文字。返回的变量是技能，具有取决于单选按钮的值。这是做单选按钮的正确方法。 – 2009-09-28 22:02:43

另外文本通常是在单选按钮之后。 – 2009-09-28 22:03:14

答

您还可以使用'fieldset'标签来组织您的屏幕。它将很好地分组不同的单选按钮。

答

您可以使用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中的表单元素不相邻的情况下（例如：在表格中）。

答

您的代码不正确，在输入标签是你的标签要素中。理想情况下，标签只能包含文字。否则你的代码是完全正确的。

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

您已使用无序列表来构造您的单选按钮。没事儿。您也可以使用分组在字段集或div容器下的段落。重要的是你希望如何传达这些元素的结构。一个无序列表提出了一系列的列表，这些列表并不相关，但是系列中的元素对于表示整个系列的价值是必要的。一组段落提出了正式的内容声明，其中每个段落打算用于明确的消费，而不会立即考虑到该组中的其他类似元素，这些元素的顺序或这些元素的数量，只要每个段落被单独使用。语义结构非常重要，但更重要的是希望通过这种结构进行交流，从而帮助需要分析和解析代码的技术。

您的代码符合XHTML的更严格要求。好。不要仅仅因为这种无能是被允许的，就会偏离对灵活无能的统一严格。

等待，我感到困惑..在我的代码中，输入标签在我的标签元素之外，你指的是Justin发布的代码吗？使标签具有如此描述性的唯一问题是它会产生重复（字技能水平会一遍又一遍地重复）。如果我使用带有图例的字段集来分隔它们，屏幕阅读器是否会将该图例与单选按钮组相关联？我想我能做的其他事情是把“技能水平”部分放在一个对普通浏览器隐藏的范围内，但仍然可以在屏幕阅读器中工作。 – Roeland 2009-09-29 03:54:42

你说得对。我可能正在查看Dylan Beattie发布的代码。我同意详细的规范可能听起来是重复的。仍然有必要更好地协助使用屏幕阅读器的用户。您也可以将标签文字加以剔除，使其不完全重复。屏幕阅读器将宣布该图例，并将宣布单选按钮位于字段集中，但不会明确宣布任何进一步的关系。这是HTML的SGML形式的限制。对浏览器隐藏更具体的文本是强烈建议的可访问性技巧。 – 2009-09-29 08:25:16

只是不要使用内联样式隐藏文本。屏幕阅读器能够读取显示内容：无内容和可视性：内联写入时隐藏。他们这样做是为了遵守可以隐藏和显示文本的JavaScript，这与可视化用户会经历的方式相同。 – 2009-09-29 08:26:41

做单选按钮的正确方法？

相关推荐