跳至內容
Mera News

出版商指南，第 3 章

彈出視窗與同意

最後審閱：2026 年 11 月

每一個出現在文章上方的方塊，都擋在讀者與他們來訪的原因之間。有些是法律要求的，但很多不是。本章說明 Google 的要求、歐洲監管機關對同意所作的說明，以及如何打造一個能用鍵盤和螢幕閱讀器操作的提示。本章不構成法律意見，請與您自己的法律顧問確認您的橫幅。

Google 的要求

Google 將干擾性插頁式廣告描述為遮住讀者視線、擋住內容的頁面元素，並警告這可能導致搜尋表現不佳。它的指引相當具體：

  • 不要遮住整個頁面。
  • 不要為了同意或輸入，把讀者送到另一個獨立頁面。如果每個網址都重新導向到同一個同意頁面，除了該頁面以外，其他頁面都可能從搜尋結果中消失。
  • 使用只佔螢幕一小部分的橫幅，而不是全頁插頁。
  • 對各種宣傳性對話框都抱持同樣的謹慎，包括電子報提示與應用程式安裝提示。

至於應用程式安裝，Google 建議使用瀏覽器支援的做法，例如 Safari 的 Smart App Banner，或是一個連往對應商店的單純 HTML 橫幅。

法律要求的插頁不受此指引限制。Google 舉的例子是年齡驗證。如果您需要這類畫面，請讓覆蓋層底下的頁面保留內容，使它仍能被建立索引。

Better Ads Standards 涵蓋廣告。彈出式廣告在桌機與行動裝置上都列入其中。在行動裝置上，前置插頁廣告不論有沒有倒數計時都列入。在桌機上，列入的格式是有倒數計時的前置插頁廣告，而可以立即關閉的則不低於標準。

歐洲監管機關對同意的說明

歐洲資料保護委員會（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 會在對話框內的控制項之間循環，並在兩端回繞。
  • Escape 會關閉對話框。請將它視為沒有做出選擇，絕不能當成接受。
  • 關閉時，把焦點還給開啟它的元素。如果對話框是在頁面載入時開啟的，就把焦點移到內容的開頭。

在行動裝置上

  • 把橫幅固定在螢幕底部，並讓標題在它上方保持可見。
  • 把按鈕以滿版寬度堆疊，方便點選，而且「接受」與「拒絕」大小相同。
  • 文字要簡短，細節移到第二層。
  • 在 320 CSS 像素寬度、並把文字放大到 200% 的情況下檢查版面。按鈕必須不用左右捲動就能點到。

在桌機上

  • 使用底部列或角落面板，讓文章保持清爽。
  • 讓每個控制項都能用鍵盤操作，並有可見的焦點指示。
  • 文字的對比度至少維持 4.5:1，大型文字則至少 3:1。

檢查清單

  • 用全新的瀏覽器設定檔，在手機與桌機上載入您的首頁與一篇文章。算一算內容上方出現了哪些東西。
  • 移除法律並未要求的每一個全頁覆蓋層。
  • 移除任何導向獨立同意頁面的重新導向。
  • 確認在讀者同意之前，沒有任何需要同意的標籤被觸發。
  • 凡是有接受選項的地方，都放上拒絕選項，並使用同等分量的按鈕。
  • 移除預先勾選的方塊，以及任何把捲動視為同意的邏輯。
  • 在每個頁面上加入用來變更隱私選擇的永久連結或圖示。
  • 不用滑鼠，只用 Tab 走過整個橫幅，確認焦點始終可見，不會消失在橫幅後面。
  • 用螢幕閱讀器測試強制回應對話框，包括 Escape 與焦點歸還。
  • 以小型橫幅取代自訂的應用程式安裝彈出視窗。

來源