Accessibility

Compose Multiplatform provides features essential for meeting accessibility standards, such as semantic properties, accessibility APIs, and support for assistive technologies, including screen readers and keyboard navigation.

The framework enables the design of applications that comply with the requirements of the European Accessibility Act (EAA) and the Web Content Accessibility Guidelines (WCAG).

Semantic properties

To provide context for services such as accessibility, autofill, and testing, you can define the meaning and role of a component using semantic properties.

Semantic properties are the building blocks of the semantic tree, which is a simplified representation of the UI. When you define semantic properties in composables, they are automatically added to the semantic tree. Assistive technologies interact with the app by traversing the semantic tree, not the entire UI tree.

Key semantic properties for accessibility:

contentDescription provides a description for non-textual or ambiguous UI elements like IconButton, and FloatingActionButton. It is the primary accessibility API and serves for providing a textual label that screen readers announce.
Modifier.semantics { contentDescription = "Description of the image" }
role informs accessibility services about the UI component's functional type, such as button, checkbox, or image. This helps screen readers interpret interaction models and announce the element properly.
Modifier.semantics { role = Role.Button }
stateDescription describes the current state of an interactive UI element.
Modifier.semantics { stateDescription = if (isChecked) "Checked" else "Unchecked" }
testTag assigns a unique identifier to a composable element for UI testing with the Espresso framework on Android or XCUITest on iOS. You can also use testTag for debugging or in specific automation scenarios where a component identifier is required.
Modifier.testTag("my_unique_element_id")

For a full list of semantics properties, see the Jetpack Compose API reference for SemanticsProperties.

Traversal order

By default, screen readers navigate through UI elements in a fixed order, following their layout from left to right and top to bottom. However, for complex layouts, screen readers may not determine the correct reading order automatically. This is crucial for layouts with container views, such as tables and nested views, that support the scrolling and zooming of contained views.

To ensure the correct reading order when scrolling and swiping through complex views, define traversal semantic properties. This also ensures correct navigation between different traversal groups with the swipe-up or swipe-down accessibility gestures.

The default value of the traversal index of a component is 0f. The lower the traversal index value of a component, the earlier its content description will be read relative to other components.

For example, if you want the screen reader to prioritize a floating action button, you can set its traversal index to -1f:

@Composable
fun FloatingBox() {
    Box(
        modifier =
        Modifier.semantics {
            isTraversalGroup = true
            // Sets a negative index to prioritize over elements with the default index
            traversalIndex = -1f
        }
    ) {
        FloatingActionButton(onClick = {}) {
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "Icon of floating action button"
            )
        }
    }
}

What’s next

Learn more about accessibility features for iOS:

High-contrast theme
Test accessibility with XCTest framework
Control via trackpad and keyboard
Synchronize the semantic tree with the iOS accessibility tree (for Compose Multiplatform 1.7.3 and earlier)

Learn more about accessibility features for desktop:

For implementation details, see the Jetpack Compose documentation.

Last modified: 03 July 2025