The bottom sheet is one of the most recognizable UI elements and is used in countless mobile apps. While it’s a very flexible component that can be used for multiple use cases, it can also cause some accessibility issues. Especially when used by less experienced mobile users or users who use a different input method. Truly, it’s also a usability issue because if it’s not accessible, it’s not usable. So, it’s important to take a few considerations in mind when using a bottom sheet in your application.

‍

But first, a history lesson, the bottom sheet was introduced together with Google’s Material Design language. As a literal sheet of paper that would slide across the interface. It was Google’s response to the very flat design trend that started with iOS 7 to make interfaces more tactical.

‍

‍

The earliest definition found in the material guidelines introduced the bottom sheet as:

“One way to present a set of actions to a user is with bottom sheets, a sheet of paper that slides up from the bottom edge of the screen. Bottom sheets offer flexibility in the display of clear and simple actions that do not need explanation.”

‍

Back then it was suggested to use it when three or more actions are available for the user when they don’t need extra explanation.

2 Android screenshots with a bottom sheet, left is a Files app that show actions to add new documents to your files. Right bottom sheets is in a contacts app that allows you to share, upload, copy or print the page.
Examples of Material Guidelines in 2014 to showcase what types of actions that can be used in a bottom sheet

‍

Right now, the bottom sheet has become more common and is being used to present information on top of an existing screen to maintain the context. The content can still be a list of actions, but it can also be informative or as a way to input data.

3 screenshots of apps with a bottom sheet. Each bottom sheet has different content. First one shows options for a webpage like sharing or bookmarking, second is a sports app that lets you edit the date and time for a workout reminder, third is a news app that show extra information about editors of an article.
Bottom sheet examples from Bing, Nike Training Club and Informed News

‍

By expanding the way a bottom sheet is used, usability and accessibility might sometimes be forgotten. Especially when looking at the accessibility aspect of a bottom sheet, you have to make sure you support different user settings and input methods.

‍

What can go wrong when using a bottom sheet?

No close button

While you may have alternatives to close the bottom sheet like tapping outside of it, falling back on OS navigation like the Android back button or swipe gestures. This will not be clear or accessible for all users. Someone might not know that these gestures will close the sheet, or they might not be available to a screen reader. The lack of a close button might block the user in completing their task.

Screenshot of a bottom sheet with no close button
No close button is provided

‍

Inaccessible close button

You might have added a close button, but maybe it’s not accessible. The contrast might be too low, the touch target could be too small, or you’ve placed it somewhere it doesn’t make sense. A user might not be able to see the close button or tap it because it’s too small. Also, make sure you add an accessibility label to the close button, so a screen reader doesn’t ignore it or reads it like “x_icon”.

Screenshot of a bottom sheet with a close button on the top of the screen that is hard to reach, second screenshot a close button in light grey with very low color contrast, third screenshot has a very small close button
Close buttons that are hard to reach, have low contrast or are too small

‍

Fixed height that is not scrollable or doesn’t support large type

When using a fixed height for a bottom sheet, it might not show all content. Especially when viewing it on a smaller device. Some elements might be out of view, so the user can’t read or interact with them. This will also cause issues for users who use a large font size. They will not be able to see all content. Even if you added the possibility to scroll, the scroll area might be too small to comfortably use.

2 screenshots of a bottom sheet: first one is a list of actions that is not fully visible because the height of the bottom sheet is too small. Second screenshot shows items with a large font size that are not fully visible because the bottom sheet has a fixed height.
Content is cut off because the sheet has a fixed height

‍

Contrast is too low

By using a bottom sheet, you can still provide context to the user to show where they opened the sheet from. This is done by showing the parent view in the background. This can be helpful, but showing too much can be confusing. When the sheet and content behind it has the same or a similar background color, it will blend together, and it will not be easy to tell which is part of the bottom sheet. The same will happen in dark mode when your sheet is too dark or has a similar color to the background.

2 screenshots of a bottom sheet displayed on top of a recipe screen. First bottom sheet has the same white background as the recipe view, making it hard to see where the bottom sheet starts, it looks like part of the recipe screen. Second screenshot is similar but it uses a dark mode where all background colors are changed to black, instead of white.
Contrast with the bottom sheet and background is too low

‍

How to resolve these issues?

Even though it may look like a lot can go wrong when implementing a bottom sheet, it’s quite straightforward to fix all of these issues. Let’s look at them one by one to resolve each one.

Provide a close button

Make sure everyone, whatever technical skill or ability they have, can close the bottom sheet. You will make this a lot easier by simply adding a close button. You can be creative with this, as different ways of visualizing are possible. Just make sure the touch target is large enough, contrast is sufficient, and label your button correctly so that it can be used with different input types.

2 screenshots of a bottom sheet one with an icon close button and one with a textual close button
A close button is available as an icon or text button

‍

Flexible height and ability to scroll

Adapt the height of the bottom sheet based on the content, if there is more content, or it doesn’t fit the screen, change the height, so everything is visible. Also make it possible to scroll, especially when there’s a lot of content in your sheet or the font size is much larger than the default. You can easily detect the device text size settings and adapt your layout. For example, if the user has a large type preference, consider using as much screen estate as possible.

2 screenshots of a bottom sheet, one with adapted height so that all items in the sheet are visible, the other one uses the full screen to show all items with a large font size
Bottom sheet height changes depending on available content

‍

Provide enough contrast

Make sure there is enough distinction between the bottom sheet and background view. You can do this by showing a transparent background behind the sheet. For some users, this might still be not enough contrast. Here you can also detect the device settings (look for: Increase Contrast on iOS or High Contrast on Android) and you can either reduce the opacity or apply a blur effect to hide the background view better. If your app supports dark mode, make sure you use a lighter color than your background to make sure the bottom sheet is visible and different enough from the background.

Screenshot of 4 bottom sheets with a recipe screen behind it. First one shows a transparent overlay, so the bottom sheet is separated from the recipe screen. Second one is similar, but the overlay is less transparent. Third one is also similar, but shows a blurred overlay, so the recipe isn't very visible. Last screenshot shows a screen in dark mode with a black background, the bottom sheet is dark gray to have a better contrast.
Contrast between the sheet is increased by using a transparent overlay (scrim) that can be darkened or blurred. Dark mode sheets have a lighter color than the background color.