正确的方式做单选按钮？

Question

正确的方式做单选按钮？

Roe*_*and 2 html javascript css webforms

所以..我一直试图在我的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>

Run Code Online (Sandbox Code Playgroud)

任何指针将不胜感激!

Answer 1

Dyl*_*tie 13

对于可访问性:

将您的单选按钮整理为a 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，4 月前
查看次数：	4852 次
最近记录：	16 年，4 月前