Javascript 对话框中显示z索引的输入的可访问性

我需要显示一个对话框，它集成了一些后台输入（不是全部），因为它增强了它们的功能。所以我想让它们混合到对话框中，并从那里进行编辑。这对于z-index不是很难做到，但是输入必须在对话框标记之外。我想知道这是否适用于屏幕阅读器（我猜是不适用的），如果不适用，你有什么建议我如何在不调整整个表单的每个输入的情况下实现这一点

这是一个我希望以可访问的方式完成的示例：

函数showDialog（）
{
document.getElementById（“dialog”）.style.display='table'；
}
函数hideDialog（）
{
document.getElementById（“dialog”）.style.display='none'；
}

form>div
{
利润率：10px；
}
.层
{
保证金：0；
位置：固定；
z指数：1000；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,5）；
}
.展示
{
位置：相对位置；
z指数：1100；
}

投入1：
投入2：
投入3：

您需要考虑的问题 我在大多数情态动词上看到的最大问题是，它们允许在情态动词之外聚焦

您不能仅仅阻止用户使用tab键，因为大多数屏幕阅读器用户不使用tab键浏览页面（他们使用标题（h1-h6）、超链接、表单输入等快捷方式）

因此，您必须将

aria hidden=“true”

和

tabindex=“-1”

添加到页面上不属于模式的每个元素中，然后在模式被取消时再次将其删除（这可以应用到容器上，因为他们的所有孩子都将无法接收焦点，所以不像听起来那么可怕）

您还需要在所有不属于“模式”的“已禁用”字段上使用此方法（我将这些字段放在引号中，因为它们未禁用，而这实际上不是模式！）

您还需要确保可以使用Esc键解除模式，因为这是预期的行为

您还需要确保启动模式时，第一个

以编程方式聚焦，否则，禁用“提交”按钮时，焦点可能不会转到您想要的地方

你为什么这么做，有更好的办法吗？ 您还没有说明为什么会存在此要求，但如果只是为了突出显示基本字段，则最好在这些字段上使用一个大而粗的轮廓，该轮廓由按钮激活，并且不干扰文档流

有时需求看起来是个好主意，但在您展示的示例中（我知道它被剥去了），我发现“关闭”按钮不在文档中，并且在我完成时添加了一个额外的步骤来关闭对话框（您是否应该不允许从对话框中提交？）

如果这是一个必需的功能，并且您无法说服那些权威认为这不是一个好主意（我知道它是什么样子！），那么您最好创建一个实际的模式，然后在模式关闭/输入更新时使用JavaScript填充主表单中的字段，因为这将减少您需要在页面上禁用的内容的数量

i、 e.您只需将所需字段克隆到模式中，然后对整个文档使用

上的

tabindex=“-1”

和

aria hidden=“true”

，以管理焦点

这将使页面在将来更易于维护，因为您不必在每次向页面添加节时更新脚本

---

如果您的表单是动态的（字段更改），那么您可以使用JavaScript在模式中创建表单（即，循环表单字段，找到“showThrough”项并将其克隆到模式中），或者在后端执行此操作。

我想您至少必须在“对话框”打开时禁用其他字段。显示，因为现在我可以使用[tab]键从第一个字段移动到第二个字段（位于对话框的“后面”）。当对话框被触发时，您还应该将焦点设置到第一个输入字段，否则屏幕阅读器用户可能根本不知道他们当前在哪里。和[tab]-ing将我从字段转到“显示对话框”再次单击按钮，然后单击“提交”按钮，然后单击对话框的“关闭”按钮-可能也不太理想，因此您可能还需要使用显式指定的

tabindex

。感谢您的帮助性回答。实际上，我现在决定采用另一种方法，采用实际模式（使用aria模式）并将输入直接放在其对应项之上。您关于选项卡行为的提示（以及上面的评论者的提示）非常有用。谢谢！