产品滑块：浏览、无障碍访问与信息提取

产品滑块是一行可水平滚动的产品卡片，用于展示一个较小的相关集合，而不会使其成为页面的主要目录。它应帮助购物者沿着明确的购买路径继续前进——例如寻找兼容配件或可比较的替代品——同时保留每件商品的身份、顺序和事实信息，供人类和机器使用。

为什么这个元素很重要

滑块通过在其变得相关的时刻展示少数选项来管理注意力。在产品页面上，已经了解主要商品的买家可能欢迎兼容配件。如果在那个位置放一个完整的网格，会与主要购买决策产生竞争；而一个紧凑的行则保留了原始决策，同时允许探索。

这一优势伴随着心理代价：超出可见边缘的任何内容都更容易被忽视。第一张卡片获得的曝光量超过第七张，而一张被裁剪的末张卡片如果不通过设计提示连续存在，就可能看起来像错误。因此，滑块必须包含一个次要的、有意排序的集合。它绝不能隐藏读者为了理解价格、安全性、兼容性或产品范围而需要看到的选择。

机器可提取性是指搜索引擎、助手、信息流和内容工具能够隔离每个产品并保留其字段的能力。一个人可以滑动手指来显示第六张卡片；而爬虫可能永远不会执行这一交互。当后面的幻灯片仅通过 JavaScript 加载、使用 display:none，或仅仅作为背景图片存在时，系统看到的就是一个不完整的集合。将每张卡片以语义化的源码顺序渲染，使机器能够恢复购物者可以访问到的相同名称、URL、位置、价格、货币和可购性信息。

遵循元素编写规则 进行优先级判断：在决定外观之前先按用途对区块进行分类。如果其作用是展示一条次要的产品路径，则适用此元素。如果其作用是显示完整结果或支持并排评估，则应以适当的网格或类型化表格为准。

何时使用

当以下所有条件都成立时，使用产品滑块：

• 该集合对于页面的主要任务是次要的。
• 产品共享一种明确的关联关系，例如兼容配件、同类替代品、最近浏览过的商品或编辑推荐清单。
• 四到八张简洁的卡片提供了有用的广度，而不会创建隐藏目录。
• 排序可以通过相关性、兼容性、编辑排名、时间或其他可见规则来解释。
• 每个产品作为一张紧凑卡片是可理解的，并且有一个用于查看完整详情的规范目标页面。

当垂直空间受限且读者不需要同时看到所有选项时，滑块优于网格。它可以在产品详情页面上保留上下文，在移动端保持短推荐集的完整性，并在不将八个完整描述放入文章流程的情况下展示下一条路径。

当该集合本身就是目的地时，使用网格。搜索结果、产品分类、筛选后的集合或需要完整浏览的集合需要可见的数量、排序、筛选、分页和稳定的 URL。当读者必须在各选项之间评判相同规格时，使用对比表 。当项目是同一主题的不同视角而非独立的可购产品时，使用图片画廊 。

常见的近似错误包括：将两件商品的行强行放入轮播控件、将 30 个产品的分类塞进一个推荐条、使用包含促销而非产品的主横幅轮播，以及用滑块隐藏折叠线以下的弱推荐。“最近浏览"也是有条件的近似错误：只有当访问者确实有浏览历史、标题说明为什么显示这些商品、且空状态不会捏造活动时才有用。

放置位置

放置位置应回答读者刚刚产生的问题。将兼容配件放在兼容性和包含配件信息之后，将替代品放在主要产品的局限性或决策总结之后，将相关产品放在分类的主列表之后而不是之前。在编辑类内容中，将推荐条放在评判标准和证据之后，而不是在读者了解产品为何符合条件之前。

将标题、关联关系说明、商品数量、控件和卡片保留在同一区域中。当存在完整集合时，在标题旁或行末放置"查看全部"链接。该链接必须指向一个可爬取的规范页面，而不是展开一个无限制的客户端推荐条。

不要将滑块放在另一个滑块、自动旋转横幅、价格表或页面的主要购买控件旁边。相邻的水平手势会造成歧义，而相互竞争的价格可能使人不清楚主要行动号召按钮购买的是哪个商品。不要用推荐来打断程序性步骤、警告、结账条款或必需的法律披露。如果选择某个变体会改变主要产品的价格、可购性或配置，则绝不能将必要变体放在滑块内部；变体应属于其所附属的产品控件。

