iOS

  • There is no native snackbar or toast element for iOS. The notes below are suggestions and accessibility guidance.

Developer notes

  • Snackbars and Toasts provide lightweight feedback about an operation
  • They show a brief non-critical message at the bottom of the screen on mobile
  • Snackbar or toast must be dynamically announced by the screen reader without moving focus to it
  • Display only one at a time
  • A Snackbar or toast can be timed to disappear, since the message is not critical information
  • If the Snackbar persists, it should be in the swipe order for the screen reader user and tab order for the keyboard user
  • All text in the Snackbar and Toast must be announced by the screen reader
  • A Snackbar can contain an interactive element. Please follow the Native Button guidance for the CTA
  • Toasts do not contain an interactive element

Dynamic Announcement example

  • “Copied to clipboard” (Non-critical information in timed-to-disappear snackbar)

Android

Developer notes

  • Snackbars and Toasts provide lightweight feedback about an operation
  • They show a brief non-critical message at the bottom of the screen on mobile
  • Snackbar or toast must be dynamically announced by the screen reader without moving focus to it
  • Display only one at a time
  • A Snackbar or toast can be timed to disappear, since the message is not critical information
  • If the Snackbar persists, it should be in the swipe order for the screen reader user and tab order for the keyboard user
  • All text in the Snackbar and Toast must be announced by the screen reader
  • A Snackbar can contain an interactive element. Please follow the Native Button guidance for the CTA
  • Toasts do not contain an interactive element

Focus

  • For Jetpack Compose Snackbar, when there is an action available, the default accessibility behavior allows screen reader to dynamically read the message and the action
  • External keyboard tab order often follows the screen reader focus, but sometimes needs focus management

  • Android Views
    • importantForAccessibility makes the element visible to the Accessibility API
    • android:focusable
    • android=clickable
    • Implement an onClick( ) event handler for keyboard, as well as onTouch( )
    • nextFocusDown
    • nextFocusUp
    • nextFocusRight
    • nextFocusLeft
    • accessibilityTraversalBefore (or after)
    • To move screen reader focus to newly revealed content: Type_View_Focused
    • To NOT move focus, but dynamically announce new content: accessibilityLiveRegion(set to polite or assertive)
    • To hide controls: importantForAccessibility=false
    • For a ViewGroup, set screenReaderFocusable=true and each inner object’s attribute to keyboard focus (focusable=false)
  • Jetpack Compose
    • Modifier.focusTarget() makes the component focusable
    • Modifier.focusOrder() needs to be used in combination with FocusRequesters to define focus order
    • Modifier.onFocusEvent(), Modifier.onFocusChanged() can be used to observe the changes to focus state
    • FocusRequester allows to request focus to individual elements with in a group of merged descendant views
    • Example: To customize the focus events
      • step 1: define the focus requester prior. val (first, second) = FocusRequester.createRefs()
      • step 2: update the modifier to set the order. modifier = Modifier.focusOrder(first) { this.down = second }
      • focus order accepts following values: up, down, left, right, previous, next, start, end
      • step 3: use second.requestFocus() to gain focus

Code Example

  • Jetpack Compose
val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()
Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) },
    content = { innerPadding ->
        Button(
          modifier = Modifier.padding(innerPadding),
          onClick = {
            // show snackbar as a suspend function
            scope.launch {
                snackbarHostState.showSnackbar("Snackbar Message")
            }
          }) {
              Text(text = "Snackbar")
          }
    }
)

Dynamic Announcement example

  • “Copied to clipboard” (Non-critical information in timed-to-disappear snackbar)