北京
弹窗（Modal）是网页里最常见的交互组件之一，但也是可访问性（Accessibility）问题的高发区。一个看似简单的“删除账户”确认弹窗，背后可能藏着让键盘用户误删数据的严重缺陷。
一位开发者在测试时发现，当弹窗打开时，背景页面虽然被设置了 aria-hidden="true"（对辅助技术隐藏），但键盘用户依然可以通过 Tab 键聚焦到背景页面上的“删除账户”按钮，并直接触发它。这暴露了一个长期存在的痛点：传统方案需要同时维护多个机制才能勉强堵住漏洞，而它们之间还常常互相脱节。
旧方案为何漏洞百出
过去，开发者要确保弹窗打开时背景页面不可交互，通常需要手动完成四步操作：
- 在容器上设置 aria-hidden="true"，将其从无障碍树中移除，但这只对屏幕阅读器有效，对键盘用户毫无约束力。
- 遍历所有可聚焦的后代元素，设置 tabindex="-1"，将它们从 Tab 键顺序中剔除，但这无法阻止 JavaScript 直接调用
.focus()方法，也无法阻止鼠标点击。 - 在 CSS 中添加 pointer-events: none，让点击事件失效，但这同样不影响键盘操作。
- 在弹窗关闭时，还要记得手动撤销以上所有设置。
这四个机制各自为政，没有一个能独立完成全部工作，而且必须靠开发者手动保持同步。任何一个环节遗漏，都可能留下安全隐患。
一个属性解决所有问题
现在，一个名为 inert 的布尔型全局 HTML 属性提供了更简洁的解决方案。只需在背景容器上添加 inert，就能一次性完成旧方案的全部四步工作：
- 阻止所有聚焦方式：无论是 Tab 键顺序还是直接调用
.focus()方法，对 inert 元素及其后代都无效，焦点会保持在原地。 - 屏蔽点击事件：任何点击都不会触达 inert 元素内部。
- 移出无障碍树：效果等同于
aria-hidden="true"，无需额外设置。 - 禁止文本选择与查找：用户无法选中其中的文本，浏览器“在页面中查找”（Ctrl+F）功能也会自动跳过这些内容。
从四步到一步
这一改进将开发者从繁琐且易错的手动同步工作中解放出来。过去需要同时维护四个机制，现在只需一个属性，代码更简洁，逻辑更清晰，也从根本上消除了因遗漏某个步骤而导致的缺陷。
对于依赖键盘导航的用户（如视力障碍者或重度键盘使用者）来说，这意味着更安全、更可靠的网页交互体验。弹窗背后的隐患，终于有了一个真正完整的解决方案。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