在小屏幕上，允许显示一张完整卡片加上下一张卡片的有意窥视，或一张完整卡片加上明确的位置标签。该区域可以水平滚动，但文档本身不能。在滑块之后保留一条可见路径，以便键盘或触屏用户永远不会被困在重复的水平导航中。

构成要素

1. 分区标题： 命名集合，例如"兼容配件”，而非通用的"你可能也喜欢"。
2. 关联关系说明： 解释产品为何符合条件，以及排序是基于编辑推荐、行为记录还是商业合作。
3. 商品数量： 在交互前说明有限的大小，例如"6 件商品"。
4. 视口： 仅裁剪呈现；它不会从文档中移除屏幕外的卡片。
5. 产品卡片： 将一个产品的名称、目标页面、决定性限定词和当前的商业信息作为一个整体单元保留。
6. 连续提示： 使用部分下一张卡片、位置文本或两者兼用；仅靠阴影太容易被忽略。
7. 上一个和下一个控件： 使用以其效果命名的按钮，并在两端暴露禁用状态。
8. 位置指示器： 宣布一个范围，例如"商品 1–3 / 6"，而不是一行无标签的圆点。
9. 查看全部路径： 当存在完整集合时，打开规范页面。
10. 焦点处理： 在每个控件和卡片链接上保持可见，不被视口裁剪。

每张卡片遵循产品卡片 约定。滑块拥有集合的含义和导航功能，而不会在本地重新定义产品信息。

设计示例

编辑推荐清单： 用于按声明标准选择的四到八件商品。只有当页面包含该排名的证据时，顺序才可代表排名；否则将其标注为"精选选项"并避免序数性声明。

相关产品： 用于在主要产品说明之后展示同类别或替代商品。说明共享属性（如外形尺寸或价格区间），而不是暗示个性化推荐。

兼容配件： 当每个商品与所属产品存在经过验证的关系时使用。在卡片文本中重复兼容的型号或范围；邻近性不能保证兼容性。

行为历史： 仅当访问者确实创建了该状态时，用于最近浏览或收藏的商品。标注依据，保留时间顺序，在适当情况下提供移除功能，并且不要将个性化历史记录输出到共享缓存或结构化数据中。

参数

图片是有条件的，因为以文本为先的产品卡片没有图片也可以完整。如果使用图片，其文件必须存在，尺寸必须预留空间，替代文本必须匹配其用途。如果一张卡片显示价格或可购性，则每个同级卡片必须显示等效的当前字段或明确的状态。

语法与代码示例

便携式 Markdown 指令

:::product-slider{variant=accessories orderedBy=compatibility visibleDesktop=3 visibleMobile=1.1 viewAllLabel="View all accessories" viewAllUrl="/accessories/"}
## Compatible desk accessories

Verified for the Arc 14 laptop; four products.

