隐藏 HTML 但保持可见答案

【问题标题】：Hide HTML but keep it visible隐藏 HTML 但保持可见
【发布时间】：2017-01-24 12:00:01
【问题描述】：

我需要在 HTML/JavaScript 中实现某种模式。当模式打开时，页面仍应在后台可见，但不应通过键盘访问，也不应包含在屏幕阅读器输出中。换句话说，我希望它表现得好像它不存在，但仍然可见。

我还查看了提议的“对话”规范，发现inert 的定义完美地描述了我的需求：

当节点处于惰性状态时，用户代理必须像节点不存在一样行事，以针对用户交互事件进行定位

我尝试了什么（我无法使用屏幕阅读器进行测试，所以我只测试了键盘访问）：

正如您可能猜到的那样，这些都不起作用。

有没有一些明智的方法可以用当前的技术使子树“惰性”？

【问题讨论】：

您可以使用 position: absolute; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); z-index: 1 在 div 中创建一个模态框，以模拟模态框所在的前景和褪色的背景，您的页面仍然可见。

【解决方案1】：

迄今为止，Firefox 和 Chromium 都不支持 inert，并且是 2014 年规范的 dropped from the WHATWG version。

用于识别模式如何工作的资源是provided in the ARIA Authoring Practices 1.1。

更多细节我建议Marco Zehe's advice on accessible modals。 Marco 为 Firefox 工作。 cmets中也有一些非常有价值的tips和参考。

所有这些都需要粘贴在这里。

【讨论】：

很好，很好的答案。我几乎完全按照 Marco 的解释构建了我的对话框，并且它们运行良好。我只想添加（我在他的帖子中没有看到这个重要部分），为了阻止屏幕阅读器阅读对话框下方的页面，您需要将页面包装在
中并设置aria-hidden="true"。您还必须在此
之外呈现对话框，因此屏幕阅读器无法阅读页面，并且由于您的焦点被困在对话框中（阅读 Marco 的教程），键盘和屏幕阅读器都不会在对话框之外阅读，直到您关闭。
据我了解，文章建议将键盘焦点捕获在模态中。这对我来说似乎是一个不完整的黑客攻击。据我了解，还有其他导航方式，例如文档大纲。
是的，有，但是对于不使用屏幕阅读器的用户来说，在模态框内捕获焦点就可以了。对于使用屏幕阅读器的用户来说，这更加强调了为您的模式添加清晰标签的需求。

【解决方案2】：

dialog 元素适用于 Chrome、Safari 和 Opera。当在 dialog 元素上调用 showModal() 函数时，这可以满足您对其他元素惰性的需求。

<a href="#" onclick="document.getElementById('modal').showModal();">click here</a>

<dialog id="modal">
  hello
</dialog>

最重要的是要了解您的页面指出：

本节不定义或创建任何名为“惰性”的内容属性。本节仅定义了惰性的抽象概念。

最好的办法是使用showModal()函数，因为它适用于不同的浏览器，希望它很快在Firefox和IE浏览器中实现。

【讨论】：

【解决方案3】：

我们通常创建一个与页面大小相同但 z-index 大于主页的容器（例如，<div>）。这有效地隐藏了用户输入的主页。然后，我们的模态对话框位于容器的“顶部”，z-index 比容器大。

【讨论】：