Html 多个 select 元素可访问性

Question

在我们的 Web 应用程序中，我们有一个搜索表单，其中包含一个字段，用户可以针对该字段从可能的选项列表中 select 一个或多个答案。我们目前使用具有 "multiple" 属性集的 "select" html 元素，如下例所示：

select {
  width: 150px;
}

<select multiple>
  <option value="A">Alice</option>
  <option value="B">Bob</option>
  <option value="F">Fred</option>
  <option value="K">Kevin</option>
  <option value="M">Mary</option>
  <option value="S">Susan</option>
</select>

用户测试的反馈表明，此解决方案让用户感到困惑。多次 selection/deselection 是通过按住 Ctrl 键（在 windows 上）执行的，但是许多用户并没有意识到这一点。

仅使用键盘时，该元素似乎也无法轻松使用 - 这显然是一个可访问性问题。

是否有 "best practice" 可访问的方式向用户显示具有多个选项的输入？

Answer 1

这可能与主题无关，但如果您已经在使用 jQuery，那么您可以使用这个 select2 插件，它会向用户提供明确的反馈，选择哪些选项当前已选中。

如果您使用的是 prototype.js 那么这个 chosen 插件与上面提到的 "select2" 非常相似，事实上 select2 是从 chosen 派生出来的，您可以也可以使用 chosen with jQuery.

优点：-

对用户所选选项的良好反馈。
对于很长的选项列表，提供了 search/autocomplete 功能。

缺点：-

如果尚未使用 jQuery，则 need/overhead 包含一个库，然后是它的插件。
不能work/create与任何其他库冲突。

Answer 2

改用复选框。所有具有相同名称的复选框都是一组（在本例中为 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[]）。如果您启用一个或多个复选框，将提交每个 selected 复选框的 value。您将获得包含所有值 $names = $_POST['names']; 的数组。如果你 select Alice 和 Kevin 你会得到一个包含以下内容的数组。

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

获取结果数组的代码（在post目标站点）：

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

如果您不 select 组 names 的任何复选框，则 $_POST['names'] 未定义。

Answer 3

复选框绝对是这里的首选，但这不是您需要做的全部。

是的，您需要将标签与每个项目相关联，但如果您有一个整体标签，例如 "Who are you friends with?"，您需要将其与整个复选框组相关联。这是通过 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>

Html 多个 select 元素可访问性

Html multiple select element accessibility

html

accessibility