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!
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.
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.
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.
|The Incredible Accessible Modal Window|
|Heydon Works Dialog|
|Athena ICT Dialog|
Thanks to Lufthansa for giving us the task to evaluate dialog widgets and programming a prototype.