html - 辅助功能:在小型设备上以模态显示内容，在大型设备上显示内联内容

Question

我需要在小型设备上的模式/全屏面板中显示某些内容，由按钮触发。在大型设备上，始终显示相同的内容，然后隐藏触发器。
您如何处理可访问性？
目前，我有这个设置

<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当触发器被触发时为真，并添加一个 active类到面板本身，显示全屏 o-panel通过 CSS。在大型设备上，我隐藏按钮并始终显示来自 o-panel 的内容通过 CSS(在针对大型设备的媒体查询中)，内联，在 HTML 中找到。
这对可访问性有意义吗？我的小组没有说 role="dialog" ，因为在大型设备上它只是内容，而不是对话框。我的按钮隐藏在这些大型设备上是否有问题？
我真的被困在这里我应该做什么。如果我添加 role="dialog"对于我的 o 面板，我是否应该为大型设备删除此属性，它实际上不是模态？
或者我应该从 o-panel 移动副本/移动内容在与 role="dialog" 的 div 中，万一触发了？我只是不想要相同内容的两个副本。

Answer 1

在大型设备上，您需要做几件事。
正确隐藏按钮
首先确保按钮是display:none ，不是 visibility:hidden或其他任何东西，否则它仍会显示在可访问性树中。
主要 ( <main> ) 问题
模态应该出现在您的 <main> 之外.
这样你就可以添加 aria-hidden="true"到 <main>当模态处于事件状态时元素，以阻止人们在屏幕阅读器上导航到模态之外。 (屏幕阅读器用户使用标题、链接等来导航页面，因此您不能只是拦截 Tab 键。)
现在我来自移动优先的理念，所以我会说你的标记应该是移动优先的。这意味着将模态放在您的 <main> 之外如前所述。
这显然会在桌面上造成一个巨大的问题。您现在已将内容放在不应该存在的地方。
因此，您在这里只有两种选择。
选项1
使用 JavaScript 在预定义的占位符中重新定位模态内容 <div> .
因此，您保持移动优先设计，然后使用 JavaScript 查找 innerHTML您的模态并将其移动到您的支架内的主体中。然后删除模态本身只是为了确定。
当您使用它时，我也会删除该按钮，以防万一有人将屏幕大小调整为移动 View ，我们不希望按钮无处可去。
或者不要删除第二个内容，然后人们可以调整浏览器的大小，只是意味着一些额外的 DOM 节点(只要你的模式内容不超过 100 个 DOM 元素，我会说这样做。)
如果您决定保留模态，请确保它是 还有 display: none出于与按钮相同的原因，我们不希望人们意外访问它。
选项 2
重复的内容。
我知道，我知道 ，重复的内容只是，呃。
但有时你只需要忍受它，如果它是最好的。
通过从一开始就将内容复制到 div 中，您确实可以获得一些优势。
优势

如果用户调整屏幕大小，您可以使用 CSS 在 View 之间切换。

不需要 JavaScript，非常适合您的网站在没有 JS 或 的情况下运行当你的 JavaScript 失败了。

尽管它增加了页面权重，但总体性能可能会更好，但布局的可能性会随着第一个选项发生变化而导致 Cumulative Layout Shift 较高。相当高(虽然可以避免)。谷歌如此重视 Web Vitals我现在就开始考虑它们。此外，如果您的模态只包含几个元素，您可能会发现您编写的 JavaScript 几乎与 HTML 一样多。

缺点

由于重复的 HTML，您会有额外的页面权重。

您可能需要调整脚本等以解决第二个重复项(尽管这应该是次要的)。

这仍然是我的偏好，保持简单!这要强大得多
选项 3( future )
Client Hints是解决这个问题的一种方法，将响应式设计转变为移动与桌面和响应式的混合。
当客户端提示有足够的​​市场份额时，您可以简单地使用标题来决定从初始请求发送哪个版本的页面。
如果您愿意让 25% 的用户在桌面上查看您的信息的移动版本，那么您今天就可以实现这一点，这取决于信息的重要性。
其他注意事项
还有一些你没有提到的其他事情需要考虑，所以我想我会添加以供引用。
我已经提到添加 aria-hidden当它处于事件状态时，到模态之外的所有元素。
为了将来证明您的应用程序使用 inert 在模态之外的元素上。 Support isn't great (none existent!) ，但每一点都有帮助，而且很可能会得到实现!
如果你愿意，你可以对它进行 polyfill，但我认为它尚未超出草案规范，所以我们只是按原样使用它。
同时添加 aria-modal="true"到你的模态。
我稍微介绍了很多这些要点 more detail in this answer if you want a bit more info.