Javascript 为什么对话框模态需要作为主体的最后一个直接子对象放置？[可访问性，a11y]_Javascript_Reactjs_Modal Dialog_Accessibility

Javascript 为什么对话框模态需要作为主体的最后一个直接子对象放置？[可访问性，a11y]

javascript reactjs

Javascript 为什么对话框模态需要作为主体的最后一个直接子对象放置？[可访问性，a11y],javascript,reactjs,modal-dialog,accessibility,Javascript,Reactjs,Modal Dialog,Accessibility,我正在研究如何在React中构建一个可访问的对话框模式我看到很少有人建议将模态放在DOM树的末尾，作为例如：（在呈现时查找，模态将附加到document.body.部分的末尾。）我的问题是。。为什么？这会带来什么好处？如果我没有错的话，其中一些来源意味着屏幕阅读器将以这种方式忽略身体的其他子元素，因此避免用户关注不想要的元素如果这是原因，这是建议的唯一方法吗？我的想法是简单地将用户“困住”在模式内，不允许他们关注模式外的任何东西。我的想法是，如果用户处于模态的第一个或最后一个元素

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

我看到很少有人建议将模态放在DOM树的末尾，作为例如：（在呈现时查找

，模态将附加到document.body.

部分的末尾。）

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

如果这是原因，这是建议的唯一方法吗？我的想法是简单地将用户“困住”在模式内，不允许他们关注模式外的任何东西。我的想法是，如果用户处于模态的第一个或最后一个元素上，并且试图返回或前进，那么他们仍然会关注模态的第一个或最后一个元素。那是使用JS

那么，回到主要问题，为什么我要将模态作为DOM的直接子对象？谢谢大家!

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

以下是对您情况的详细描述：


...
主动模态

但您也可以执行以下操作：为了给出除模态窗口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>


...
...
...
主动模态

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