展现形式 · 概念

Before / After：前后对比滑块

说明 Before / After 前后对比滑块如何展示护肤、修图、装修、清洁等效果差异，这是高风险展现：需同条件拍摄、不修图并披露典型结果；依据 APG Slider、WCAG 2.5.7 与 2.1.1 讨论键盘与触摸操作、文字描述和并排替代形式，真实性与合规部分标注需要合规确认。

Before / After 把同一对象处理前后的两张图叠在一起，用可拖动的分界线让顾客自己比较差异，常见于护肤、修图、装修和清洁类商品。它与 Split 的区别是：Split 是静态并排，Before / After 依赖顾客拖动才看到差异；它展示的是效果结果，所以真实性风险比一般图片展现高得多。

适合与不适合

适合视觉差异是购买理由、且能在同一构图下拍摄的对象：装修翻新、地毯或水垢清洁、修图与抛光。不适合：效果因人而异的商品（护肤、减重、护发）在没有典型结果说明时使用；差异靠光线、角度、妆容或后期造成；无法出示同条件原图与授权的素材；把使用周期、用量、搭配的其他产品去掉后读起来像单品效果。

与相邻模式的区别

相邻模式	判据	说明
Split	是否需要交互	两张图并排放置无需拖动，键盘与触屏都天然可用，也是本模式最稳妥的替代形式
Media Gallery	是否是同一对象的前后	Media Gallery 是一组独立媒体的浏览；前后对比的两张图必须同构图、同尺寸，互相有对应关系
Comparison	比较对象	Comparison 比较多个商品或方案的属性；Before / After 比较同一个对象的两个状态
Carousel	是否并列	多组案例可以放进 Carousel 逐组浏览，但每组内部仍是一对前后图

优点与缺点

优点	缺点
效果差异直观，顾客可自己控制比较	最容易被用作夸大效果的手段，合规风险高
占位小，一个组件对应一组证据	拖动是唯一交互时，键盘、触屏辅助技术用户可能无法使用
适合装修、清洁等视觉结果明显的商品	两张大图，性能与流量成本高
便于突出使用周期与条件的说明	缺少文字描述时，读屏用户得不到任何信息

真实性（红线）。 两张图必须在同样的条件下拍摄：同一对象、相同的光线、角度、距离与背景，色彩与滤镜设置一致；不修图，不用美颜、磨皮或调色；标明间隔时间、使用方法与用量，以及同时使用的其他产品。拍摄者、授权范围与拍摄日期要有记录，授权要求参照顾客证言与用户生成内容：可公开身份、授权覆盖当前渠道与素材、不由品牌代写。不用可能被读成普遍效果的文案，例如“人人都能……”。展示素材的类型与代表性说明字段见商品展示与使用场景。

典型结果披露。 FTC 官方问答页（FTC's Endorsement Guides: What People Are Asking，读取于 2026-09-29）中写到：广告展示取得非凡或高于平均结果的代言人时，如果广告主没有证据证明该代言人的经历代表人们按广告所述方式使用产品通常能达到的结果，广告就必须向受众说明遵循同一用法的一般预期结果。这只是问答页的概括，不是 16 CFR Part 255 的原文，且仅涉及美国；该页没有出现“before and after”字样，前后对比图本身的具体规则、各国各行业的限制（护肤、减重、医疗美容等）以及“结果因人而异”这类免责字样是否足够，均需要合规确认。披露必须放在图的旁边、和图一起被读到，不放在页脚。

响应式与无障碍

键盘与触摸。 WCAG 2.2 的 2.1.1 Keyboard（A）要求所有功能都能用键盘操作，除非底层功能取决于移动路径而不只是终点；比较两张图不属于这个例外。2.5.7 Dragging Movements（AA）要求凡是用拖动完成的功能，都能用单一指针不拖动地完成，除非拖动是必要的或由用户代理决定；理解文档的例子是范围滑块可以点击轨道上任意位置移动滑块。所以滑块要提供：点击轨道跳转位置、键盘方向键，以及“只看前”“只看后”或“并排”的按钮。

