Html多个选择元素可访问性

Question

在我们的Web应用程序中,我们有一个搜索表单,其中包含一个字段,用户可以从可能选项列表中选择一个或多个答案.我们目前使用"select"html元素,其中"multiple"属性设置如下例所示:

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键(在窗口上)执行多个选择/取消选择,但是许多用户不知道这一点.

当仅使用键盘时,该元素似乎也不容易使用 - 这显然是一个可访问性问题.

是否有一种"最佳实践",可以通过多种方式向用户显示输入？

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 )

获取结果数组的代码(在post目标站点上):

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

如果未选中该组names的任何复选框,$_POST['names']则未定义.