我需要在小设备上的模态/全屏面板中显示某些内容，由按钮触发。在大型设备上，相同的内容总是显示出来，然后触发器被隐藏起来。
您如何处理这一问题以实现可访问性？
当前，我有此设置
<button type="button" aria-expanded="false" aria-controls="filter-panel">Filter</button>
<div class="o-panel" id="filter-panel">Form</div>
最初，o-panel通过CSS隐藏在小型设备上（在以小型设备为目标的媒体查询中）。当触发器命中时，我将aria-expanded设置为true，并向面板本身添加一个active类，它通过CSS显示全屏o-panel。在大型设备上，我隐藏该按钮，并始终通过CSS（在针对大型设备的媒体查询中）内联显示o-panel中的内容，在HTML中找到这些内容。
这对可访问性有意义吗？我的面板上没有role=“dialog”，因为在大型设备上，它只是内容，而不是对话框。我的按钮藏在这些大设备上是不是有问题？
我真的被困在我该做的事上了。如果我将role=“dialog”添加到我的o-panel中，我是否应该为大型设备删除该属性，因为它实际上不是模态？
或者，如果触发器被命中，我应该在一个具有role=“dialog”的div中移动复制/移动我的O-panel中的内容吗？我只是不想要两份相同内容的副本。
在大型设备上，您需要做几件事。
首先确保按钮是显示：无,而不是可见性：隐藏或其他任何东西,否则它仍将显示在可访问性树中。
模式应该出现在之外。
这样，当模式处于活动状态时，您就可以将aria-hidden=“true”添加到元素中，以阻止用户在屏幕阅读器上在模式之外导航。（屏幕阅读器用户使用标题、链接等来导航页面，这样您就不能截取选项卡键。）
现在我来自移动第一的哲学，所以我会说你的标记应该是移动第一。这意味着将模式放在之外，正如前面讨论的那样。
这显然会在桌面上造成一个巨大的问题。您现在将内容放在了不该放在的地方。
正因为如此，你只有两个选择。
使用JavaScript在预定义的占位符 因此，您保留您的mobile first设计，然后使用JavaScript找到您的modal的 当你在它的时候，我也会删除按钮，以防有人将屏幕调整为移动视图，我们不想要一个按钮没有任何地方。 或者，不要删除第二个内容，这样人们就可以调整浏览器的大小，只需要增加一些DOM节点（因此，只要您的模态内容不超过100个DOM元素，我就会说这样做。） 如果您决定保留模态，请确保也是 重复内容。 我知道，我知道，重复的内容只是，呃。 但有时如果是最好的，你就不得不忍受它。 通过从一开始就将内容复制到一个div中，您确实会得到一些好处。 优点 缺点 这将仍然是我的偏好，保持简单！这要强得多 客户端提示是解决这一问题的一种方法，将响应式设计转变为移动端与桌面端和响应式设计的混合体。 当client hints有足够的市场份额时，您可以简单地使用头来决定从初始请求发送哪个版本的页面。 如果你愿意让25%的用户在桌面上看到你的信息的移动版本，你可以在今天实现这个功能，这取决于信息的重要性。 还有一些其他的事情要考虑，你没有提到，所以我想我补充一下，以供参考。 我已经提到过，当模式处于活动状态时，将 为了将来证明您的应用程序在模式之外的项上使用 如果你想，你可以把它填满，但我不认为它已经移出了草案的规格，所以我们只是使用它的原样。 还要将 如果你想要更多的信息，我在这个答案中更详细地介绍了这些要点。中重新定位模态内容。
innerHTML并将其移动到您的Holder内的主体中。然后删除模态本身以确保。display:none，原因与按钮相同，我们不希望人们意外地访问它。
aria-hidden添加到模式之外的所有元素。inert。支持不是很好（没有存在！），但每一点帮助，它很有可能得到实现！aria-modal=“true”添加到您的模式中。
