标准 · WCAG 2.2

SC 2.5.7 级别 AA WCAG 2.2 2.2 版新增

拖动操作

任何使用拖动操作的功能,也必须可通过无需拖动的单指针操作来完成——通常为点击或轻触。此为WCAG 2.2新增内容。

要求内容

如果某项功能可通过拖动来完成——如重新排序列表项、调整滑块、平移地图、在签名板上签名、滑动解锁开关——则必须同时提供一种无需拖动的单指针操作方式来执行相同功能。轻触按钮、点击箭头、输入数值、从菜单中选择:这些方式均可满足此成功准则。

该规则适用于水平、垂直或自由形式的拖动。豁免情形为拖动操作是该功能的必要组成部分——如绘图应用中的绘制操作、虚拟摇杆的拟真操控。

如何满足此准则

  • 可排序列表:在每个列表项旁添加上移/下移箭头按钮,或提供”移动到位置……”菜单。鼠标用户仍可使用拖动;按钮则覆盖其他所有用户。
  • 滑块:使用 <input type="range">(或带箭头键支持的 role="slider"),使用户可通过键盘或在配对输入框中输入数值来设置值。
  • 地图平移/缩放:添加可见的放大/缩小和方向平移控件,或提供搜索框以直接导航。
  • 轮播图:除滑动手势外,提供上一张/下一张按钮。
  • 使用双滑块的价格/范围筛选器:配合两个数字输入框使用。
  • 可拖动关闭的横幅和模态框:添加可见的关闭按钮。
  • 签名捕获:提供”输入姓名”的替代方式。

常见失败情形

  • Trello风格的看板,在列之间移动卡片的唯一方式是拖动。
  • 设置或播放列表的重新排序手柄,没有键盘或按钮替代方案。
  • 需要拖动两端的双滑块范围选择器,且没有最小值/最大值输入框。
  • 图像对比滑块(前/后),没有用于步进分隔线的按钮。
  • 颜色选择器中调整色相/饱和度的唯一方式是在选色器内拖动。
  • “滑动确认”或”滑动解锁”控件,没有轻触替代方案。
  • 自定义日期范围选择器,需通过在日历单元格上拖动来选择范围。

重要性

对于精细运动控制能力有限、有震颤症状、单手使用手机、使用口含棒或头部指针的用户,以及因长时间拖动导致手部痉挛的触控板用户,拖动操作难以完成甚至无法完成。对于许多开关控制和语音控制用户而言,这同样是一个难题——“将第三张卡片拖到第二列”并没有明显的语音命令。成功准则 2.5.7 是WCAG 2.2的新增内容,它已重塑了产品团队设计重新排序界面的方式:大多数现代设计系统现在默认提供箭头按钮替代方案。预计此成功准则将成为仪表板、项目管理工具以及任何基于可排序列表构建的界面审计中的高频发现项。