Itemlume
登录创建账户

商品素材 / 制作与交付

商品图轮播刚暂停又自动切走,怎样验收键盘和鼠标的停止规则?

按当前 W3C APG 自动轮播模式,键盘焦点进入轮播区域后必须停止自动切换,而且不能仅因焦点离开就自动恢复;恢复需要用户明确请求。鼠标悬停期间也应停止。轮播控制按钮应清楚表达 Start 或 Stop 操作,而不是只显示含义模糊的图标。

01 / 商品图轮播刚暂停又自动切走,怎样验收键盘和鼠标的停止规则?

把自动暂停与用户主动停止分开

商品轮播可能在用户阅读价格、颜色说明或包装细节时自动切换。当前 W3C APG Carousel Pattern 对自动轮播规定了明确的交互条件:键盘焦点进入轮播区域时停止自动旋转,且不会仅因焦点移出而重新开始,除非用户明确要求恢复。

鼠标悬停在轮播区域时,同样需要停止自动旋转。这样用户移动鼠标阅读图片附近的内容时,不必与自动切换速度竞争。

轮播还需要提供停止和开始旋转的控制按钮。该按钮表达的是当前可以执行的动作,例如 Stop Slide Rotation 或 Start Slide Rotation,而不是只用一个无法辨认状态的播放图标。

决策分支:如果鼠标移出后轮播又开始,应先判断是否发生过用户主动停止;如果键盘焦点进入后暂停,则必须检查焦点离开是否错误触发自动恢复。

02 / 商品图轮播刚暂停又自动切走,怎样验收键盘和鼠标的停止规则?

键盘焦点必须能稳定停留在控制位置

APG 要求旋转控制成为轮播区域内的第一个 Tab 停靠点,使键盘用户能够先决定是否允许图片自动切换,再继续浏览商品内容。

基本的上一张、下一张和旋转按钮被激活时,不应自动移动键盘焦点。这样用户可以连续按同一个按钮,逐张检查商品细节,而不用每次重新寻找控制位置。

旋转按钮从 Stop 变为 Start 时,应更新其可理解的操作名称,但不应通过替换交互节点或重新定位焦点破坏连续操作。交接时应检查焦点是否仍留在同一个控制位置。

这里讨论的是 APG 的基本轮播控制模式,不意味着所有幻灯片选择器、标签式轮播或其他交互组件都必须采用完全相同的键盘规则。

决策分支:若按下一张后焦点跳到图片或页面其他位置,优先检查按钮激活后的焦点管理,而不是单纯延长轮播时间。

03 / 商品图轮播刚暂停又自动切走,怎样验收键盘和鼠标的停止规则?

虚构练习:慢速阅读与键盘浏览

以下为虚构练习(Illustrative exercise),不是实际店铺、浏览器或读屏软件测试。

输入 A 是一位需要较长时间阅读商品材质说明的买家。用户已经通过旋转控件明确请求保持停止,随后把鼠标移入再移出轮播区域。鼠标离开不应撤销这项停止请求。悬停本身的临时暂停,须与用户要求保持停止的状态分别检查。

输入 B 是使用键盘浏览商品图片的顾客。用户按 Tab 进入轮播,首先应能访问旋转控制,自动切换随焦点进入而停止。之后用户按下一张查看商品不同角度,再把焦点移出轮播区域。

对输入 B,焦点移出本身不能成为重新启动的理由。只有用户明确选择恢复旋转,才应进入自动播放状态。

决策分支:A 重点验收悬停暂停与主动停止的持续性;B 重点验收焦点进入、按钮连续操作及焦点离开后的停止状态。

04 / 商品图轮播刚暂停又自动切走,怎样验收键盘和鼠标的停止规则?

将轮播状态与商品内容一起交接验收

轮播的可访问性不仅取决于是否有暂停按钮。隐藏或移出屏幕的幻灯片不应让读屏用户误以为它们仍是当前正在展示的商品内容。

应核对当前幻灯片名称、图片内容与实际显示状态是否一致,避免视觉上已经切换到蓝色商品,辅助技术却仍提供上一张红色商品的上下文。

交接核对应覆盖四种情况:自动旋转中、鼠标悬停、键盘焦点进入,以及用户明确停止或恢复后的状态。特别检查从暂停状态切换到下一张时,控制按钮是否保持焦点。

较早的动画示例可能包含焦点移出后重新启动的实现,但本指南采用当前 APG Carousel Pattern 的停止规则,不应直接复制旧代码中的自动恢复行为。

最终记录预期动作、触发条件和实际待验收项目。这里提供的是网页团队交接规范,不代表已在真实店铺安装功能或完成辅助技术兼容性测试。

05 / 商品图轮播刚暂停又自动切走,怎样验收键盘和鼠标的停止规则?

虚构练习核对表:轮播暂停、显式恢复与焦点连续性

以下示例为虚构练习。另存核对表后填写自己的真实观察;不能将示例当作已完成的验收。

虚构用户场景触发动作预期停止条件允许恢复的条件键盘或鼠标验收商品内容验收
A:慢速阅读商品说明的买家已明确请求停止,随后鼠标移入并移出悬停期间暂停;主动停止后保持停止用户明确选择 Start Slide Rotation鼠标移出不会撤销主动停止状态商品图片与说明保持可阅读,不发生意外切换
B:键盘逐张浏览商品的顾客Tab 进入轮播,激活下一张,再移出焦点焦点进入即停止自动旋转仅在用户明确请求后恢复旋转控制是首个 Tab 停靠点;按钮激活不移动焦点当前图片与可访问名称一致,隐藏幻灯片不混淆上下文

下载核对表(CSV)

署名:Itemlume发布 更新 证据与编辑政策
来源与范围

来源与延伸阅读

下面逐项列出已记录的来源核对日期;未记录日期的来源不自动使用文章发布日期。软件和平台规则可能变化,实际操作前请复核原文。

问题与答案

常见问题

用户按 Tab 离开商品轮播后,可以自动恢复播放吗?

按照当前 APG 自动轮播模式,不可以仅因焦点离开就恢复。停止后应等待用户明确请求重新开始旋转。

点击下一张商品图后,键盘焦点应该跟着移动到图片上吗?

基本轮播模式中的上一张、下一张和旋转按钮激活后不应移动焦点。保持焦点位置可以让用户连续操作,并减少重复寻找按钮的负担。

准备下一步所需素材

在 Itemlume 制作配套商品素材。

可在工作台制作新的商品创意素材,再在所选工具中继续处理。本文介绍的第三方软件操作需在对应软件内完成;本站入口不代表已集成这些流程。请查看当前功能说明、账户权限与积分报价。

查看素材创作工具 查看价格与积分