在页面顶部弹出一个非模态对话框,有时由页面触发,有时在某些用户操作后触发。 下面的页面仍然可以访问,但现在通常部分被对话框覆盖。

模态对话框可以有不同的目的:它可以要求用户接受使用 cookie 或完成调查,或者它可以提供额外的信息。

非模态对话的应用

视频:一个典型的非模态对话

A keyboard user looks at a page of the website of the city of Den Haag that explains how to order a passport .

  • The page loads He starts tabbing through the page.
  • There is good focus indication.
  • A non-modal dialog pops up at the bottom of the page
  • The user tabs on, focus is immediately on the elements of the dialog.
  • The user dismisses the dialog.

Focus management problem: After dismissal, the focus jumps to the start of the page - not to the focus position before the dialog opened.

什么是“非模态对话框”?

“非模态对话框”存在不同的定义,通常不容易区分存在的差异。

对于某些定义,对话框的主要特征是能够获取焦点,并让焦点在对话框内循环。这要求开发人员在对话框打开时将焦点切换过去。

另一种观点认为,非模态对话框有别于模态对话框的地方在于,它虽然遮挡了页面,但不会导致背景页面无法访问。同时点击对话框以外的地方,或者按下 Tab 按键都会关闭这些非模态对话框。

另一个需要考虑的观点是弹出内容是否可以看作是一个表单,或者是以信息展示为主的,比如说 cookie 通知。在这种情况下,将其设定为 region 角色而不是 dialog 角色可能更适合。但这类差异的边界也不太明确。

页面在完成加载后触发(例如 cookie 通知),或延迟一段时间后触发(例如弹出式调查、订阅)的弹窗内容非常普遍,这可能对键盘用户造成很大的困扰。一些对话获取了焦点,而另一些则没有。大多数 cookie 通知也不会,在许多案例中,cookie 通知通常避免意外地更改用户操作语境。

吐司提示

吐司提示会在展示后的数秒后消失。这些内容不能被归类为 非模态对话框。

可切换提示

切换提示或状态消息出现在按钮激活时,也会覆盖页面内容,但它们没有需要关注的交互元素。

带交互元素的用户激活窗口

另一种类型的内容是在激活内联链接时出现的弹出窗口,例如可能包含关闭按钮和“阅读更多”链接的词汇表弹出窗口,但当在弹出窗口外按 Tab 键或单击弹出窗口之外区域时会自动关闭。这些元素比切换提示更复杂。

披露小部件

有时触发器被激活时也会打开披露小部件,触发器通常是一个切换按钮,再次激活时将隐藏披露的内容。这些小部件揭示(并下推)内容而不是掩盖内容。焦点通常停留在触发器上,如果被披露的内容紧随触发器之后,焦点停留在触发器上是可以接受的。

舞台小部件

其他用户激活的小部件(有时称为“阶段”)可以覆盖大部分页面,但通常不会捕获焦点并且在超出其边界时不会自动关闭。它们介于披露小部件和非模态对话框之间。

非模态对话框的典型可用性问题

使用键盘关闭非模态对话框

对于键盘用户来说,定位和关闭非模态对话框可能会很烦人。尤其是当焦点顺序与视觉顺序不匹配时。

非模态对话框的可用性提示

非模态对话框的可用性提示没有硬性规定,通常取决于上下文和内容。

站点激活和用户激活的非模态对话框的可访问性提示不同。

一般提示

  • 有意义地命名非模态对话框。通过 aria-labelledby 引用他们可见的标题,或通过 aria-label 提供一个不可见的名称。
  • 标记所有对话框控件,包括关闭按钮。每个对话框都应该有一个清晰标记的控件用于关闭它。用于关闭模态对话的图标按钮必须具有可访问的名称,以便屏幕阅读器用户可以读出该名称。
  • 使用正确的 ARIA 角色。在对话框中使用 role="dialog" 和 aria-modal="false"

站点激活的非模态对话框

这包括在页面加载时(例如 cookie 通知)或用户在页面上停留很短时间时自动打开的非模态对话框——通常是邀请参与调查或与员工聊天,或促销优惠。

  • 考虑焦点处理。根据内容和使用上下文,考虑是否在打开时将焦点设置在非模态对话框上。在大多数情况下,不妨碍其他内容的非模态对话框不应该带走用户当前的焦点。
  • 使涵盖内容的非模态对话框易于关闭。如果非模态对话框覆盖了页面内容,那么能够通过键盘聚实现焦和关闭也很重要。然后最好将焦点设置到对话框上,以便键盘用户可以轻松地将其关闭。
  • 确保正确的内容顺序。如果非模态对话框没有获得焦点并且没有覆盖其他页面内容(例如页面顶部的cookie通知下推内容,或屏幕底部的通知),请将其放在内容中按视觉显示的顺序排序,以便用户在想要关闭它时可以找到它。
  • 考虑宣布站点生成的非模态对话框。一段时间后自动弹出的对话框可能会用 aria-live="polite" 宣布,这样屏幕阅读器用户就可以在不移开当前焦点的情况下知道它们出现了。

用户激活的非模态对话框

  • 在内容顺序方面,将非模态对话框直接放在触发它们的元素之后。这样,非视觉用户可以使用箭头进入对话框内容或使用选项卡访问其交互式控件。
  • 或者,将焦点设置到对话框。如果对话框内容不能紧跟在触发器之后,请将焦点设置到对话框内的第一个交互元素。
  • 继续时自动关闭。如果在对话框边界外注册了鼠标单击或键盘焦点移动到其内容之外,则关闭非模态对话框。

Note: When a non-modal dialog receives focus when opened, you may keep the focus cycling until the dialog is explicitly dismissed via a close button or by hitting ESC. So for keyboard and non-visual users, this type of non-modal dialog behaves more like a modal dialog. See the example from the City of Den Haag above, or the (somewhat dated) ARIA Non-Modal Dialog Example (Athena technologies, no date).

延展阅读