用途
本条目用于指导前端开发中避免使用侵入式插页（intrusive interstitials）。侵入式插页指遮挡页面主要内容的模态框、遮罩、弹窗、Cookie 横幅、订阅对话框和推广浮层。条目从可访问性和搜索引擎优化两个角度说明为何应避免这类实现，并给出检查与修复方法。
主要问题
侵入式插页对屏幕阅读器用户构成障碍：他们可能不知道有模态框正在遮挡页面，听到看似可交互的内容却无法激活。键盘用户可能发现焦点被困在遮罩之后，无法关闭。移动端用户受视觉影响最大，因为全屏弹窗在关闭前完全阻断了内容访问。此外，Google 搜索会对移动端使用侵入式插页的页面进行排名惩罚。
快速参考
- 移动端页面加载时立即覆盖主要内容的全屏弹窗会被 Google 搜索惩罚（2017 年 1 月侵入式插页更新）。
- 可接受的插页：年龄验证、法律要求的通知（法律强制要求的 Cookie 同意）、私密内容的登录墙。
- 不可接受的：移动端覆盖主要内容区域且不易关闭的弹窗。
- 可访问性要求：模态对话框必须捕获焦点、可通过键盘关闭（Escape 键），并在关闭后将焦点返回触发元素。
- WCAG 2.1 SC 2.1.2（无键盘陷阱）：用户必须能够使用键盘将焦点移出任何组件。
检查方法
识别使用 position: fixed 或 position: absolute 且具有高 z-index、覆盖视口较大区域的元素。对每个元素检查：（1）是否在页面加载时或几秒内出现？（2）在移动端屏幕（宽度小于 600px）上是否覆盖了主要内容的较大区域？（3）是否容易关闭——是否有带可访问名称的可见关闭按钮？（4）是否可通过按 Escape 键关闭？（5）打开时焦点是否移入对话框，关闭时是否返回触发元素？任何一项不通过的对话框都应标记。
修复方法
（1）将页面加载时的全屏弹窗替换为：顶部或底部的粘性横幅（最大高度为视口的 10-15%）、页面内的内联内容块，或不覆盖主要内容的滑入面板。（2）对于法律要求的通知，使用小型粘性横幅而非全屏遮罩。（3）对于必须使用的所有模态对话框：实现 ARIA 对话框模式——添加 role='dialog'、aria-modal='true'、aria-labelledby 指向对话框标题；使用焦点陷阱将焦点限制在对话框内；打开时将焦点移至对话框内第一个可聚焦元素；按 Escape 键关闭；关闭时将焦点返回触发元素。（4）将非关键弹窗延迟到用户交互时触发，而非在页面加载时触发。
解释
侵入式插页造成两类问题：（1）SEO：Google 的侵入式插页更新（2017）会惩罚在移动端从搜索结果导航后立即显示覆盖主要内容弹窗的页面。豁免的是法律要求的通知、年龄验证和受限内容的登录墙。（2）可访问性：不管理焦点的模态对话框属于 WCAG 失败。如果屏幕阅读器用户无法得知对话框已出现、无法导航到它，或被困其中无法退出，页面就违反了 WCAG 2.1 SC 2.1.2（无键盘陷阱）和 SC 4.1.3（状态消息）。WAI-ARIA 对话框模式将焦点管理作为基线要求。
代码审查
审查与避免侵入式插页相关的样式表、组件样式和响应式状态。标记在渲染 UI 中违反该规则的具体选择器、声明或断点。
完整实现细节、代码示例和框架特定指导见 references/rule.md。
规则页面：https://frontendchecklist.io/en/rules/css/interstitials