When should web designers use modal overlays?

"This web page needs to be interrupted by a lightbox effect and a modal dialog asking me to sign up for a mailing list," said no one ever.

If you really must create a modal popup dialog (seriously, don't do this), Autodesk's Naema Baskanderi has some best practices to follow.

Meanwhile, if you're on the browsing side and you're looking for some self-help measures, I recommend uBlock Origin's element picker, which lets you select parts of webpages and block them permanently -- I use it to kill those bars across the tops and bottoms of pages that display navigation and graphics, obscuring the text as you scroll.

OK, yes, there are times when modals make sense (compose new tweet comes to mind), but if the web has a bigger annoyance than this (apart, possibly, from autoplay video), I don't know what it is.


When creating modals remember to add in keyboard accessibility. Consider the following:

* Opening modal — The element which triggers the dialog must be keyboard accessible

* Moving focus into the Dialog — Once the modal window is open, the keyboard focus needs to be moved to the top of that

* Managing Keyboard Focus — Once the focus is moved into the dialog, it should be “trapped” inside it until the dialog is closed.

* Closing the Dialog — Each overlay window must have a keyboard accessible control to close that window.

Best Practices for Modals / Overlays / Dialog Windows [Naema Baskanderi/UX Planet]

(via 4 Short Links)

Notable Replies

  1. I agree, don't do it. But maybe mention that to the BB store

  2. I'm sort of irritated by people trying to gate their sites with html tags.

    When a site has a nice box saying, "Please considering donating if you like our content." I do consider it. When a site is like, "haha, locked you out unless you disable ad blocker" and all I have to do is edit an html tag to circumvent it, I'm very inclined to do so. Somethow making it into an adversarial thing doesn't make me want to work with them.

  3. Cunk says:

    Fuck those modals that automatically reposition themselves to try to stay centered in your screen so when you try to pan around on your phone looking for the "X" or even "OK" in a modal that's too big it follows you.

    And since I suspect this post has the attention of a few web designers I'd like to take this opportunity to mention another pet peeve of mine. Can you please, please fix credit card entry forms so they don't care if your number has dashes or spaces or dots or pile of shit emojis separating the quartets? There's no reason why they should only allow entries with only numbers.

  4. The worst ones that I have seen are the modals for the mobile versions of sites, that invariably pop up when you're 2/3rds done reading the article, and force you to scroll back up to the top of the page to press the X to close them, and half of the time, pressing the X actually activates the link to the ad or whatever it is that is annoying you. And, of course, there's no such thing as a browser extension for Chrome for Mobile.

  5. The ones I find most irritating are the ones that prompt me to sign up for the email newsletter the first time I visit the site, before I even see the content I came to see.

Continue the discussion bbs.boingboing.net

34 more replies