语义。 MDN 建议优先用原生 <input type="range"> 而不是 slider 角色，原生控件自带键盘焦点、焦点样式与交互。必须自定义时，APG Slider 与 MDN 的要求是：可聚焦的滑块元素具有 role="slider"，必须有 aria-valuenow，aria-valuemin 默认 0、aria-valuemax 默认 100，数值不好理解时用 aria-valuetext（如“显示 60% 为处理后”，虚构示例）；必须有可访问名称（aria-labelledby 或 aria-label）；键盘至少支持左右或上下方向键改变一步、Home 与 End 跳到最小与最大，Page Up 与 Page Down 可选。两者都提醒：触屏辅助技术需要通过合成按键事件来改变滑块值，必须在触屏为主要输入的设备上用辅助技术充分测试。

目标尺寸。 2.5.8 Target Size (Minimum)（AA）要求指针目标至少 24 x 24 CSS 像素，有间距、等效控件等例外；滑块把手与按钮都要达到。

文字描述。 1.1.1 Non-text Content（A）要求非文本内容有等效目的的文字替代。两张图要分别有 alt，描述可见的差异（“处理前：浴室瓷砖接缝发黑；处理后：接缝呈灰白色”，虚构示例），而不是只写“前”“后”；不下医学或效果结论。另在图注写明拍摄条件、间隔时间与代表性说明，读屏用户与看不到滑块的人都能得到全部信息。两张图的信息不得只存在于滑动位置的视觉效果里。

性能。 两张大图要预留空间以避免位移：web.dev 建议图片写 width 与 height，或用 CSS aspect-ratio 预留，见 CLS。若滑块位于首屏，web.dev 明确不要对 LCP 图片使用懒加载，并用 fetchpriority="high" 提示优先级，但一两张以上就失去意义，见 LCP；位于首屏以下的滑块可以延迟加载，用 srcset 提供多档尺寸，两张图分辨率与比例一致。

状态与退化

零项：没有经授权的真实同条件素材时不展示，不用示意图冒充。
一项与多项：一组时直接展示；多组时覆盖不同条件与结果，不只挑最好的，并标明是精选，放入 Carousel 或列表。
加载：两张图都就绪后再显示滑块；只加载到一张时，显示该图与文字说明，不显示无意义的分界线。
错误：一张失败时退化为单图加文字，不伪造另一张。
无 JavaScript：退化为并排的两张图与图注，这是可完整使用的替代形式。
减少动态：不做自动来回扫动的引导动画；若有，应能暂停，并尊重 prefers-reduced-motion。

常承载的内容与模块

商品展示与使用场景中的前后对比类素材（其字段要求写明代表性说明）、顾客证言中带结果限定的个案，以及用户生成内容里取得授权的顾客照片。这些内容的授权、复核与失效处理由各自的内容类型负责，展现层不得改变其限定条件。

发布前检查

两张图是否同条件拍摄且未修图？拍摄日期、间隔与授权是否有记录？
图旁是否写明使用条件、用量、时间与典型结果？没有把握的地区或行业是否已经过合规确认？
键盘、点击轨道与不拖动的替代操作是否都能完成比较？
自定义滑块是否有名称、aria-valuenow、aria-valuetext 与方向键、Home、End？
两张图是否各有文字描述，图注是否包含全部关键信息？
图片是否预留尺寸，首屏是否没有懒加载 LCP 图片？
无 JavaScript 时是否退化为并排两图？

待继续完善

各国家、各行业对前后对比图的具体广告规则没有核验，需要合规确认。
没有读 16 CFR Part 255 原文，本文只依据 FTC 官方问答页的概括。
没有在读屏与触屏辅助技术上测试自定义滑块。
缺少一份标注为虚构的、含拍摄条件与授权记录的素材登记表示例。