在具有可滚动内容的模式对话框中处理 tabindex 的推荐方法是什么（就 a11y 而言）？

Question

我正在使用库micromodal.js来处理我的（可访问的）模态对话框的功能。 阅读了有关 a11y 最佳实践的建议后，我了解到模态应该获得tabindex="-1"以便在模态对话框中“捕获”选项卡用户（或屏幕阅读器）。

我使用它的模态之一具有可滚动的内容部分。 为了使内容可聚焦并因此可通过箭头键滚动，我在该部分添加了tabindex="0" 。 在移动设备上，应该滚动的不是内容，而是整个模态。

此解决方案产生的问题是：在较小的屏幕上打开模态时，首先聚焦内容（因为 0 的 tabindex 大于 -1 的 tabindex，我猜？）并且模态的整个标题不可见。

所需的行为是模式标题在打开时可见。 我怎样才能通过仍然提供可访问的用户体验来实现这一目标？

代码示例： https : //codepen.io/AstiV/pen/vYKopNZ

当前行为：

Answer 1

首先，您需要仔细查看tabindex=0 和tabindex=-1 之间的区别。 设置 tabindex=0 意味着该元素是可聚焦的，无论是使用 Tab 键手动还是通过脚本自动。 将 element 设置为 tabindex=-1 意味着只有脚本可以将焦点设置在它上面，而手动设置元素是不可能的。

知道了这一点，你应该明白你做错了什么。 最明显的解决方案是在显示模态时使用 tabindex=-1 聚焦元素。 如果出于某种原因，在打开模态时让 tabindex=0 的元素聚焦更合乎逻辑，那么您可以先将 tabindex=-1 的元素聚焦，等待片刻（50-100 毫秒），然后聚焦tabindex=0 的元素。

关于滚动，通常，聚焦任何元素（带有任何 tabindex 或无）应该自动将其带入视图，它尚不可见，但如果已经可见，则滚动不应更改。 因此，即使先聚焦 tabindex=-1 的元素，然后聚焦 tabindex=0 的元素，tabindex=-1 的元素也应该保持可见。