所以..我一直在尝试在我的 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>
任何指针将不胜感激!
最佳答案
对于可访问性:
- 将您的单选按钮组织成一个
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>
关于javascript - 做单选按钮的正确方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1489535/