Android Talkback reads text visually positioned above input aloud

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?

Solution

The role attribute only changes the type of element that Talkback and other screen readers announce. Setting it to presentation or none just removes the semantic type of element. A <span> does not have a native role by default so it's essentially presentation/none implicitly and won't have any effect.

aria-hidden is the key. It will hide the element from the screen reader. (CSS display:none and visibility:hidden will also hide an element from the screen reader but it also makes the element invisible to sighted users too.)

Your code example should work just fine with Talkback. However, you mentioned that you dynamically change the contents of the <span>. That's not a problem but is there a chance that when you updated the text, the aria-hidden got removed?

I have used aria-hidden on Android without any trouble.