Swatch：色板与选项选择器
Swatch 是让顾客在一个变体选项（颜色、尺码、材质）的若干取值中选一个的选择器，取值以色块、图片缩略图、文字按钮（pills）或下拉呈现。它的本质是一组单选，而不是切换内容面板的 Tabs。
适合与不适合
适合取值有限、需要一眼比较外观的选项：颜色、图案、材质、少量尺码。不适合取值多到无法平铺（改用下拉或搜索）、取值差异只有文字才能说明（用文字按钮而不是色块），以及不是“选一个”而是“可多选”的加购项（用复选框，见购买区）。
与相邻模式的区别
| 对比对象 | 判据 |
|---|---|
| Tabs | Tabs 在同一区域切换不同面板内容，选中项对应一块内容；Swatch 选择的是一个数据值，选中后价格、媒体与库存随之变化，没有“面板” |
| 普通单选表单 | 语义相同，都是 radio 组；Swatch 只是外观不同，并且选中后要同步页面其他部分 |
| Cards | 卡片是内容单元，可以整体作为链接；Swatch 是控件，选中只改变当前购买配置，不跳转 |
| 下拉 | 下拉节省空间，但选项隐藏；Swatch 平铺、可直接比较，取值多时退化为下拉 |
优点与缺点
| 优点 | 缺点 |
|---|---|
| 外观一眼可比，减少打开下拉的操作 | 色块只是颜色的近似，可能与实物不一致 |
| 取值平铺，可用性状态可见 | 取值多时占用空间、命中区域拥挤 |
| 原生 radio 即可实现，语义完整 | 自绘时容易丢失名称、分组与键盘支持 |
| 与价格、媒体联动时购买信心更高 | 不可用与缺货表达含糊会导致误购或放弃 |
内容与交互要求
每个取值都有文字名称。色块必须有颜色名（“深橄榄绿”），可见或对辅助技术可读；图片缩略图同理。选中后在选项标题旁显示当前值（“颜色：深橄榄绿”）。色块只是颜色的近似，实物以商品图为准，选中后媒体切换到对应变体，见变体媒体。
选中后价格、库存与购买按钮同步到该变体，来自同一份变体数据，见购买区。选中是页面内更新，不得导航到新页面或自动提交；WCAG 3.2.2 On Input 要求改变控件设置不得在用户未被告知时引起上下文变化。
不可用与缺货必须区分：
- 组合不存在（该颜色没有该尺码）：用原生
disabled或隐藏；被禁用的 radio 不可选中、不进入焦点顺序，因此邻近处要用文字说明为何不可选。 - 组合存在但缺货：保持可选，选中后在购买区说明缺货并提供到货通知，见库存状态与到货通知。这样顾客仍能了解该配置存在。
- 二者都不能只靠划线或变灰表达（SC 1.4.1 Use of Color），至少要有文字、图标形状或说明之一。
- 需要保持可聚焦的不可用项，MDN 说明
aria-disabled="true"只暴露禁用语义，不会阻止操作或移出焦点顺序，功能抑制要自己实现。
响应式与无障碍
以原生 <input type="radio"> 加 <label> 实现，同一选项共享 name，外层用 <fieldset> 与 <legend>（“颜色”）。这样无需 CSS 或 JavaScript 也已可访问（MDN radiogroup 页）。自绘 role="radiogroup" 时，组与每个选项都要有名称，选中态用 aria-checked，并满足 SC 4.1.2 Name, Role, Value 对可编程确定的状态的要求。分组关系见 SC 1.3.1 Info and Relationships。
键盘（APG Radio Group）：Tab 进入组并聚焦已选项，无选中时聚焦第一项；方向键移动焦点并同时选中；Space 选中当前项；到头循环。因为方向键即选中，变体请求要合并连续操作，较早响应不得覆盖较新选择。
选中态与焦点样式对相邻颜色至少 3:1（SC 1.4.11 Non-text Contrast；被禁用的组件例外）。命中区域至少 24×24 CSS 像素，除非满足间距等例外（SC 2.5.8 Target Size (Minimum)）；把 <label> 做成整个色块可扩大命中区域。24 像素是 AA 下限，触屏可以更大，属编辑建议。
状态与退化
零项：只有默认变体时不渲染选择器。一项：只有一个取值时显示为文字，不做成可选控件。多项：按选项分组，每个选项独立标签。取值很多时改用下拉，或提供筛选与搜索；数量阈值缺少实证依据，不给数字。加载：切换中价格与购买按钮同步进入更新状态。错误：说明未更新并保留上一次选择。未选：不预选后让顾客无意购买，加购按钮提示“请选择颜色”。跨市场：可选取值与库存随市场变化。无 JavaScript：radio 与表单仍可提交，价格随页面刷新更新。减少动态：选中过渡动画可省略。
常承载的内容与模块
购买区、变体媒体、库存状态与到货通知；加购后的核对见购物车摘要。Horizon 的变体选择器可渲染按钮、色板或下拉，见Horizon 变体选择。
发布前检查
- 每个色块与缩略图是否有文字名称，选中值是否可见？
- 是否是一组带组名的 radio，键盘可选择？
- 组合不存在与缺货是否分别表达，且不只靠颜色或划线？
- 选中后价格、媒体、库存与按钮是否来自同一变体？
- 选中态对比与命中区域是否达标？
待继续完善
- 读屏与触屏对色板的实际表现未实测。
- 选项数量多时改用下拉的阈值缺少依据。