How to make ClickableText accessible to screen readers

Question

This code creates a ClickableText element in Jetpack Compose Composable:

ClickableText(
  text = forgotPasswordAnnotatedString,
  onClick = {
  context.startActivity(intent)
},
  modifier = Modifier
    .padding(top = mediumPadding)
)

The annotated string is defined here to make the text look like a link:

val forgotPasswordAnnotatedString = buildAnnotatedString {
    append(stringResource(R.string.forgot_password))
    addStyle(
        style = SpanStyle(
            textDecoration = TextDecoration.Underline,
            color = Color.White,
            fontSize = 16.sp,
            fontWeight = FontWeight.Medium
        ),
        start = 0,
        end = 21,
    )
}

When I encounter this text using the TalkBalk screen reader in Android, the screenreader does not make it clear that this is clickable text that will do something which tapped on. The reader just reads the text.

Is there a way to make it clear to the screen reader that this text is interactive? Otherwise should I just use a button and style it to look like a link?

Answer 1

Adding .semantics.contentDescription to the Modifier changes what is read by the screen reader. I had to word contentDescription to make it clear that this was a link to reset the your password.

The screen reader still doesn't recognize the element a clickable but hopefully the description will be useful to convey to the user that this element is interactive.

ClickableText(
      text = forgotPasswordAnnotatedString,
      onClick = {
          context.startActivity(intent)
      },
      modifier = Modifier
          .padding(top = mediumPadding)
          // new code here:
          .semantics { 
              contentDescription = "Forgot your password? link"
          }
  )