为什么需要将对话框模式作为正文的最后一个直接子级放置？[可访问性，a11y]

Question

我正在研究如何在React中构建可访问的对话框模式。

我看到很少有消息来源建议将模态放在 DOM 树的末尾作为 Eg 的直接子级： https://assortment.io/posts/accessible-modal-component-react-portals-part-1 （查找When rendered, the Modal is appended to the end of document.body. 。）

我的问题是……为什么？ 这带来了什么好处？ 如果我没记错的话，其中一些来源意味着屏幕阅读器会以这种方式忽略身体的其他孩子，因此可以避免用户关注不想要的元素。

如果这是原因，这是建议且唯一的方法吗？ 我的想法是简单地将用户“困”在模态中，不允许他们专注于模态之外的任何其他内容。 我的想法是，如果用户在模态的第一个或最后一个元素上，并试图 go 后退或前进，他们仍将专注于模态的第一个或最后一个元素。 那就是用JS。

那么，回到主要问题，为什么我应该将模态作为 DOM 的直接子级？ 谢谢！

Answer 1

不一定是直系后代，您只需要将模态与其他内容分开，以便在打开模态时隐藏所有内容

这是您的情况的详细描述： 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>

但您也可以执行以下操作：给出除模态 window 以外的所有元素 aria-hidden=true，没有人强迫您将所有内容包装在一个块中（如第一个示例），这只是简化此任务的建议

<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>

为什么需要将对话框模式作为正文的最后一个直接子级放置？[可访问性，a11y]

问题描述

1 个解决方案

解决方案1
1 2020-08-19 19:48:49

为什么需要将对话框模式作为正文的最后一个直接子级放置？[可访问性，a11y]

问题描述

1 个解决方案

解决方案1 1 2020-08-19 19:48:49

解决方案1
1 2020-08-19 19:48:49