3

I'm using a bottom sheet.

On Android, people can use the back button to close it, drag it down or tap outside the area.

On iOS, people can drag it down or tap outside the area.

I'm just wondering if it's accessible enough. Would a close button / icon be good to have?

Cheersenter image description here

2
  • I'd say the handle at the top of the sheet is enough notice for me that I can drag it down to close, but that is likely not the case for all users. What's worse is Twitter uses this model when they want you to update your phone number from the iOS app, and they do not allow you to close the sheet without pressing one of the action buttons. I'd be concerned about whether your users have encountered this pattern before. Did you user test? How did they react?
    – D M
    Jun 16, 2021 at 13:28
  • 1
    I'd be a little concerned about the down arrow icon next to "Begin", which might look like "slide this tray downward" to users who aren't familiar with "download" glyphs.
    – Izquierdo
    Jun 16, 2021 at 21:55

4 Answers 4

3

The Human Interface Guidelines recommend always having a close/dismiss/cancel button as well as being able to swipe down to close it.

Always include a button that dismisses the modal view. For example, you might use Done or Cancel. Including a button ensures that the modal view is accessible to assistive technologies and provides an alternative to dismissal gestures.

You can read more here: https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/

1

Looking at Google's own Material Guidelines (scroll down to "Control"), we can see that Google themselves do not deem it necessary to include a button. The ways to dismiss the modal are listed as follows:

They can be dismissed by:

  • Tapping a menu item or action within the bottom sheet
  • Tapping the scrim
  • Swiping the sheet down
  • Using a close affordance within the bottom sheet’s top app bar, if available

But they mention a close button explicitly for full-screen modules:

Display a close affordance in a full-screen modal bottom sheet.

enter image description here


I have also used a bottom sheet as a menu in my own app for a long while and have never had complaints from users.


Conclusion: I think it is save to assume that such a modal has enough ways to close it. So even if a user expects a button in the first 5 seconds but cannot find it, he will find SOME way to close it, simply because it is so easy.

0

In terms of accessibility it's good to have. Since many of the senior users like Old aged people hard to adapt to new technology, it works very effectively for them. But always it's depends on the persona you are targeting.

May be we can have two CTA's based on the task of that journey. "Begin" as one CTA other is to "cancel/close"(based on the activity). You can change the position of download icon. Best way is to create variations and test.

Cheers.

0

If the back button closes it, it's not strictly necessary.

However, if your goal is to improve the Accessibility, include a UI control that can close the sheet. Make sure to include a focus state for that control and specify tab order for keyboard navigation.

Here's a helpful article on how to improve the usability of a sheet: https://www.inthepocket.design/articles/improving-the-accessibility-of-bottom-sheets#:~:text=Provide%20a%20close%20button,ways%20of%20visualizing%20are%20possible.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.