ข้ามไปยังเนื้อหา
Mera News

คู่มือสำหรับสำนักพิมพ์ บทที่ 3

ป๊อปอัปและการขอความยินยอม

ตรวจทานล่าสุด พฤศจิกายน 2026

กล่องทุกใบที่ขึ้นทับบทความขวางอยู่ระหว่างผู้อ่านกับเหตุผลที่เขาเข้ามา บางกล่องกฎหมายบังคับ แต่หลายกล่องไม่ได้บังคับ บทนี้อธิบายสิ่งที่ Google ขอ สิ่งที่หน่วยงานกำกับดูแลในยุโรปกล่าวไว้เรื่องความยินยอม และวิธีสร้างหน้าต่างขอความยินยอมที่ใช้ได้กับคีย์บอร์ดและโปรแกรมอ่านหน้าจอ บทนี้ไม่ใช่คำปรึกษาทางกฎหมาย จึงควรให้ที่ปรึกษาของคุณตรวจแบนเนอร์ของคุณ

สิ่งที่ Google ขอ

Google อธิบายว่า intrusive interstitial คือองค์ประกอบของหน้าที่บังมุมมองของผู้อ่านต่อเนื้อหา และเตือนว่าอาจทำให้ผลการค้นหาแย่ลง แนวทางของ Google ระบุไว้ชัดเจน

  • อย่าบังทั้งหน้า
  • อย่าส่งผู้อ่านไปหน้าแยกเพื่อขอความยินยอมหรือกรอกข้อมูล หากทุก URL รีไดเรกต์ไปหน้าขอความยินยอมหน้าเดียว ทุกหน้ายกเว้นหน้านั้นอาจหายไปจากผลการค้นหา
  • ใช้แบนเนอร์ที่กินพื้นที่หน้าจอเพียงส่วนเล็ก ๆ แทน interstitial เต็มหน้า
  • ใส่ใจแบบเดียวกันกับหน้าต่างโปรโมชันทุกชนิด รวมถึงหน้าต่างชวนรับจดหมายข่าวและชวนติดตั้งแอป

สำหรับการติดตั้งแอป Google ชี้ไปที่ตัวเลือกที่เบราว์เซอร์รองรับ เช่น Smart App Banner ใน Safari หรือแบนเนอร์ HTML ธรรมดาที่ลิงก์ไปยังสโตร์ที่ถูกต้อง

interstitial ที่กฎหมายบังคับได้รับการยกเว้นจากแนวทางนี้ Google ยกตัวอย่างการตรวจสอบอายุ หากคุณต้องมี ให้คงเนื้อหาไว้บนหน้าใต้ภาพซ้อนทับ เพื่อให้ยังจัดทำดัชนีได้

มาตรฐาน Better Ads ครอบคลุมโฆษณา โฆษณาป๊อปอัปอยู่ในรายการทั้งบนเดสก์ท็อปและมือถือ บนมือถือ โฆษณา prestitial อยู่ในรายการไม่ว่าจะมีหรือไม่มีตัวนับถอยหลัง บนเดสก์ท็อป รูปแบบที่อยู่ในรายการคือ prestitial ที่มีตัวนับถอยหลัง และรูปแบบที่ปิดได้ทันทีไม่ถือว่าต่ำกว่ามาตรฐาน

สิ่งที่หน่วยงานกำกับดูแลในยุโรปกล่าวไว้เรื่องความยินยอม

European Data Protection Board (EDPB) เผยแพร่แนวปฏิบัติเรื่องความยินยอม และรายงานจากคณะทำงานเรื่องแบนเนอร์คุกกี้ รายงานของคณะทำงานบันทึกเกณฑ์ขั้นต่ำที่ตกลงกันสำหรับการจัดการข้อร้องเรียน และกฎระดับประเทศยังมีผลอยู่ จึงควรถือประเด็นเหล่านี้เป็นเกณฑ์พื้นฐาน

  • ไม่มีสิ่งใดที่ต้องขอความยินยอมทำงานก่อน คุกกี้ที่ต้องได้รับความยินยอมตั้งไม่ได้จนกว่าผู้อ่านจะตกลงด้วยการกระทำที่ชัดเจน
  • การเลื่อนหน้าไม่ใช่ความยินยอม แนวปฏิบัติระบุว่าการเลื่อนหรือปัดหน้าจอไม่ถือเป็นการกระทำที่ชัดเจนและยืนยันความยินยอมไม่ว่ากรณีใด
  • ช่องที่ติ๊กไว้ล่วงหน้าไม่ใช่ความยินยอม การนิ่งเฉย หรือการใช้บริการต่อไปเฉย ๆ ก็เช่นกัน
  • ต้องมีวิธีปฏิเสธ หน่วยงานส่วนใหญ่ในคณะทำงานมองว่าแบนเนอร์ที่ไม่มีตัวเลือกปฏิเสธในทุกชั้นที่มีปุ่มยินยอมเป็นการละเมิด
  • อย่าซ่อนการปฏิเสธ ลิงก์ปฏิเสธที่ซ่อนอยู่ในย่อหน้าโดยไม่มีสิ่งใดดึงความสนใจ ไม่นำไปสู่ความยินยอมที่ถูกต้อง สีและคอนทราสต์ของปุ่มจะประเมินเป็นรายกรณี
  • การเข้าถึงต้องไม่ขึ้นกับการยอมรับ แนวปฏิบัติยกตัวอย่างหน้าที่บล็อกเนื้อหาทั้งหมดจนกว่าผู้อ่านจะคลิก “ยอมรับคุกกี้” ว่าเป็นความยินยอมที่ไม่ได้ให้โดยอิสระ
  • การถอนความยินยอมต้องง่ายเท่ากับการตกลง หากการยินยอมใช้หนึ่งคลิก การถอนก็ควรใช้หนึ่งคลิก ลิงก์ถาวรในตำแหน่งมาตรฐานที่มองเห็นได้เป็นหนึ่งในตัวเลือก และคณะทำงานยังกล่าวถึงไอคอนเล็ก ๆ ด้วย

สร้างหน้าต่างที่ทุกคนใช้ได้

แบนเนอร์ที่ไม่บังหน้า

แบนเนอร์เล็กให้ผู้อ่านอ่านต่อได้ ซึ่งเป็นสิ่งที่ Google ชอบ แบนเนอร์ยังต้องเป็นไปตาม WCAG 2.2 เกณฑ์ความสำเร็จ 2.4.11 Focus Not Obscured (Minimum) จะไม่ผ่านหากแบนเนอร์แบบติดหน้าจอซ่อนรายการที่คีย์บอร์ดโฟกัสอยู่จนหมด ให้เพิ่ม scroll padding เท่ากับความสูงของแบนเนอร์

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

ให้แบนเนอร์ซ้อนทับอยู่ด้านบน หรือกันพื้นที่ไว้ให้ เพื่อไม่ให้ดันบทความลงและทำให้เลย์เอาต์ขยับ

กล่องโต้ตอบแบบ modal

หากหน้าต่างต้องหยุดผู้อ่านไว้ ให้สร้างเป็นกล่องโต้ตอบแบบ modal จริงตามรูปแบบของ 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 ผ่านแบนเนอร์โดยไม่ใช้เมาส์ และยืนยันว่าโฟกัสมองเห็นได้เสมอและไม่หายไปหลังแบนเนอร์
  • ทดสอบ modal ด้วยโปรแกรมอ่านหน้าจอ รวมถึง Escape และการคืนโฟกัส
  • แทนที่ป๊อปอัปชวนติดตั้งแอปแบบกำหนดเองด้วยแบนเนอร์เล็ก

แหล่งอ้างอิง