::item{id=arc-stand name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock"}
Raises 13–16 inch laptops and leaves the charging ports clear.
::

::item{id=dock-7 name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock"}
Adds seven ports and supports 100 W pass-through charging.
::
:::

Hugo 短代码映射

{{< product-slider variant="accessories" orderedBy="compatibility" visibleDesktop="3" visibleMobile="1.1" viewAllLabel="View all accessories" viewAllUrl="/accessories/" >}}
## Compatible desk accessories

Verified for the Arc 14 laptop; four products.

{{< product-slide id="arc-stand" name="Arc laptop stand" url="/products/arc-stand/" price="USD 69" availability="in-stock" >}}
Raises 13–16 inch laptops and leaves the charging ports clear.
{{< /product-slide >}}

{{< product-slide id="dock-7" name="Dock 7 hub" url="/products/dock-7/" price="USD 89" availability="in-stock" >}}
Adds seven ports and supports 100 W pass-through charging.
{{< /product-slide >}}
{{< /product-slider >}}

这是预期的适配器规范，而非已注册的短代码调用。它仅使用命名参数。在适配器存在之前，将该集合实现为语义 HTML 或非交互式行，不要凭空创建不支持的短代码。

WordPress 块

<!-- wp:amicited/product-slider {"variant":"accessories","orderedBy":"compatibility","visibleDesktop":3,"visibleMobile":1.1,"viewAllLabel":"View all accessories","viewAllUrl":"/accessories/"} -->
  <!-- wp:heading {"level":2} --><h2>Compatible desk accessories</h2><!-- /wp:heading -->
  <!-- wp:paragraph --><p>Verified for the Arc 14 laptop; four products.</p><!-- /wp:paragraph -->
  <!-- wp:amicited/product-slide {"id":"arc-stand","name":"Arc laptop stand","url":"/products/arc-stand/","price":"USD 69","availability":"in-stock","qualifier":"Raises 13–16 inch laptops and leaves the charging ports clear."} /-->
  <!-- wp:amicited/product-slide {"id":"dock-7","name":"Dock 7 hub","url":"/products/dock-7/","price":"USD 89","availability":"in-stock","qualifier":"Adds seven ports and supports 100 W pass-through charging."} /-->
<!-- /wp:amicited/product-slider -->

示例

好的示例：兼容性明确

已验证适用于 Arc 14 的配件 — 4 件商品
Arc 笔记本支架 — 69 美元 — 有货。 适配 13–16 英寸笔记本；所有 Arc 14 端口仍可触及。
Dock 7 扩展坞 — 89 美元 — 有货。 支持 Arc 14 USB-C 充电规格和 100 W 直通充电。
静音键鼠套装 — 74 美元 — 库存紧张。 通过蓝牙连接；无需占用 Arc 14 端口的接收器。
Mini 台灯 — 45 美元 — 有货。 使用独立的 USB-C 电源供电；不从笔记本取电。

这之所以成功，是因为关联关系被命名且经过验证，每张卡片都做出了明确的兼容性声明，商业字段是并行的，并且有限数量可见。所有四个商品可以按源码顺序存在，即使视口只能容纳三个。

差的示例：无依据的隐藏推荐

你可能也喜欢
畅销款 — $69 — 立即购买
热门款 — $89 — 立即购买
[三次滑动后加载另外三张卡片。]

这之所以失败，是因为标题没有解释关联关系，“畅销款"和"热门款"没有定义的来源或时间段，货币是推断的，并且重复的"立即购买"标签在脱离上下文后失去了产品身份。更严重的是，三个产品直到交互后才存在，因此键盘用户、爬虫或脚本失败的场景会收到不同的集合。

架构标记与无障碍访问

当编辑型产品滑块的成员和排序具有意义时，它可以提供 ItemList。每个可见的产品实体使用一个 ListItem，包含 position、规范 URL 和产品引用。位置必须与 DOM 和视觉顺序匹配。不要将个性化的最近浏览历史标记为公共的 ItemList，因为该集合不是稳定的页面内容。

只有在可见页面支持相同信息时，每张卡片才能提供 Product 和 Offer 数据。名称和目标 URL 并不能证明虚构的价格、评分、品牌、可购性或评价数据是合理的。从相同的经批准的产品来源生成可见字段和结构化数据，并省略无法保持同步的不稳定属性。没有特殊的轮播架构类型。

仅在标题尚未提供足够的界标语义时，使用命名的 <section> 或 role="region"。将集合表示为 <ul>、<ol> 或等效列表；每张卡片是一个列表项。将屏幕外的卡片保留在 DOM 和无障碍树中。水平裁剪是呈现方式，而 display:none、aria-hidden="true"、inert 或仅客户端虚拟化会使内容不可用。

使用原生按钮作为上一个和下一个。将其命名为"上一个产品"和"下一个产品”，在两端准确禁用，并在移动后保留焦点。在礼貌状态区域中宣布"商品 4–6 / 8"，而无需将焦点移动到新暴露的卡片上。方向键可以作为增强功能，但 Tab 键必须正常到达控件和链接。可以支持滑动手势，但绝不能作为唯一的输入方式。

不要自动滚动。尊重减少动效的偏好，并使用即时或受控的滚动。卡片链接需要包含产品名称的可访问名称。当图片和标题都指向同一 URL 时，防止出现重复的焦点目标。在 200% 缩放级别下，卡片可能变为单卡片视口，但文本、控件和焦点环必须保持完整，且页面不得水平溢出。

编写规则

编写应使成员资格在吸引人之前先具备可辩护性。

• 具体的标题说明路径。 使用 3–10 个词：“Arc 14 兼容配件"或"100 美元以下替代品”。绝不要仅依赖"更多"、“热门"或"你可能也喜欢”。
• 一句话确立选择依据。 使用 8–30 个词说明共享标准、受众、兼容性或历史来源。如果排名或流行度决定顺序，请指明指标、市场和时间段。
• 有限集合保持可查看性。 通常使用 4–8 件商品，不超过 12 件。两到三张卡片应形成静态行；较大的分类需要网格和规范集合路径。
• 卡片名称保留身份。 使用 1–8 个词的官方产品名称。不要将其替换为"最佳价值"、“我们的选择"或营销口号。
• 限定词回答一个决策问题。 使用 4–18 个词说明适配性、区分能力、兼容性或局限性。避免"优质品质"等泛泛的赞美。
• 并行信息支持浏览。 如果一张卡片显示价格、货币、可购性、评分或配送信息，同级卡片显示来自同一来源和市场的等效字段或明确的不可用状态。
• 排序需要可问责的依据。 兼容性排序可将最强匹配放在首位；排名需要已发布的标准；时间顺序反映访问者的历史。付费置位必须披露，不得伪装成编辑相关性。
• 操作保留上下文。 使用"查看 Arc 笔记本支架”，而不是五个"了解更多"。卡片行动号召打开该产品的规范详情页面，除非操作明确将已知变体添加到购物车。
• 不稳定的声明需要所有权。 价格、库存、配送、折扣、评分和流行度来自经批准的系统，并带有所需的时效性行为。编辑文案不得硬编码冲突值。

绝不要在幻灯片内放置长篇评论、对比矩阵、变体选择器、数量控件、结账条款、推荐语、倒计时器、弹出窗口、视频播放器或必需的警告。不要预选附加产品、仅通过导航就添加产品到购物车、或隐藏赞助排序。滑块预览路径；完整决策位于目标页面或相邻的主要组件中。

使用该元素的文章类型

postTypes 前置字段驱动此表格。列入意味着当紧凑的次要产品集合能改善指定页面时，该元素是有条件的。

QA 检查清单

• 该集合对于页面的主要任务是次要的，并具有一种明确的产品关联关系。
• 网格或对比表不会更好地服务于读者的实际任务。
• 滑块通常包含 4–8 件商品，且不超过 12 件。
• 标题、选择依据、商品数量、控件、位置状态和"查看全部"路径在适用时可见。
• 每张卡片具有稳定的标识符、官方名称、规范目标页面和与决策相关的限定词。
• 价格、货币、可购性、评分、配送和促销字段是并行的，且显示时有可靠来源。
• 兼容性、排名、流行度、个性化和赞助声明均披露其依据。
• DOM 顺序、视觉顺序、宣布的位置、键盘顺序和任何 ItemList 位置相匹配。
• 每个产品在服务端渲染，无需 JavaScript 即可使用；没有后续幻灯片依赖交互或客户端请求。
• 屏幕外卡片保留在无障碍树中，未被隐藏、设为 inert 或仅由背景图片表示。
• 上一个和下一个按钮具有不同的名称、正确的禁用状态、可见的焦点以及移动后的稳定焦点。
• 触摸滑动和方向键是增强功能；标准按钮和 Tab 导航提供完整的访问途径。
• 无自动滚动、焦点窃取、键盘陷阱或页面级水平溢出。
• 位置变化以文本方式宣布，颜色、裁剪、阴影或圆点从不单独传达连续性。
• 每张图片路径在发布前解析，尺寸预留空间，替代文本反映卡片的用途。
• 在 200% 缩放和窄屏下，一张卡片、其文本、控件和焦点环保持完整。
• 结构化数据重复可见的、当前的事实，并省略个性化历史或虚构的商业属性。
• 当读者合理地需要浏览超出推荐条的范围时，完整集合具有可爬取的"查看全部" URL。
• 便携式 Markdown、Hugo 和 WordPress 表示形式保留相同的产品、顺序、字段和回退机制。

常见问题

学院模板会渲染存储在 [[faq]] 前置字段中的五个已审阅的问题。