Trying to add an offscreen form submit option

Question

I'm trying to use a submit input field that I placed offscreen but the screenreader for Android (Talkback) doesn't let me submit the form when I double tap. I did the same thing for IOS but the IOS screenreader (Voiceover) does register the double tap as a form submit

Does Talkback not let you interact with non-visible objects?

The CSS class I'm using is:

    .hidden 
    {
        position:absolute;
        left:-10000px;
        top:auto;
        width:1px;
        height:1px;
        overflow:hidden;
     }

Here is a link to a jsfiddle that is similar to what I'm trying to accomplish: https://jsfiddle.net/uyk0uLx4/

If Talkback doesn't support form submits for offscreen submit buttons what is the recommended way to get offscreen form submissions to work?

Answer 1

Offscreen buttons are bad ways for handling accessibility issues (which are not limited to screenreaders users).

For instance, an eye-tracking accessibility software can't use hidden buttons. A keyboard-only user can't know where the focus will go when tabbing through the content.

So the best way to solve your problem is to make the button visible.

That being said, using a 1 pixel transparent image button is a working solution for your problem and accessible for screenreaders users (although not accessible for everyone).