Question

在我们的网络应用程序中，我们有一个搜索表单，其中包含一个字段，用户可以从一个可能的选项列表中选择一个或多个答案。我们目前使用＆＃34; select＆＃34;带有＆＃34;多个＆＃34;的html元素属性设置如下例所示：

＆＃13;

=SumAfter(B1:H1,4)

＆＃13;

select {
  width: 150px;
}

＆＃13;

来自用户测试的反馈表明此解决方案让用户感到困惑。通过按住Ctrl键（在窗口上）执行多个选择/取消选择，但是许多用户不知道这一点。

这个元素在使用键盘时似乎也不容易使用 - 这显然是一个可访问性问题。

是否有最佳实践＆＃34;是一种向用户显示带有多个选项的输入的可访问方式？

Answer 1

使用复选框代替。所有具有相同名称的复选框都是一个组（在本例中为names）。

.row {
  display:block;
}

<fieldset>
  <legend>Select the Names</legend>
  <div class="row">
    <input type="checkbox" id="names_A" name="names[]" value="A" />
    <label for="names_A">Alice</label>
  </div>
  <div class="row">
    <input type="checkbox" id="names_B" name="names[]" value="B" />
    <label for="names_B">Bob</label>
  </div>
  <div class="row">
    <input type="checkbox" id="names_F" name="names[]" value="F" />
    <label for="names_F">Fred</label>
  </div>
  <div class="row">
    <input type="checkbox" id="names_K" name="names[]" value="K" />
    <label for="names_K">Kevin</label>
  </div>
  <div class="row">
    <input type="checkbox" id="names_M" name="names[]" value="M" />
    <label for="names_M">Mary</label>
  </div>
  <div class="row">
    <input type="checkbox" id="names_S" name="names[]" value="S" />
    <label for="names_S">Susan</label>
  </div>
</fieldset>

<强>解释
具有相同名称和以下括号（[]）的每个复选框都位于同一组中（在示例names[]中）。如果您启用了一个或多个复选框，则会提交每个所选复选框的value。您将获得包含$names = $_POST['names'];的所有值的数组。如果您选择Alice和Kevin，则会获得包含以下内容的数组。

Array ( [0] => A [1] => K )

获取结果数组的代码（在帖子目标网站上）：

<?php
$names = $_POST['names']);
print_r($names);

如果您未选中论坛names的任何复选框，则$_POST['names']未定义。

Answer 2

复选框绝对是此处的首选选项，但不是您需要做的全部。

是的，您需要将标签与每个项目相关联，但如果您有一个整体标签，例如“您和谁是朋友？”你需要将它与整个复选框组相关联。这是通过fieldset和legend完成的。

<fieldset>
   <legend>Who are you friends with?</legend>
   <input type="checkbox" id="alice"><label for="alice">Alice</label><br/>
   <input type="checkbox" id="bob"><label for="bob">Bob</label>
</fieldset>

Answer 3

这可能是偏离主题的，但如果您已经在使用jQuery，那么您可以使用此select2插件，它会向用户提供明确的反馈，目前哪些选项地选择。

如果你正在使用prototype.js那么这个chosen插件与上面提到的“select2”非常相似，实际上select2是从所选择的分叉，你也可以选择使用jQuery。

优点： -

对所选选项的用户反馈良好。
对于很长的选项列表，提供搜索/自动填充功能。

缺点： -

如果还没有使用jQuery那么需要/开销来包含一个库然后再包含它的插件。
可能无法与任何其他库发生冲突/创建冲突。

Html多个选择元素可访问性

3 个答案: