可访问性：在小型设备上以模式显示内容，在大型设备上内联显示内容

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设置为true，并向面板本身添加一个active类，它通过CSS显示全屏o-panel。在大型设备上，我隐藏该按钮，并始终通过CSS（在针对大型设备的媒体查询中）内联显示o-panel中的内容，在HTML中找到这些内容。

这对可访问性有意义吗？我的面板上没有role=“dialog”，因为在大型设备上，它只是内容，而不是对话框。我的按钮藏在这些大设备上是不是有问题？

我真的被困在我该做的事上了。如果我将role=“dialog”添加到我的o-panel中，我是否应该为大型设备删除该属性，因为它实际上不是模态？

或者，如果触发器被命中，我应该在一个具有role=“dialog”的div中移动复制/移动我的O-panel中的内容吗？我只是不想要两份相同内容的副本。

Answer 1

相关问题

Answer 2

在大型设备上，您需要做几件事。

首先确保按钮是显示：无,而不是可见性：隐藏或其他任何东西,否则它仍将显示在可访问性树中。

模式应该出现在

之外。

这样，当模式处于活动状态时，您就可以将aria-hidden=“true”添加到

元素中，以阻止用户在屏幕阅读器上在模式之外导航。（屏幕阅读器用户使用标题、链接等来导航页面，这样您就不能截取选项卡键。）

现在我来自移动第一的哲学，所以我会说你的标记应该是移动第一。这意味着将模式放在

之外，正如前面讨论的那样。

这显然会在桌面上造成一个巨大的问题。您现在将内容放在了不该放在的地方。

正因为如此，你只有两个选择。

使用JavaScript在预定义的占位符

中重新定位模态内容。

因此，您保留您的mobile first设计，然后使用JavaScript找到您的modal的innerHTML并将其移动到您的Holder内的主体中。然后删除模态本身以确保。

当你在它的时候，我也会删除按钮，以防有人将屏幕调整为移动视图，我们不想要一个按钮没有任何地方。

或者，不要删除第二个内容，这样人们就可以调整浏览器的大小，只需要增加一些DOM节点（因此，只要您的模态内容不超过100个DOM元素，我就会说这样做。）

如果您决定保留模态，请确保也是display:none，原因与按钮相同，我们不希望人们意外地访问它。

重复内容。

我知道，我知道，重复的内容只是，呃。

但有时如果是最好的，你就不得不忍受它。

通过从一开始就将内容复制到一个div中，您确实会得到一些好处。

优点

1. 如果用户调整了屏幕的大小，您可以只使用CSS在视图之间切换。
2. 不需要JavaScript，如果站点不使用JS或JavaScript失败，则非常适合使用。
3. 虽然它增加了页面权重，但总体性能可能更好，但使用第一个选项进行布局移位的可能性相当高（尽管可以避免），从而导致高累积布局移位。由于谷歌如此强调网络要害，我现在就开始考虑它们。此外，如果您的模式只包含几个元素，您可能会发现您编写的JavaScript几乎与HTML一样多。

缺点

1. 由于HTML重复，您将有额外的页面权重。
2. 您可能必须调整脚本等以考虑第二个重复项（尽管这应该是次要的）。

这将仍然是我的偏好，保持简单！这要强得多

客户端提示是解决这一问题的一种方法，将响应式设计转变为移动端与桌面端和响应式设计的混合体。

当client hints有足够的市场份额时，您可以简单地使用头来决定从初始请求发送哪个版本的页面。

如果你愿意让25%的用户在桌面上看到你的信息的移动版本，你可以在今天实现这个功能，这取决于信息的重要性。

还有一些其他的事情要考虑，你没有提到，所以我想我补充一下，以供参考。

我已经提到过，当模式处于活动状态时，将aria-hidden添加到模式之外的所有元素。

为了将来证明您的应用程序在模式之外的项上使用inert。支持不是很好（没有存在！），但每一点帮助，它很有可能得到实现！

如果你想，你可以把它填满，但我不认为它已经移出了草案的规格，所以我们只是使用它的原样。

还要将aria-modal=“true”添加到您的模式中。

如果你想要更多的信息，我在这个答案中更详细地介绍了这些要点。