Skip to main content

Jetpack Compose accessibility code samples

Browse code samples to learn how to build more accessible Jetpack Compose apps.

Accessibility code samples

  • Accessibility action in Jetpack Compose

    Accessibility actions provide alternative ways for users of assistive technologies to perform actions.

    Accessibility action
  • Accessibility announcement in Jetpack Compose

    Users of assistive technologies should be made aware of important changes in content through accessibility announcements.

    Accessibility announcement
  • Accessibility dialog in Jetpack Compose

    A dialog overlays the screen and offers one or more actions to proceed.

    Accessibility dialog
  • Accessibility focus indicator in Jetpack Compose

    Users should know which element has focus when using a keyboard or assistive technology.

    Accessibility focus indicator
  • Accessibility focus in Jetpack Compose

    Sometimes you need to programmatically move the accessibility focus to a specific element.

    Accessibility focus
  • Accessibility focusability in Jetpack Compose

    An element should indicate whether it should be focusable by assistive technologies or not.

    Accessibility focusability
  • Accessibility group in Jetpack Compose

    It is easier and quicker for users of assistive technologies to interact with grouped elements.

    Accessibility group
  • Accessibility hint in Jetpack Compose

    An accessibility hint helps users to understand what will happen after performing an action.

    Accessibility hint
  • Accessibility label in Jetpack Compose

    An accessibility label helps users of assistive technologies to identify elements on the screen.

    Accessibility label
  • Accessibility language in Jetpack Compose

    When content is written in multiple languages, foreign words should ideally be indicated in their respective language.

    Accessibility language
  • Accessibility link in Jetpack Compose

    Links should be accessible for users of assistive technologies.

    Accessibility link
  • Accessibility live region in Jetpack Compose

    A live region allows users of assistive technologies to receive updates whenever important information on the screen changes.

    Accessibility live region
  • Accessibility modal in Jetpack Compose

    A modal overlays the screen with additional content.

    Accessibility modal
  • Accessibility name in Jetpack Compose

    The accessibility name indicates the name used for interface elements by assistive technologies.

    Accessibility name
  • Accessibility order in Jetpack Compose

    Assistive technologies try to determine a logical accessibility order based on the placement and properties of the elements on the screen.

    Accessibility order
  • Accessibility role in Jetpack Compose

    An accessibility role helps users of assistive technologies to understand the purpose of elements on the screen.

    Accessibility role
  • Accessibility state in Jetpack Compose

    An accessibility state helps users of assistive technologies to understand the state of elements on the screen.

    Accessibility state
  • Accessibility value in Jetpack Compose

    An accessibility value helps users of assistive technologies to understand the value of elements on the screen.

    Accessibility value

Element code samples

  • Element focus change in Jetpack Compose

    Whenever an element receives focus, it should not automatically trigger an event which changes context.

    Element focus change
  • Element identification in Jetpack Compose

    Functionality that is repeated on multiple screens should use consistent identification.

    Element identification
  • Element position in Jetpack Compose

    Components that are repeated on multiple screens should have a consistent position.

    Element position

Input code samples

  • Input cancellation in Jetpack Compose

    Users should be able to cancel accidental interaction.

    Input cancellation
  • Input content type in Jetpack Compose

    Setting the content type for input fields helps user entering data.

    Input content type
  • Input errors in Jetpack Compose

    Users should be notified when they make input errors.

    Input errors
  • Input gestures in Jetpack Compose

    Gesture activated functionality should also be available without the use of gestures.

    Input gestures
  • Input instructions in Jetpack Compose

    When a label might not describe the requested input sufficiently, you should add additional instructions.

    Input instructions
  • Input keyboard type in Jetpack Compose

    Setting the keyboard type for input fields helps user entering data.

    Input keyboard type
  • Input label in Jetpack Compose

    Input fields should have labels so that users know what input data is expected.

    Input label
  • Input motion in Jetpack Compose

    Provide an alternative way for actions activated by motion, to allow everyone to use the functionality.

    Input motion
  • Input predictable in Jetpack Compose

    Whenever a user provides input, there should be no change of context.

    Input predictable

Keyboard code samples

  • Keyboard order in Jetpack Compose

    By adjusting the keyboard order, you can provide a great experience for users that control their device using a hardware keyboard.

    Keyboard order
  • Keyboard shortcuts in Jetpack Compose

    Most people operate their smartphones with touch, but some people use an external keyboard.

    Keyboard shortcuts

Quality code samples

  • Linting in Jetpack Compose

    Linting is the process of running a tool which analyzes your code for potential errors.

    Linting

Media code samples

  • Audio control in Jetpack Compose

    Users should be able to control audio whenever it plays automatically.

    Audio control
  • Audio description in Jetpack Compose

    Videos should include audio description when important visual details are shown which you cannot hear.

    Audio description
  • Live captions in Jetpack Compose

    Captions should be provided in real-time to enable users to understand what is being said in live videos.

    Live captions
  • Captions in Jetpack Compose

    Captions should be provided to enable users to understand what is being said in videos.

    Captions
  • Transcript in Jetpack Compose

    Videos should contain a transcript to allow users to read what is shown in media, such as a video or podcast.

    Transcript

Screen code samples

  • Reduced animations in Jetpack Compose

    Content which conveys a sense of motion can be a barrier for users.

    Reduced animations
  • Contrast in Jetpack Compose

    Apps should provide enough contrast between text and its background so that it can be read by people with moderately low vision.

    Contrast
  • Dark mode in Jetpack Compose

    Dark mode darkens background colors and provides a more comfortable viewing experience in low light.

    Dark mode
  • Frequent flashes in Jetpack Compose

    Rapidly flashing images or views can cause seizures for some users.

    Frequent flashes
  • Descriptive headers in Jetpack Compose

    Screens should have descriptive headers, this helps users find specific content and orient themselves within your app.

    Descriptive headers
  • Descriptive labels in Jetpack Compose

    Screens should have descriptive labels, these help users recognize which purpose controls have.

    Descriptive labels
  • Screen orientation in Jetpack Compose

    Apps should adapt to the preferred display orientation of the user.

    Screen orientation
  • Reflow in Jetpack Compose

    Content on the screen should reflow based on the users' preferences.

    Reflow
  • Search functionality in Jetpack Compose

    Users might have difficulty finding a specific screen.

    Search functionality
  • Skip content in Jetpack Compose

    It can be helpful for users to skip repeated blocks of content.

    Skip content
  • Adjustable timing in Jetpack Compose

    Everyone, including people with disabilities, should have adequate time to interact with your app.

    Adjustable timing
  • Screen title in Jetpack Compose

    Each screen should have a descriptive title, which helps users with identifying the screen.

    Screen title

Text code samples

  • Bold text in Jetpack Compose

    Apps should use bold text when users have indicated this as a preference in the system settings.

    Bold text
  • Text element in Jetpack Compose

    Always use text elements to display text, unless this is not possible due to styling, such as text logo's.

    Text element
  • Localization in Jetpack Compose

    Assistive technologies, such as the screen reader, use the locale for the pronunciation of utterances.

    Localization
  • Scale text in Jetpack Compose

    Apps should scale text to the size specified by users in the system settings.

    Scale text
  • Text spacing in Jetpack Compose

    Content should adapt to increased spacing between lines, words, letters, and paragraphs.

    Text spacing
  • Text truncation in Jetpack Compose

    Text should never get truncated in your app, even when users have enlarged their font size.

    Text truncation