隐藏HTML但使其可见

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

我还查看了提议的“dialog”规范，找到了一个完美描述我需要的定义：

当节点处于惰性状态时，用户代理必须像节点不存在一样进行操作，以确定用户交互事件的目标

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

• 在页面元素上设置

  hidden

  和

  style=“display:block”

• 在页面元素上设置

  tabindex=“-1”

  和

  aria hidden=“true”

正如你可能猜到的，这些都不起作用

---

有没有什么明智的方法可以让子树在当前技术下变得“惰性”呢？

Chrome、Safari和Opera中都可以使用

对话框。这可以在调用
对话框
元素上的
showmodel（）
函数时满足对其他元素惰性的需求

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

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


你好

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

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

最好的做法是在不同浏览器上使用
showModal（）
函数，希望它很快在Firefox和IE浏览器中实现。
我们通常创建一个与页面大小相同但z索引大于主页的容器（例如，
）。这样可以有效地隐藏主页面，不让用户输入。然后，通过使z索引大于容器，我们在容器的“顶部”设置了模式对话框。
到目前为止，惰性
不受nor支持，并且在2014年符合规范

确定模态应如何工作的资源是

关于更多细节，我建议。Marco为Firefox工作。评论中还有一些非常有价值的提示和参考资料

所有这些都需要在这里粘贴。
您可以在div中创建一个模式，使用
position:absolute；宽度：100%；身高：100%；背景色：rgba（255、255、255、0.5）；z-index:1
模拟一个前台，在那里你的模态将驻留，而一个褪色的背景，在那里你的页面仍然可见。很好的回答。我几乎完全按照马可的解释建立了我的对话，它们工作得非常好。我只想补充一点（我在他的帖子中没有看到这一重要部分），要阻止屏幕阅读器阅读对话框下方的页面，您需要将页面包装成一个，并设置
aria hidden=“true”
。您还必须在对话框外部呈现对话框，因此屏幕阅读器无法读取页面，并且由于您的焦点被困在对话框中（阅读Marco的教程），键盘和屏幕阅读器在您关闭之前都不会在对话框外部读取。据我所知，文章建议将键盘焦点困在模式中。对我来说，这似乎是一个不完整的破解。据我所知，还有其他导航方式，例如文档大纲。是的，有，但对于不使用屏幕阅读器的用户来说，将焦点捕获在模式中就可以了。对于使用屏幕阅读器的用户来说，这加强了为您的模式设置清晰标签的需要。