我正在研究如何在 React 中构建可访问的对话框模式。
我看到很少有消息来源建议将模态框作为 DOM 树的直接子元素放置在 DOM 树的末尾
例如:https://assortment.io/posts/accessible-modal-component-react-portals-part-1
(查找渲染时，模态将附加到 document.body. 的末尾。部分。)
我的问题是..为什么？这会带来什么好处？ 如果我没记错的话，其中一些来源意味着通过这种方式，屏幕阅读器将忽略正文的其他子元素，从而使用户免于关注不需要的元素。
如果这是原因，这是建议的也是唯一的方法吗？ 我的想法是简单地将用户“困”在模式内，不允许他们关注模式之外的任何其他内容。 我的想法是，如果用户位于模态的第一个或最后一个元素上，并且尝试后退或前进，他们仍然会关注模态的第一个或最后一个元素。使用JS。
那么，回到主要问题，为什么我应该将模式放置为 DOM 的直接子级？谢谢!
最佳答案
不一定是直接后代，您只需要将模式与其他内容分开 为了在打开模式时隐藏所有内容
以下是您的情况的详细描述: http://web-accessibility.carnegiemuseums.org/code/dialogs/
<body>
<!-- Add aria-hidden="true" if there is at least one pop-up window (Modal) -->
<div class="page" aria-hidden="true">
...
</div>
<div class="dynamic-place">
<div hidden role="dialog" aria-describedby="" aria-labelledby=""></div>
<div hidden role="dialog" aria-describedby="" aria-labelledby=""></div>
<!-- Only one active modal per page: -->
<div role="dialog" aria-describedby="" aria-labelledby="">
Active modal
</div>
</div>
</body>
但您也可以执行以下操作: 给出除模态窗口 aria-hidden=true 之外的所有元素，没有人强制您将所有内容包装在一个 block 中(如第一个示例)，这只是简化此任务的建议
<body>
<div aria-hidden="true">
...
</div>
<main aria-hidden="true">
...
</main>
<footer aria-hidden="true">
...
</footer>
<div class="dynamic-place">
<div hidden role="dialog" aria-describedby="" aria-labelledby=""></div>
<div hidden role="dialog" aria-describedby="" aria-labelledby=""></div>
<!-- Only one active modal (opened) per page: -->
<div role="dialog" aria-describedby="" aria-labelledby="">
Active modal
</div>
</div>
</body>
关于javascript - 为什么对话框模式需要放置为主体的最后一个直接子级？[辅助功能，a11y]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63448962/