Label at Front

Any visible text of an interactive view should be at the start of the view's accessible name.

Impact

TalkBack users expect the accessible name announced first when interacting with a control. As a best practice, we recommend having a controls visible text within the name and all other information within the accessible value, hint, or role.

Confirmation

1. Turn on TalkBack
2. Focus the element
3. One of the following will happen:
   • Inaccessible: TalkBack will announce other text before announcing the active control's text
   • Accessible: TalkBack will announce the active control's text first

How to Fix

An issue found by this rule is caused by the visible text missing from the start of the control's content description.

XML

For a provided button:

<Button
   android:id="@+id/email_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginTop="@dimen/xlg"
   android:text="Send"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintTop_toBottomOf="@id/divider2" />

Passing example:

val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Send Email"

Failing example: Note the visible text is not available at the start of the content description.

val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Tap to Send Email"

Compose

Passing example:

Text(modifier = Modifier.semantics { contentDescription = "Send Email" }, text = "Send")

Failing example: Note the visible text is not available at the start of the content description.

Text(modifier = Modifier.semantics { contentDescription = "Click to Send" }, text = "Send")