如何隐藏元素及其子元素以屏蔽屏幕阅读器并阻止键盘访问？

• 优先使用inert属性：给广告最外层容器添加inert属性，这是目前最彻底的方案——它会让容器内所有元素完全脱离无障碍树，同时彻底阻断键盘焦点（包括Tab导航和快捷键）。代码示例：

  <div class="ad-banner" inert>
    <!-- 广告内容 -->
  </div>
  

  注：旧浏览器可能不支持inert，可以搭配兼容polyfill解决。

• 强化原有方案（无法使用inert时）：

  • 给广告容器添加aria-hidden="true"，让屏幕阅读器直接忽略整个容器。
  • 遍历容器内所有可交互元素（链接、按钮、输入框等），统一设置tabindex="-1"和aria-hidden="true"，杜绝个别元素被键盘聚焦。
  • 额外给容器添加focusable="false"属性，进一步强化对焦点的阻断（部分屏幕阅读器支持）。
    代码示例：

  <div class="ad-banner" aria-hidden="true" focusable="false">
    <a href="#" tabindex="-1" aria-hidden="true">广告链接</a>
    <button tabindex="-1" aria-hidden="true">关闭广告</button>
  </div>
  

• 动态加载广告的情况：要确保广告渲染完成后立刻执行上述属性设置，避免动态生成的元素漏处理。

内容的提问来源于stack exchange，提问作者Lucas