Accessible Mootools Widget Demo

Dialog

This is a modal confirmation dialog.







How to use the Dialog widget

While the dialog contains focus, the tab order will wrap inside the dialog. If the dialog is modal, it is not possible to move focus to the main page until the dialog is closed.

  • Tab / Shift+Tab: Moves the focus inside the dialog
  • Space / Enter: Activates button
  • Esc: Closes the dialog (Same as activating the Cancel button)

Accessibility Changes made

  • Internal development
  • Download accessible Dialog
  • Added WAI ARIA role "dialog" and "group" and WAI ARIA property "aria-label" and "aria-describedby"
  • Added keyboard navigation support (behavior of modal dialog)
  • Added high visual contrast indicator.