在大型设备上，您需要做几件事。
正确隐藏按钮
首先确保按钮是display:none, notvisibility:hidden或其他任何东西，否则它仍会显示在可访问性树中。
主要 ( <main>) 问题
模态应该出现在你的<main>.
这样您就可以在模式处于活动状态时添加aria-hidden="true"到<main>元素，以阻止人们在屏幕阅读器上导航到模式之外。（屏幕阅读器用户使用标题、链接等来导航页面，因此您不能只截取tab密钥。）
现在我来自移动优先理念，所以我会说你的标记应该是移动优先的。<main>如前所述，这意味着将模态置于您的外部。
这显然会在桌面上造成巨大的问题。您现在将内容放在不应该出现的地方。
因此，您在这里只有两个选择。
选项1
使用 JavaScript 在预定义的占位符中重新定位模态内容<div>。
因此，您保持您的移动优先设计，然后使用 JavaScript 找到innerHTML您的模态并将其移动到您的持有人的正文中。然后删除模态本身只是为了确定。
当您使用它时，我也会删除该按钮，以防有人将屏幕大小调整为移动视图，我们不希望按钮无处可去。
或者不要删除第二个内容，然后人们可以调整浏览器的大小，只是意味着一些额外的 DOM 节点（只要你的模态内容不超过 100 个 DOM 元素，我会说这样做。）
如果您决定保留模式，请确保这也是 display: none出于与按钮相同的原因，我们不希望人们意外访问它。
选项 2
重复的内容。
我知道，我知道，重复的内容只是，呃。
但有时你只需要忍受它，如果它是最好的。
通过从一开始就将内容复制到 div 中，您确实可以获得一些优势。
优点
- 如果用户调整屏幕大小，您可以使用 CSS 在视图之间切换。
- 不需要 JavaScript，非常适合您的网站在没有 JS 的情况下运行或JavaScript 失败时。
- 虽然它增加了页面重量，但它可能会更好地提高整体性能，但第一个选项导致高累积布局移位的布局移位的可能性非常高（尽管可以避免）。由于 Google 非常重视Web Vitals，我现在就开始考虑它们。此外，如果您的模态框仅包含几个元素，您可能会发现您编写的 JavaScript 几乎与 HTML 一样多。
缺点
- 由于重复的 HTML，您将有额外的页面重量。
- 您可能需要调整脚本等以解决第二个重复项目（尽管这应该是次要的）。
这仍然是我的偏好，保持简单！这要健壮得多
选项 3（未来）
客户端提示是您可以解决此问题的一种方法，它将响应式设计转变为移动与桌面和响应式的混合体。
当客户端提示有足够的市场份额时，您可以简单地使用标头来决定从初始请求发送哪个版本的页面。
如果您愿意让 25% 的用户在桌面上查看您的信息的移动版本，那么您今天就可以实现这一点，这取决于信息的重要性。
其他注意事项
还有一些你没有提到的其他事情需要考虑，所以我想我会添加以供参考。
我已经提到aria-hidden在模态框处于活动状态时添加到模态框之外的所有元素。
为了将来证明您的应用程序inert在模态之外的项目上的使用。支持不是很好（不存在！），但每一点都有帮助，而且很可能会得到实施！
如果需要，您可以对其进行 polyfill，但我认为它尚未超出草案规范，因此我们只是按原样使用它。
还添加aria-modal="true"到您的模态中。
如果您想了解更多信息，我在此答案中更详细地介绍了这些要点。