Ion-input accessible label not announced by Android TalkBack despite correct Accessibility Tree

Ionic Framework
1

Hi Ionic team,

I’m investigating an accessibility issue with ion-input on Android and wanted to check whether others have observed the same behavior.

Environment

  • Ionic 8.x
  • Angular 22
  • Android (multiple devices)
  • TalkBack
  • Chrome DevTools Accessibility Inspector

Scenario

Using Ionic’s recommended label property:

<ion-input
  type="email"
  label="Email address"
  labelPlacement="stacked"
  placeholder="e.g. user@example.com">
</ion-input>

Accessibility Tree

Chrome DevTools shows the accessible name is computed correctly:

Name: "Email address"

Role: textbox

aria-labelledby="ion-input-1-label"

The internal native input correctly references the generated label.

VoiceOver (iOS)

VoiceOver announces:

Email address, text field, is editing, e.g. user@example.com

This is the expected behavior.

TalkBack (Android)

TalkBack announces only:

e.g. user@example.com, edit box

The visible label (“Email address”) is not announced.

Additional investigation

I tested four different approaches to associate an accessible name with ion-input:

  • Using Ionic’s built-in label property – VoiceOver announced the label correctly, but TalkBack did not.
  • Using a native HTML <label> with the for attribute – Neither VoiceOver nor TalkBack announced the label correctly.
  • Using aria-labelledby – VoiceOver announced the label correctly, but TalkBack did not.
  • Using aria-label – VoiceOver announced the accessible name correctly, but TalkBack did not.

In all cases where the accessible name was expected to be exposed (except the native <label> example), Chrome DevTools’ Accessibility Tree correctly computed the accessible name. However, TalkBack continued to announce only the placeholder text instead of the computed accessible name. This suggests the accessible name is generated correctly but is not consistently spoken by TalkBack in these scenarios.

Questions

  1. Has anyone observed the same behavior with ion-input on Android?
  2. Is this a known limitation of TalkBack or Android WebView?
  3. Has this been reproduced on newer versions of Ionic or Android?
  4. Is there any recommended workaround that does not involve manipulating the Shadow DOM or replacing ion-input with native HTML inputs?

At the moment, we’re continuing to use Ionic’s recommended label property because it generates the correct accessibility tree and works correctly with VoiceOver. However, we’d like to understand whether this TalkBack behavior is a known platform limitation or whether there’s something we’re missing.

Thanks!