Synonyms: Dialog window, message, pop-up, dialog, dialog box

See also: Window , tooltip , error message

A modal dialog is used to display important information and control elements in a separate area. A modal dialog blocks the operation of the application window in the background (see DIN EN ISO 9241-161: 8.10).

A modal dialog always contains a text and one or more buttons that can be used to close the dialog. The modal dialog can also contain a title bar and status bar as well as other control elements, graphics, etc.

The requirements regarding the content of the modal dialog are described at the respective element. Only specific requirements for modal dialog are described here.


Figure 27: Modal dialog
426ResizingIt must be possible to scale the modal dialog by up to 200%. During the scaling, no loss of content or functionality may occur (see ResizingResizingWindows Contrast Adjustment` element is used. -@</td> <td>Must</td> <td>EN 301 549:</td> </tr> <tr> <th scope="row">430</th> <td>Label</td> <td>The modal dialog must have an expressive label. <p class="table-footnote"> Note: The label can be located in the title bar. </p></td> <td>Must</td> <td>EN 301 549:,</td> </tr> </tbody> </table> <div class="headline-hash-container"><h2 id="operation">Operation</h2><a class="headline-hash" href="#operation"><span class="sr-only">Permalink "Operation"</span><span aria-hidden="true" class="headline-hash-icon">#</span></a></div> <table id="table-2"> <thead> <tr> <th>No.</th> <th>Property</th> <th>Description</th> <th>Classification</th> <th>Reference</th> </tr> </thead> <tbody> <tr> <th scope="row">431</th> <td>Use of the keyboard</td> <td>It must be possible to open, operate and close the modal dialog with the keyboard (see Use of the keyboard table, below).</td> <td>Must</td> <td>EN 301 549:,</td> </tr> <tr> <th scope="row">432</th> <td>Use of the keyboard</td> <td>When the modal dialog is opened, the keyboard focus must be placed in the dialog. <p class="table-footnote"> Note: Typically, the keyboard focus should be placed at the beginning of the modal dialog. For simple modal dialogs, the focus can also be placed on a button at the end (e.g. “OK” or “Cancel”), provided that it is ensured that the title and text of the dialog are automatically output by the screen reader when the dialog is opened. </p></td> <td>Must</td> <td>EN 301 549:,</td> </tr> <tr> <th scope="row">433</th> <td>Use of the keyboard</td> <td>As long as the modal dialog is open, the keyboard focus must remain within the dialog.</td> <td>Must</td> <td>EN 301 549:,</td> </tr> <tr> <th scope="row">434</th> <td>Use of the keyboard</td> <td>When the modal dialog is closed, the keyboard focus must be reset to the triggering element or to an element with which the work can ultimately be continued. <p class="table-footnote"> Note: The resetting to the triggering element is not possible, for instance, if it has been removed due to the operation of the dialog. In this case, it is usually a good idea to place the keyboard focus on an element before or after the triggering element. </p></td> <td>Must</td> <td>EN 301 549:,</td> </tr> </tbody> </table> <div class="headline-hash-container"><h3 id="use-of-the-keyboard-modal-dialog">Use of the keyboard: modal dialog</h3><a class="headline-hash" href="#use-of-the-keyboard-modal-dialog"><span class="sr-only">Permalink "Use of the keyboard: modal dialog"</span><span aria-hidden="true" class="headline-hash-icon">#</span></a></div> <table id="table-3"> <thead> <tr> <th>Action</th> <th>Key</th> <th>Classification</th> </tr> </thead> <tbody> <tr> <td>Navigating within the modal dialog</td> <td>TAB</td> <td>Required</td> </tr> <tr> <td>Closing the modal dialog</td> <td><ul><li>Desktop: ESC, ALT+F4</li><li>Web: ESC</li></ul></td> <td>Required</td> </tr> </tbody> </table> <div class="headline-hash-container"><h3 id="use-of-the-pointing-device-modal-dialog">Use of the pointing device: modal dialog</h3><a class="headline-hash" href="#use-of-the-pointing-device-modal-dialog"><span class="sr-only">Permalink "Use of the pointing device: modal dialog"</span><span aria-hidden="true" class="headline-hash-icon">#</span></a></div> <table id="table-4"> <thead> <tr> <th>Action</th> <th>Key</th> <th>Classification</th> </tr> </thead> <tbody> <tr> <td>Closing the modal dialog</td> <td>Left click on the corresponding button</td> <td>Required</td> </tr> </tbody> </table> <div class="headline-hash-container"><h2 id="programmierungschnittstellen">Programmierung/Schnittstellen</h2><a class="headline-hash" href="#programmierungschnittstellen"><span class="sr-only">Permalink "Programmierung/Schnittstellen"</span><span aria-hidden="true" class="headline-hash-icon">#</span></a></div> <table id="table-5"> <thead> <tr> <th>No.</th> <th>Property</th> <th>Description</th> <th>Classification</th> <th>Reference</th> </tr> </thead> <tbody> <tr> <th scope="row">435</th> <td>Role</td> <td>The modal dialog role must be communicated to the Accessibility API (see <a href="/accessible-uie/accessibility_api.html" data-pdf-href="d41d8cd98f00b204e9800998ecf8427e" data-pdf-level="2">Accessibility API</a><a href="/accessible-uie/beschriftung.html" data-pdf-href="d41d8cd98f00b204e9800998ecf8427e" data-pdf-level="2">Label</a><a href="/accessible-uie/beschreibung.html" data-pdf-href="d41d8cd98f00b204e9800998ecf8427e" data-pdf-level="2">Description</a></td> <td></td> <td></td> </tr> </tbody> </table> <hr aria-hidden="true" /> <h2 id="meta" class="sr-only">Information about this article</h2> <dl class="post-meta" aria-describedby="meta"> <dt>Date:</dt> <dd>15.01.2024</dd> <dt>License:</dt> <dd> <a href=""> CC-BY-SA 4.0 </a> </dd> <dt>Version:</dt> <dd> 1.0 </dd> </dl> <p><em>You are welcome to send <a href=" ">feedback by email</a> about our handout!</em></p> </article> <nav aria-label="Forward-Backward Navigation End"> <ul class="pagination pagination-lg"> <li class="page-item previous"> <a href="/accessible-uie/1.0/statuszeile.html" title="Backwards to the previous chapter: Status bar" aria-label="Backwards to the previous chapter: Status bar" > ← <br /> Backwards </a> </li> <li class="page-item back"> <a href="/accessible-uie/1.0" title="Back to the table of contents" aria-label="Back to the table of contents" > ↑ <br /> Back </a> </li> <li class="page-item next"> <a href="/accessible-uie/1.0/bedienelemente.html" data-toggle="tooltip" data-placement="top" title="Forward to the next chapter: Bedienelemente" aria-label="Forward to the next chapter: Bedienelemente" > → <br /> Forward </a> </li> </ul> </nav> </div> </div> </div> <footer> <div class="container"> <div class="row"> <div class="col-lg-8 offset-lg-2 col-sm-12"> <p class="credits copyright"> <a href="">Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik</a> • BFIT-Bund AG02 Software<br/> With the kind support of the <a href="">Competence Center for Digital Accessibility at Stuttgart Media University</a></p> <nav class="footernav credits copyright" aria-label="Navigation in footer"> <ul> <li><a href='/accessible-uie/1.0/legal/sitemap.html'>Sitemap</a></li> <li><a href=''>Imprint</a></li> <li><a href=''>Data protection</a></li> <li><a href=''>Declaration on accessibility</a></li> <li><a href=" ">Report barrier (e-mail)</a></li> <li><a href=" ">Feedback (Email)</a></li> <li><a href="">Sitemap</a></li> <li><a href="">Declaration on accessibility in easy language</a></li> <li><a href="">German sign language</a></li> <li class="nobullet"><a href="">Newsletter of the Competence Center Digital Accessibility at Stuttgart Media University</a></li> </ul> </nav> </div> </div> </div> </footer> <script src="/accessible-uie/1.0/bfit.js"></script> </body> </html>