Tap to Dismiss

Designing accessible escape hatches for modals

Linzi Berry
Jan 3, 2019 · 5 min read
Image for post
Image for post

Let’s talk great escapes. Not magical like Houdini’s handcuffs or Thor’s bifrost, instead very commonplace — an interactive icon to remove pesky pop-ups away from your desired content. If modals, dialogs, pop-ups… whatever you want to call them are a necessary evil for transient content, we need to build accessible escape hatches.

Visual Design

Accessible Design

Image for post
Image for post
Icon vs Letterform

Design an icon, rather than using a typographic letterform, that is consistent with the rest of your iconography set. It should be clearly understood as an [x] with all four appendages clearly separated. I personally prefer the 90° angle design and adjust the weight to match the set.

Image for post
Image for post
High contrast vs Low

It’s color should be neutral and meet the a11y recommended 4:1 contrast ratio. Sure, pop-ups perform astronomically better when the [x] is barely off-white gray, but that, my friends, is what we call a dark pattern. By making the [x] barely viewable, we’re tricking the user into doing the main action by making it seem mandatory to escape. This leads to a frustrated user base and false positives for the business.

Image for post
Image for post
Contained vs Standalone

The icon should be contained to indicate the relative size of the tap target and delineate interactive icons from static ones, especially in close proximity.

  • If the icon and container are under the minimum tap target size (48x48dp/pt), build the tap target to be larger than the visuals of the button and don’t overlap it with other interactive elements.
  • If this icon lives inside a interactive bar, like header navigation, then the bar is already creating this tappable space for you — hooray!

Placement

Image for post
Image for post
Audit Highlights

Modal Placement

Image for post
Image for post
Bottom vs Center

[x] Placement

Image for post
Image for post
Inside vs Overlap vs Outside

Inside appears inside of the modal. This most clearly connects the [x] to modal and works well with a flat design aesthetic, however it adds complexity to the inner layout of the title within the modal.

Overlap overlaps the modal. The break in the continuous line calls the most attention to the [x], but comes with a distinct visual design style which adds visual complexity and feels less refined.

Outside appears outside of the modal. This cleans up the design of the modal, however the [x] could be confused with UI underneath.

Image for post
Image for post
Right vs Left. Icons by Meg Robichaud

End (Right) Placing the [x] on the right side is better for right handed thumb tappability and doesn’t run into alignment with static iconography.

Start (Left) Placing the [x] on the left side follows the current navigation paradigm, however it increases the vertical height of the modal because of it’s proximity to left aligned iconography and it’s a further tap target on large phones.

This is for LTR languages. “Start” being where the user starts reading content and “end” where they stop. In RTL languages, you should flip it to the left.

Optimal Arrangement

Image for post
Image for post
Just Text, Image, and Icon

Last thoughts


I’m Linzi Berry, currently design systems manager at Lyft. I sweat the details so you don’t have to. My hope in documenting system design thinking and process is to contribute and learn from the design community at large. Please subscribe!

Tap to Dismiss

Sweating the details so you don’t have to

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store