Jetpack Compose accessibility code samples
Browse code samples to learn how to build more accessible Jetpack Compose apps.
Accessibility code samples
- Accessibility action
Accessibility action in Jetpack Compose
Accessibility actions provide alternative ways for users of assistive technologies to perform actions.
- Accessibility announcement
Accessibility announcement in Jetpack Compose
Users of assistive technologies should be made aware of important changes in content through accessibility announcements.
- Accessibility dialog
Accessibility dialog in Jetpack Compose
A dialog overlays the screen and offers one or more actions to proceed.
- Accessibility focus indicator
Accessibility focus indicator in Jetpack Compose
Users should know which element has focus when using a keyboard or assistive technology.
- Accessibility focus
Accessibility focus in Jetpack Compose
Sometimes you need to programmatically move the accessibility focus to a specific element.
- Accessibility focusability
Accessibility focusability in Jetpack Compose
An element should indicate whether it should be focusable by assistive technologies or not.
- Accessibility group
Accessibility group in Jetpack Compose
It is easier and quicker for users of assistive technologies to interact with grouped elements.
- Accessibility hint
Accessibility hint in Jetpack Compose
An accessibility hint helps users to understand what will happen after performing an action.
- Accessibility label
Accessibility label in Jetpack Compose
An accessibility label helps users of assistive technologies to identify elements on the screen.
- Accessibility language
Accessibility language in Jetpack Compose
When content is written in multiple languages, foreign words should ideally be indicated in their respective language.
- Accessibility link
Accessibility link in Jetpack Compose
Links should be accessible for users of assistive technologies.
- Accessibility live region
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 modal
Accessibility modal in Jetpack Compose
A modal overlays the screen with additional content.
- Accessibility name
Accessibility name in Jetpack Compose
The accessibility name indicates the name used for interface elements by assistive technologies.
- Accessibility order
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 role
Accessibility role in Jetpack Compose
An accessibility role helps users of assistive technologies to understand the purpose of elements on the screen.
- Accessibility state
Accessibility state in Jetpack Compose
An accessibility state helps users of assistive technologies to understand the state of elements on the screen.
- Accessibility value
Accessibility value in Jetpack Compose
An accessibility value helps users of assistive technologies to understand the value of elements on the screen.
Element code samples
- Element focus change
Element focus change in Jetpack Compose
Whenever an element receives focus, it should not automatically trigger an event which changes context.
- Element identification
Element identification in Jetpack Compose
Functionality that is repeated on multiple screens should use consistent identification.
- Element position
Element position in Jetpack Compose
Components that are repeated on multiple screens should have a consistent position.
Input code samples
- Input cancellation
Input cancellation in Jetpack Compose
Users should be able to cancel accidental interaction.
- Input content type
Input content type in Jetpack Compose
Setting the content type for input fields helps user entering data.
- Input errors
Input errors in Jetpack Compose
Users should be notified when they make input errors.
- Input gestures
Input gestures in Jetpack Compose
Gesture activated functionality should also be available without the use of gestures.
- Input instructions
Input instructions in Jetpack Compose
When a label might not describe the requested input sufficiently, you should add additional instructions.
- Input keyboard type
Input keyboard type in Jetpack Compose
Setting the keyboard type for input fields helps user entering data.
- Input label
Input label in Jetpack Compose
Input fields should have labels so that users know what input data is expected.
- Input motion
Input motion in Jetpack Compose
Provide an alternative way for actions activated by motion, to allow everyone to use the functionality.
- Input predictable
Input predictable in Jetpack Compose
Whenever a user provides input, there should be no change of context.
Keyboard code samples
- Keyboard order
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 shortcuts
Keyboard shortcuts in Jetpack Compose
Most people operate their smartphones with touch, but some people use an external keyboard.
Quality code samples
- Linting
Linting in Jetpack Compose
Linting is the process of running a tool which analyzes your code for potential errors.
Media code samples
- Audio control
Audio control in Jetpack Compose
Users should be able to control audio whenever it plays automatically.
- Audio description
Audio description in Jetpack Compose
Videos should include audio description when important visual details are shown which you cannot hear.
- Live captions
Live captions in Jetpack Compose
Captions should be provided in real-time to enable users to understand what is being said in live videos.
- Captions
Captions in Jetpack Compose
Captions should be provided to enable users to understand what is being said in videos.
- Transcript
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.
Screen code samples
- Reduced animations
Reduced animations in Jetpack Compose
Content which conveys a sense of motion can be a barrier for users.
- Contrast
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.
- Dark mode
Dark mode in Jetpack Compose
Dark mode darkens background colors and provides a more comfortable viewing experience in low light.
- Frequent flashes
Frequent flashes in Jetpack Compose
Rapidly flashing images or views can cause seizures for some users.
- Descriptive headers
Descriptive headers in Jetpack Compose
Screens should have descriptive headers, this helps users find specific content and orient themselves within your app.
- Descriptive labels
Descriptive labels in Jetpack Compose
Screens should have descriptive labels, these help users recognize which purpose controls have.
- Screen orientation
Screen orientation in Jetpack Compose
Apps should adapt to the preferred display orientation of the user.
- Reflow
Reflow in Jetpack Compose
Content on the screen should reflow based on the users' preferences.
- Search functionality
Search functionality in Jetpack Compose
Users might have difficulty finding a specific screen.
- Skip content
Skip content in Jetpack Compose
It can be helpful for users to skip repeated blocks of content.
- Adjustable timing
Adjustable timing in Jetpack Compose
Everyone, including people with disabilities, should have adequate time to interact with your app.
- Screen title
Screen title in Jetpack Compose
Each screen should have a descriptive title, which helps users with identifying the screen.
Text code samples
- Bold text
Bold text in Jetpack Compose
Apps should use bold text when users have indicated this as a preference in the system settings.
- Text element
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.
- Localization
Localization in Jetpack Compose
Assistive technologies, such as the screen reader, use the locale for the pronunciation of utterances.
- Scale text
Scale text in Jetpack Compose
Apps should scale text to the size specified by users in the system settings.
- Text spacing
Text spacing in Jetpack Compose
Content should adapt to increased spacing between lines, words, letters, and paragraphs.
- Text truncation
Text truncation in Jetpack Compose
Text should never get truncated in your app, even when users have enlarged their font size.