HTML 多选元素可访问性

Question

在我们的网络应用程序中，我们有一个搜索表单，其中包含一个字段，用户可以从可能的选项列表中选择一个或多个答案。我们目前使用具有“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>

用户测试的反馈表明，此解决方案让用户感到困惑。多选/取消选择是通过按住 Ctrl 键(在 Windows 上)来执行的，但是许多用户并没有意识到这一点。

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

是否有“最佳实践”、可访问的方式向用户显示具有多个选项的输入？

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[])。如果启用一个或多个复选框，将提交每个选中复选框的值。您可以使用 $names = $_POST['names']; 获取包含所有值的数组。如果您选择 Alice 和 Kevin，您将获得一个包含以下内容的数组。

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

获取结果数组的代码(在发布目标网站上):

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

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