在本机和自定义选择元素之间达到平衡

本文探讨如何构建既美观又易访问的样式化下拉选择元素。我们将巧妙地结合原生 <select></select> 元素和自定义样式，实现最佳用户体验。

名称的重要性：下拉列表、菜单、导航

在研究过程中，我们发现“下拉列表”、“菜单”、“导航”等术语经常混用，导致歧义。本文将明确定义“下拉列表”：

下拉列表: 一种交互式组件，包含一个按钮，用于显示和隐藏项目列表，通常通过鼠标悬停、点击或轻触触发。列表默认隐藏，交互后显示。列表通常以块状内容（即选项）的形式覆盖其他内容。

许多界面元素看起来像下拉列表，但简单地将其称为“下拉列表”如同用“鱼”来描述动物一样笼统。我们需要区分菜单、导航和选择元素这三种不同类型的下拉列表：

• 菜单: 页面内容中用户可执行的命令或操作列表。
• 导航: 用于网站导航的链接列表。
• 选择: 表单控件（<select></select>），用于在表单中显示供用户选择的选项列表。

不同用户对界面的感知和交互方式不同，因此对UI元素的命名和设计模式的定义存在主观性。

<menu></menu> 元素已弃用，不推荐使用。关于包含式菜单和菜单按钮的详细说明，以及为什么不应将 ARIA 菜单角色用于站点导航，请参考相关资源。

我们将专注于作为 <select></select> 元素的下拉列表类型。

<select></select> 元素的样式化挑战

根据 MDN 的说法，样式化表单控件存在“好、坏、丑”三种情况。<select></select> 元素无疑属于“丑”的范畴，其样式化支持不足，导致开发者常常寻求替代方案。

理想情况下，如果可以避免使用 <select></select>，就应该避免。然而，在某些情况下，<select></select> 仍然是最佳选择，例如选项数量众多、布局空间有限或时间/预算不足等。

自定义 <select></select> 的需求

创建自定义 <select></select> 时，通常需要满足以下需求：

• 按钮显示当前选定的选项。
• 点击按钮切换选项列表的可见性。
• 点击选项列表中的选项会更新所选值，按钮文本随之更改，选项列表关闭。
• 点击组件外部会关闭选项列表。
• 触发器包含一个指向下方的三角形图标，指示存在选项。

然而，这仅仅满足了部分需求。原生 <select></select> 元素还提供以下功能：

• 无论用户的视觉能力如何，选定的选项都清晰可见。
• 组件能够以可预测的方式与键盘交互（例如，使用箭头键导航，Enter 键选择，Esc 键取消等）。
• 辅助技术（例如屏幕阅读器）能够清晰地向用户宣布元素，包括其角色、名称和状态。
• 选项列表位置调整（即不会被屏幕裁剪）。
• 元素遵守用户的操作系统偏好设置（例如高对比度、配色方案、动画等）。

许多自定义 <select></select> 组件都无法完全满足这些需求。

构建“混合”选择器

构建简单的自定义 <select></select> 会牺牲功能性以换取美观性。更好的方法是默认提供原生 <select></select>，并在可能的情况下将其替换为更美观的自定义版本。这就是“混合”选择器的理念。它包含两个选择器：

• 原生 <select></select>，默认可见且可访问。
• 自定义 <select></select>，默认隐藏，仅在使用鼠标时显示。

以下是 HTML 结构示例：

<label for="selectNative">Main job role</label>
<div>
  <select id="selectNative" class="selectNative">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <div class="selectCustom">
    <!-- Custom select content -->
  </div>
</div>

CSS 代码用于控制两个选择器的显示和位置：

.selectNative,
.selectCustom {
  position: relative;
  width: 22rem;
  height: 4rem;
}

.selectCustom {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

@media (hover: hover) {
  .selectCustom {
    display: block;
  }
  .selectNative:focus   .selectCustom {
    display: none;
  }
}

JavaScript 代码用于处理点击事件、同步两个选择器的值以及键盘导航。

可用性测试

我们进行了一次小型可用性测试，测试对象包括残疾人士，使用不同的设备和辅助技术进行测试。测试结果表明该方法有效，但仍需进行更广泛的测试。

该方法的优点在于：

• 移动设备和平板电脑用户获得原生 <select></select>，提供更好的用户体验和性能。
• 键盘用户能够以预期的方式与原生 <select></select> 交互。
• 辅助技术能够像正常一样与原生 <select></select> 交互。
• 鼠标用户能够与增强的自定义 <select></select> 交互。

该方法为所有用户提供必要的原生功能，无需额外的工作量来实现所有原生特性。

然而，这种方法并非万能的，它适用于简单的选择器，对于复杂的交互可能无效。

关于类似菜单的选择器

如果选择器始终具有选定选项（例如排序内容），则可以使用原生 <select></select> 或自定义菜单。需要注意 WCAG 3.2.2 输入准则：

除非在用户使用组件之前已告知其行为，否则更改任何用户界面组件的设置不应自动导致上下文更改。

为了满足此准则，需要在用户交互之前警告用户操作，或在选择器后添加说明。

结语

构建真正易访问的选择器组件比看起来更难。 “混合”选择器是尝试在保持美观的同时获得尽可能多的原生功能的一种方法。如果资源允许，请确保在发布组件之前进行充分的测试。

记住在创建“下拉列表”组件时使用正确的名称。 ?

以上是在本机和自定义选择元素之间达到平衡的详细内容。更多信息请关注PHP中文网其他相关文章！