Yishan

Search

SearchSearch

模态对话

May 17, 2023, 9 min read

用户操作后，模态对话框会在页面最顶层弹出，等待用户输入。对话框背面的页面内容会处于非获得状态。通常情况下，背景页面会被一层遮罩所覆盖。

模态对话框可以有不同的目的：它可以要求用户选择几个选项之一，在操作发生之前确认操作，更改某些设置或其他数据，或者写评论或消息。

模态对话的应用

视频：一个典型的模态对话框

Video description

On the page twitter.com (after login), the “Tweet” button opens up a modal dialog for typing in messages.

  • The user tabs to the ‘Tweet’ button in the top right corner and activates it with ENTER.
  • The modal dialog opens, the focus set to the text field.
  • The user types “Hallo!” into the text field.
  • The tabs through several controls to the ‘Tweet’ button
  • He activates the ‘Tweet’ button with ENTER.
  • The tweet “Hallo!” is sent and the modal dialog closes.

不同类型的模态对话框

模态对话框是软件中的常见元素。在网络内容中，它最初展现为由浏览器生成的灰色系统类型消息，前端开发人员可以在使用 Javasript 警报或确认时显示这些消息。这些消息无法设置样式并且在内容方面受到严重限制，开发者们开始使用 div s 创建自定义模式对话框。

随着网页内容在移动设备上的重要性日渐增加，移动设备上的传统模式对话框较少被使用。在针对移动屏幕优化的网站上，模态对话框通常只是另一个展示在全屏居中位置的新视图。

Finally, there is a native dialog in HTML5 which should make live easier for authors and users. Unfortunately, browser support for the native dialog is still too poor for using it confidently on the web (compare The current state of modal dialog accessibility). Microsoft’s Internet Explorer and Edge as well as Apple’s Safari Browser do not support it, and Firefox so far only supports it when it is manually enabled (something most users would not know about). However, there is a dialog polyfill that will generate fallback custom dialogs in browsers that do not support native dialogs. (Note: We have not tested how well this works).

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

键盘用户：无法访问对话框

模态对话框引发的最严重的可用性问题是，使用键盘的用户通常无法访问模态对话框。

页面弹出对话框时，通常会将对话框插入当前页面源码的末尾，或开头。这意味着弹出的对话框里触发它的控件距离很远。当用户使用键盘按下按钮并打开一个模态对话时，输入焦点通常不会设置到该对话框。

使用键盘的用户通常只能通过不断地按下 Tab 来轮询元素，直到最终到达对话框。

屏幕阅读器：甚至无法注意到对话框

能够看到屏幕的键盘用户还可以看到页面上出现了对话框，并进行一些交互。但视力障碍的用户通常甚至没有注意到页面弹出了对话框。当模态对话弹出时，焦点还通常停留在背景页面上。

屏幕阅读器 - 标签错误或无法通过键盘访问对话框控件

其他常见的问题是，像关闭按钮这样的重要元素根本没有标记，或者用错误的语言标记，导致用户无法使用键盘访问到这些模态对话，或关闭它。

开发环境的问题

许多开发人员使用开发环境或者 JS 库提供的现成部件，这些内置的部件通常不带有 role=dialog 标签，因此不会被屏幕阅读器识别为对话框。

有的部件能够将焦点定位到模态对话的输入框，但当对话框被关闭时，用户通常发现自己被定位到了 页面的开头，或其他位置，而不是触发模态对话的位置。

模态对话框的可用性提示

  • 使对话框引人注目。模态对话框显示了一些最初不在页面上的内容。对于屏幕阅读器用户，重要的让他们能够在模式对话框打开时注意到它。如果没有正确标记模态对话，他们可能无法感知到屏幕发声了变化。在对话框中使用 role="dialog" （或 role="alertdialog" ）和 aria-modal="true"。

  • 在打开时将焦点移至对话框，在关闭时移回触发器。对于键盘用户（包括视障用户），重要的是在对话框打开时将焦点移至对话框，以便他们可以与对话框交互。当对话框关闭时，焦点应该返回到触发对话框的元素。

  • 让焦点保持在对话框中。打开模态对话时，键盘焦点应留在对话框中。当模态对话未关闭时，使用 Tab 或其他辅助方式切换焦点时，焦点应该在对话框内的可交互元素中循环。

  • 给模态对话框起一个有意义的名字。通过 aria-labelledby 引用他们可见的标题，或通过 aria-label 提供一个不可见的名称。

  • 标记所有对话框控件，包括关闭按钮。每个对话框都应该有一个清晰标记的控件用于关闭它。用于关闭模态对话的图标按钮必须具有可访问的名称，以便屏幕阅读器用户可以读出该名称。

  • 隐藏对话框下方的内容。当对话框打开时，在后台的页面内容上设置 aria-hidden="true" 。实现此目的的一个好的结构是将对话框实现为主要内容的同级元素。

  • 管理对话框外的指针输入。要么忽略模态对话框之外的点击，要么让这些点击能够关闭模态对话框。

  • 确保 Escape 键总是能关闭对话框。按 ESC 键关闭对话框是常见的做法，也是许多用户所期望的。除此之外，不要完全依赖 ESC键 ，也要包括一个可见的关闭按钮：因为有些设备没有键盘。

延展阅读

Backlinks

Graph View