Question

我想在包含一些输入字段的某些数据旁边创建一个弹出窗口。假设我们具有以下文档结构

<input name="before-the-data" type="text />
<div id="the-data"><!-- presents some data --></div>
<input name="after-the-data" type="text />

当您从before-the-data向前跳时，弹出框应打开，焦点应移至此弹出框的第一个输入。此弹出窗口被附加到Modal之类的material-ui之类的主体上，以便位于内容的其余部分之上。同样，当您从after-the-data向后切换时，弹出窗口应打开。

出于导航目的，弹出窗口的行为应类似于在#the-data内，但出于演示目的，实际位置应位于<body>的末尾。

为实现此效果，我在tabindex="0"上设置了#the-data并触发打开模式并将焦点转移到其中。到目前为止，一切正常。

现在是一个问题：如何最好地产生以下效果？您应该能够浏览出模态。我的想法是这样的：当焦点从焦点上移开或用户在模态之外单击时，我们将其关闭并将焦点恢复到打开之前具有焦点的元素。这可以通过简单的onblur处理程序和底板上的onclick完成。为了支持制表，结果模态如下：

<div id="backplane" onclick="closeAndRestoreFocus()"
                    onfocusout="checkCloseAndRestoreFocus()">
    <div id="beforecanary" onfocus="shiftFocusBefore()" tabindex="0"/>
    <!-- popover content -->
    <div id="aftercanary" onfocus="shiftFocusAfter()" tabindex="0"/>
</div>

您可以看到我添加了两个div，您可以将它们制表到beforecanary和aftercanary。当他们集中注意力时，他们分别将焦点转移到before-the-data和after-the-data上，以模拟弹出窗口实际上在#the-data内部。

在这一点上，您希望您已经了解我正在尝试创建的内容。因此，问题是：这种方法在可访问性方面总体上有多好？如何确保我遵循WAI-ARIA的最佳做法？

Answer 1

我们将其关闭，并将焦点恢复到打开之前具有焦点的元素

可以认为是制表符陷阱2.1.2 No Keyboard Trap。在弹出#the-data之前具有焦点的元素吗？因此，如果我 tab 从before-the-data到#the-data，则弹出窗口将打开。如果我按 esc 关闭弹出窗口（您没有提到 esc 将关闭弹出窗口，但它should），则焦点将回到{{ 1}}，它将自动再次打开弹出窗口，不是吗？（因为onfocus（）再次运行。）

如果我只是在整个过程中 tab ，我认为它会起作用。只是弹出窗口的消失会导致问题。直接浏览所有内容会将焦点从#the-data移至before-the-data到弹出窗口中的元素移至#the-data然后移至页面其余部分，对吧？

在从after-the-data到after-the-data上向后切换时，焦点是否移到了弹出窗口的 last 元素中？由于我要向后跳动，因此它必须位于最后一项，以便我可以继续向后跳动整个弹出窗口，然后跳至#the-data。

出于导航目的，弹出窗口的行为应类似于它在＃the-data内，但出于演示目的，实际位置应位于的末尾。

如果弹出窗口最后位于DOM中，则不允许使用自然制表符顺序。您当然可以将其放在此处，但随后必须管理制表符顺序。如果弹出窗口确实是before-the-data的一部分，它将更加简单。然后浏览器自然地处理制表符顺序。

您还必须注意自动打开弹出窗口，但可能会违反3.2.1 On Focus。请参阅“ Example of a Failure: A help dialog”。有点描述了您在做什么，但有所不同。在失败示例中，焦点移至输入字段，弹出窗口自动打开，焦点从输入移至弹出窗口。您的情况有所不同，因为先将焦点移到输入（或#the-data）上，然后显示弹出窗口，这将不违反3.2.1。我只是想指出这一点，以防您更改交互模型。

因此，总而言之，您当前的行为有点像skip link。跳过链接通常被实现为“隐藏”链接，这些链接仅在您 tab 指向它们时才可见，并允许您跳转到页面上的某个位置。它们在焦点上变得可见的事实是您的弹出窗口的工作原理（因为它在获得焦点时也变得可见）。区别在于，如果按 esc ，则跳过链接不会消失。如果您在其外部单击，则执行关闭。我认为这就是您要模仿的行为。如果您之前忽略了我的评论，即 esc 应该关闭弹出窗口，那么您会没事的。我只有这个评论，因为听起来您的弹出窗口就像一个模态对话框。

可以在

1 个答案: