Avoid intrusive interstitials
Full-screen interstitials (pop-ups, overlays, cookie banners) that block the main content on mobile are a ranking penalty signal and accessibility barrier. Use non-intrusive alternatives.
- Full-screen pop-ups that cover the main content immediately on mobile page load are penalized by Google Search (January 2017 Intrusive Interstitials Update)
- Acceptable interstitials: age verification, legally required notices (cookie consent where legally mandated), login walls for private content
- Unacceptable: pop-ups covering the main content area on mobile that are not easy to dismiss
- For accessibility: modal dialogs must trap focus, be dismissible by keyboard (Escape key), and return focus to the trigger element
- WCAG 2.1 SC 2.1.2 (No Keyboard Trap): users must be able to move focus away from any component using the keyboard
Rule Details
Interstitials (pop-ups, overlays, cookie banners) that obstruct the main content on mobile are penalized by Google and create accessibility barriers. When modals are necessary, they must be implemented with correct focus management.
Code Example
/* ❌ Problem: full-viewport overlay appears on page load */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
}
/* ✅ Better: small sticky banner at the bottom */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-height: 15vh;
background: #fff;
border-top: 2px solid #ccc;
z-index: 100;
padding: 1rem;
}Why It Matters
- SEO: Google demotes mobile search rankings for pages showing intrusive interstitials after clicking from search results.
- Keyboard Users: Without focus management, keyboard users cannot interact with or dismiss modals.
- Screen Reader Users: An overlay appearing without focus management is invisible to screen reader users.
- Cognitive Load: Unexpected overlays interrupt the user's intent and are especially disorienting for users with cognitive disabilities.
Acceptable vs Unacceptable Interstitials
| Type | Acceptable? | Reason |
|---|---|---|
| Full-screen pop-up on page load (mobile) | No | Google penalty; blocks content |
| Cookie consent banner (small, sticky) | Yes | Legally required; small footprint |
| Age verification gate | Yes | Legally required exception |
| Login wall (private content) | Yes | Content requires auth |
| Newsletter pop-up (delayed, closable) | With caution | Not on page load; must be accessible |
| GDPR/cookie full-screen overlay | Avoid | Use sticky banner instead |
Accessible Modal Pattern (When a Modal is Necessary)
<!-- ✅ Accessible modal dialog -->
<div
role="dialog"
aria-modal="true"
aria-labelledby="dialog-title"
aria-describedby="dialog-description"
id="cookie-dialog">
<h2 id="dialog-title">Cookie Preferences</h2>
<p id="dialog-description">We use cookies to improve your experience.</p>
<button type="button" id="accept-btn">Accept all</button>
<button type="button" id="reject-btn">Reject non-essential</button>
<button type="button" aria-label="Close dialog" id="close-btn">×</button>
</div>// Required focus management
function openModal(dialog, triggerEl) {
dialog.removeAttribute('hidden');
dialog.querySelector('[id$="-btn"]').focus(); // Focus first button
}
function closeModal(dialog, triggerEl) {
dialog.setAttribute('hidden', '');
triggerEl.focus(); // Return focus to trigger
}
// Dismiss on Escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal(dialog, triggerEl);
});Verification
- Inspect the rendered UI at the breakpoints and interaction states affected by the rule.
- Confirm the computed styles match the intended fix in DevTools.
- Test at least one mobile and one desktop viewport before shipping.
- If the rule affects motion, contrast, or layout stability, verify those user-facing outcomes directly.
Use with AI
Copy these prompts to use with your AI assistant, or install the MCP server to use directly from Claude, Cursor, or Windsurf.
Check
Verify implementation
Identify elements using `position: fixed` or `position: absolute` with high `z-index` values that cover significant portions of the viewport. For each: (1) Does it appear on page load or within a few seconds? (2) Does it cover more than a small portion of the main content on mobile screens (< 600px width)? (3) Is it easily dismissible — is there a visible close button with an accessible name? (4) Can it be dismissed by pressing the Escape key? (5) Does focus move into the dialog when it opens and return to the trigger when it closes? Flag dialogs that fail any of these checks.
Fix
Auto-fix issues
(1) Replace full-screen page-load pop-ups with: (a) sticky banners at the top or bottom (max-height 10-15% of viewport), (b) inline content blocks within the page, or (c) slide-in panels that do not cover the main content. (2) For legally required notices, use small sticky banners rather than full-screen overlays. (3) For all modal dialogs that must be used: implement ARIA dialog pattern — add `role='dialog'`, `aria-modal='true'`, `aria-labelledby` pointing to the dialog title; trap focus within the dialog using a focus trap; move focus to the first focusable element inside the dialog on open; close on Escape key; return focus to the trigger element on close. (4) Delay non-critical pop-ups until user interaction rather than triggering on page load.
Explain
Learn more
Intrusive interstitials create two categories of problems: (1) SEO: Google's Intrusive Interstitials Update (2017) penalizes pages that show pop-ups covering the main content on mobile immediately after navigating from search results. Exempt are legally required notices, age verification, and login walls for gated content. (2) Accessibility: A modal dialog that does not manage focus is a WCAG failure. If a screen reader user cannot tell a dialog has appeared, or cannot navigate to it, or is trapped in it without being able to escape, the page fails WCAG 2.1 SC 2.1.2 (No Keyboard Trap) and SC 4.1.3 (Status Messages). The WAI-ARIA dialog pattern requires focus management as a baseline requirement.
Review
Code review
Review stylesheets, component styles, and responsive states related to Avoid intrusive interstitials. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.