Android Talkback reads text visually positioned above input aloud

Question

I am trying to optimize a few components for screen readers, however Android Talkback proves to be a challenge....

Here is a very simplified example for the code:

<div class="wrapper">
 <form>
  <span role="presentation" aria-hidden="true">
   This should not be read by Talkback
  </span>

  <input aria-label="This should be read by Talkback" />
 </form>
</div>

The text inside the span is updated dynamically, and is positioned absolutely over the input - just to appear like an animated placeholder, without actually being read by screen readers. That is what the aria-label is for. However, TalkBack still seems to recognize the span - so it reads the content of the aria-label first, then continues reading the text in the span... role "presentation" or role "none" did not prevent this, neither did moving the text even further from the input. (For example, outside the form). Is there any way to prevent this?

Answer 1

The solution in my example was already enough to fix the issue. aria-hidden prevents the span being focusable, and if the span is located before (and not after), TalkBack will not interpret the text as being part of the input.