Accessibility not working with text inputs and Android Talkback

You simply cannot tap on an input with the Android Talkback accessibility reader on. The input-cover designed to take the tap event in order to catch and move the input and prevent browser scrolling before the input is focused is capturing the touch. Because it is an empty div with no role, it is not focusable to the accessibility reader. On iOS this is different, as the reader does more of a “tap through” where it will select accessible items that are behind non-accessible items.

This seems like a huge oversight. The only way to access these inputs is via the swipe left/right ability of the accessibility reader, but many accessibility users are only visually impaired and still point and click or use the touch+drag to read whichever element is under their finger. These two methods do not work with the input-cover (which is still necessary to prevent browser scrolling and losing the header/footer).

Hm, that doesn’t sound too good. If I should guess, I would say this just wasn’t a focus yet. I also read about it the first time, so the demand or reports haven’t been here yet as well. But as Ionic is open source, maybe we can fix that.

Can you add some technical detail about what you are talking about?
Which specific elements? How could one test that?

Did you search the Github issues if this is a known problem?
Did you create a Github issue about this yourself?

Thanks for the response.

This happens with anything that uses an ion-input. ion-inputs are the only elements that scroll into view, and as far as I know are the only ones with an input-cover element. I’ve tested simply by turning on Android TalkBack and attempting to do a single tap on an input. Nothing is read. The input-cover element is what receives the tap (which is just an accessibility tap to highlight and read, not a real tap) and Android correctly identifies it as an empty div with no role and thus ignores it. Same if you try pressing down and moving your finger around the screen. Android will read whatever is beneath your finger at the time and does so for everything but the ion-inputs.

I wasn’t able to find a similar github issue, although I may have not been able to string together the right search terms. Maybe with this explanation someone could remember an issue addressing this?

If not, I can create a Github issue. I think the solve would be something simple like giving the input-cover a role of “textbox” and the actual input an aria-hidden when the input is blurred, and after the user has focused the input (first by selecting the input-cover which now has a role, then double tapping to activate), remove the aria-hidden from the input and the role from the input-cover. This would insure the textbox is only read once, while still allowing for the pre-focus tap that allows ionic to override the browser’s scoll into view logic and move the input itself.

I think you can go ahead and create that issue - Ionic people are a lot mor probably to see it there. Your suggested solution also (in theory) sounds good.

Hi Calpoog,

Is there any update regarding finding the solution for this. Please respond ASAP.

Not that I know of. I haven’t checked in a while but I don’t believe there were any updates made in this time that could have fixed the issue.

Work around - add role=“text” to the ion-input element makes it focusable