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>

用户测试的反馈显示，这个解决方案对用户来说很困惑。在Windows操作系统中，通过按住Ctrl键来执行多选/取消多选，但许多用户并不知道这一点。

此外，该元素似乎在只使用键盘时不易使用——这显然是一个辅助功能问题。

有没有一种“最佳实践”，可以以无障碍的方式向用户显示具有多个选项的输入？

- James.M

---

使用一组复选框代替吗？ - James Donnelly

我同意@JamesDonnelly的观点。虽然下拉菜单可以用于此，但从交互设计师的角度来看，我认为你应该使用复选框。人们更习惯于使用复选框来选择多个选项。 - Dorvalla

另一个带有复选框的协议。然而，原始的<select>在键盘上完全正常。这是一个学习曲线。一旦你知道如何操作，如果经常使用键盘而不是鼠标，就很容易。Ctrl键是你的朋友。你可以使用箭头向上/向下来进行第一次选择，然后在使用上/下移动"ghost"焦点时按住Ctrl键。保持按住Ctrl键，同时按下空格键将项目添加到所选组。这总是在Firefox中有效，但在IE和Chrome中结果会出现间歇性问题。 - slugolicious

很遗憾，在Chrome中，如果您只使用键盘，那么无法选择随机项目，只能选择按住Shift键的顺序项目，但不能单独选择例如第1项、第3项和第5项。 - Hrvoje Golcic

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);

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

- Sebastian Brosch

---

+1，但我认为如果您解释“是一组”的含义会更好 -例如，它如何到达服务器，与多个选择相比，您如何处理它。 - Stephen P

这个复选框组缺少分组标签。它需要一个以便让其可访问。 - unobf

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>

- Fiona - myaccessible.website

Answer 3

这可能与主题无关，但如果您已经在使用jQuery，那么这里有一个select2插件可供使用，并且它清楚地向用户反馈当前选中的选项。

如果您正在使用prototype.js，则有一个chosen插件几乎类似于上述"select2"。实际上，select2是从chosen分叉出来的，您也可以使用chosen与jQuery一起使用。

优点：

• 对所选选项向用户提供良好的反馈。
• 对于非常长的选项列表，提供搜索/自动完成功能。

缺点：

• 如果没有使用jQuery，则需要/开销来包含库及其插件。
• 可能无法与其他任何库一起正常工作/导致冲突。

- Mohd Abdul Mujib

---

两者都完全无法访问...尝试使用JAWS或ChromeVox屏幕阅读器。 - Hrvoje Golcic