跳到主要内容
Mera News

出版商指南，第 3 章

弹窗与同意

最近审查：2026 年 11 月

每一个出现在文章上方的框，都横在读者和他们来读的内容之间。有些是法律要求的，很多则不是。本章介绍 Google 的要求、欧洲监管机构对同意的说法，以及如何构建一个键盘和读屏软件都能使用的提示。本章不构成法律意见，请与你自己的法律顾问一起检查你的横幅。

Google 的要求

Google 把侵入式插页描述为遮挡读者查看内容的页面元素，并警告它们可能导致搜索表现不佳。它的指导很具体：

  • 不要覆盖整个页面。
  • 不要把读者送到单独的页面去同意或输入信息。如果每个 URL 都重定向到同一个同意页面，除该页面之外的所有页面都可能从搜索结果中消失。
  • 使用只占屏幕一小部分的横幅，而不是整页插页。
  • 对各类推广对话框同样谨慎，包括新闻通讯订阅提示和应用安装提示。

对于应用安装，Google 指向浏览器支持的方案，例如 Safari 中的智能应用横幅，或是链接到相应商店的普通 HTML 横幅。

法律要求的插页不受这一指导约束。Google 举的例子是年龄验证。如果你需要，请把内容保留在覆盖层下方的页面上，这样它仍然可以被索引。

Better Ads 标准涵盖广告。弹窗广告在桌面端和移动端都被列入。在移动端，无论有无倒计时，前置插页广告都被列入。在桌面端，被列入的形式是带倒计时的前置插页广告，而可以立即关闭的则不低于标准。

欧洲监管机构对同意的说法

欧洲数据保护委员会（EDPB）发布了关于同意的指南，以及其 Cookie 横幅工作组的一份报告。工作组报告记录了处理投诉时商定的最低门槛，各国的规定仍然适用，所以请把这些要点当作基准。

  • 需要同意的内容不得先运行。 需要同意的 Cookie，在读者通过明确的积极行为表示同意之前不得设置。
  • 滚动不是同意。 指南指出，滚动或滑动在任何情况下都不算明确的肯定行为。
  • 预先勾选的框不是同意。 沉默，或者仅仅是继续使用服务，同样不是。
  • 提供拒绝的途径。 工作组中绝大多数机构认为，在任何带有同意按钮的层级上都没有拒绝选项的横幅属于违规。
  • 不要隐藏拒绝。 把拒绝链接埋在一段文字里，没有任何东西引起注意，不能形成有效的同意。按钮的颜色和对比度会逐案评估。
  • 访问不能取决于接受。 指南举了一个例子：在读者点击“接受 Cookie”之前屏蔽所有内容的页面，属于并非自由给出的同意。
  • 撤回必须和同意一样容易。 如果同意只需一次点击，撤回也应如此。在可见的标准位置放一个固定链接是一种做法，工作组还提到了一个小图标。

构建每个人都能用的提示

不阻挡页面的横幅

小横幅让读者可以继续阅读，这是 Google 更倾向的做法。它仍然必须符合 WCAG 2.2。成功标准 2.4.11“焦点不被遮挡（最低）”规定，如果固定横幅完全遮住了拥有键盘焦点的项目，就不合格。请添加与横幅高度相等的滚动内边距：

html {
  scroll-padding-bottom: 96px; /* the banner's height */
}

让横幅以叠加方式显示，或者为它预留空间，这样它就不会把文章往下推，造成布局偏移。

模态对话框

如果提示必须让读者停下来，请按照 W3C 的模式把它构建成真正的模态对话框。

<div role="dialog" aria-modal="true"
     aria-labelledby="consent-title" aria-describedby="consent-text">
  <h2 id="consent-title">Your privacy choices</h2>
  <p id="consent-text">Choose whether this site may use cookies for advertising.</p>
  <button type="button">Reject all</button>
  <button type="button">Accept all</button>
  <button type="button">Choose settings</button>
</div>
  • 对话框打开时，把焦点移入其中。
  • Tab 和 Shift + Tab 在对话框内的控件之间循环，并在两端循环回绕。
  • Esc 关闭对话框。把它视为没有做出选择，绝不能视为接受。
  • 关闭时，把焦点还给打开它的元素。如果对话框是在页面加载时打开的，则把焦点移到内容的开头。

在手机上

  • 把横幅固定在屏幕底部，并让标题在它上方保持可见。
  • 把按钮以全宽方式堆叠，方便点按，“接受”和“拒绝”大小相同。
  • 保持文字简短，把细节放到第二层。
  • 在 320 CSS 像素宽度下，以及文字放大到 200% 的情况下检查布局。按钮必须无需横向滚动就能点到。

在桌面端

  • 使用底部栏或角落面板，并让文章保持无遮挡。
  • 让每个控件都能用键盘操作，并有可见的焦点指示。
  • 文字的对比度至少为 4.5:1，大号文字为 3:1。

检查清单

  • 用全新的浏览器配置文件，在手机和桌面端分别加载你的首页和一篇文章。数一数内容上方出现了什么。
  • 移除所有法律不要求的整页覆盖层。
  • 移除任何指向单独同意页面的重定向。
  • 确认在读者同意之前，没有任何需要同意的标签触发。
  • 凡是有接受选项的地方都放上拒绝选项，并使用同等分量的按钮。
  • 移除预先勾选的框，以及任何把滚动算作同意的逻辑。
  • 在每个页面上添加用于更改隐私选择的固定链接或图标。
  • 不用鼠标，用 Tab 键走一遍横幅，确认焦点始终可见，不会消失在它后面。
  • 用读屏软件测试模态对话框，包括 Esc 键和焦点返回。
  • 用小横幅替换自定义的应用安装弹窗。

来源