Fork me on GitHub

Header

Important notice about the «ADG» project

Important notice: Due to large demand, the «Accessibility Developer Guide» project (currently a proof of concept with low priority) will become a top priority priority in 2017. We will make this guide become what it deserves to be for so long already: a comprehensive resource for all folks interested in accessibility. For this we need your support!

Dialog widgets

Dialogs display some information on top of a page.

They are typically used to react upon a user action, e.g. to display a notice or to ask for some input.

There are dialogs that disable the rest of the page in the background (modal), while others don't (non-modal).

Notice: dialogs are sometimes also called "modals", "popups", "lightboxes", or even "alerts". All of these terms (incl. "dialog") may be used interchangeably, but they may also refer to different UI concepts (or alternations) sometimes.

Preconditions

Desktop

Software

Screenreaders
NVDA, version 2016.1
JAWS, version 17.0.1377
Browsers
Internet Explorer (IE), version 11.0.9600.18230
Firefox (FF), version 44.0.2

Considered use-cases

  • Keyboard-only
  • JAWS on IE and FF
  • NVDA on IE and FF

Things to consider

Dialog widgets run into problems when there is more content in a dialog than it's possible to display without scrolling, as then there's a conflict between scrolling the page and moving the virtual cursor of a screenreader using up/down. To be on the save side, never pack too much info into a dialog!

Our recommended widget The Incredible Accessible Modal Window does have this problem too; here's the related issue: Lightbox content not visible when longer than viewport.

More information

Take a look at our Dialog: Proof of Concept to have a fully working example dialog with all the features that we expect a good dialog to provide.

Further reading:

Take this into consideration

Read this before using any widget!

Before getting too excited about all those fancy 3rd party widgets outthere, you better read about the things to consider when choosing a widget.

Also, you should be aware of how we review widgets.

Got something to say?

Help us managing this list!

Know another promising widget? Have different results when testing? Have other opinions about what's important?

You are very welcome to bring yourself in.

Results

NameGeneral informationAnnoyancesVerdict
The Incredible Accessible Modal Window
  • Background is visible
  • Keyboard-only
    • Focus is trapped within the dialog (it's not possible to leave the browser window using solely the tab key)
Recommended
Bootstrap Modal
  • Background is visible
  • Keyboard-only
    • Focus is trapped within the dialog (it's not possible to leave the browser window using solely the tab key)
  • JAWS + IE
    • Elements outside the dialog can be reached
  • NVDA + IE
    • Browse mode can't be activated (up/down scrolls the page, and esc always closes the dialog)
  • NVDA + FF
    • Browse mode can't be activated in a user conform way: when opening the dialog, up/down scrolls the dialog (or the background), and esc closes the dialog. The only way to work around this is to tab once to reach a focusable element, upon which up/down can be used to browse.
Not recommended
Heydon Works Dialog
  • Background is not visible
  • NVDA + FF
    • Announces info redundantly when opening dialog
  • NVDA + IE
    • Elements outside the dialog can be reached, interaction in general feels quirky
Not recommended
Athena ICT Dialog
  • Background is visible
  • Keyboard-only
    • Focus reaches background when using tab key (interestingly, for shift-tab it's prevented)
  • NVDA + IE
    • Browse mode can't be activated (up/down scrolls the page, and esc always closes the dialog)
Not recommended

Credits

Thanks to Lufthansa for giving us the task to evaluate dialog widgets and programming a prototype.