• Table of contents
• Knowledge base

The structure of the modal dialog component

There are two modal dialogs on the search results page:

1. The “Help DuckDuckGo Improve Searches Like This” dialog, which can be opened from the “Report Ad,” “Are these links helpful,” and “Share Feedback” buttons on the page. These buttons activate the same form in this modal dialog, with different preset values.
2. The “Custom date range” dialog, which can be opened from the date range setting popover.

The “Help DuckDuckGo…” dialogs and their triggers

The custom date range dialog and its trigger

In the next chapter, we will examine the contents of these modal dialogs, but first, let's explore the correct and accessible design pattern and identify any necessary fixes.

The accessible design pattern for modal dialogs

Keyboard interaction and focus management

• When a modal dialog opens, it should automatically move the focus inside the dialog. This is important because without it, users may have to press hundreds of key presses to get to the newly visible content. The optimal position for the focus depends on the contents of the dialog. For example, if a dialog contains interactive elements, a safe bet is to send focus to the first one of those.
• The dialog should also contain its own tab sequence, meaning that pressing the Tab or Shift+Tab keys does not move the focus outside of the dialog. This helps ensure that the focus stays within the modal, and that the content behind the dialog is inert and cannot be interacted with. This is what makes a modal dialog "modal.”
• Finally, when a user closes a dialog (either by activating the close button or by pressing the Escape key), the focus should be sent back to the element that originally invoked the dialog. This helps maintain the user's point of regard and allows them to continue with their task without losing their place.

Markup for the dialog

The markup for the dialog should include the following elements:

• role="dialog", which indicates its purpose as a dialog
• aria-modal="true", which indicates that it is a modal dialog
• An accessible label, which should be set using one of the following methods:
  • aria-label, if there is no visible title for the dialog
  • aria-labelledby="ID_OF_TITLE", if there is a visible title for the dialog