0

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?

hktir
  • 99
  • 5

1 Answers1

0

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).

Adam
  • 17,838
  • 32
  • 54
  • What do you mean by a transparent image button? Is that just adding a background css property to the button? – hktir Apr 22 '16 at 07:46
  • @hktir See http://stackoverflow.com/questions/3381609/button-image-as-form-input-submit-button – Adam Apr 22 '16 at 18:06
  • Is there a difference between using a transparent image button vs a standard button? Both seem to be clickable if I don't use the -10000 px CSS attribute and both can be accidentally clicked on by non screen reader users. – hktir Apr 25 '16 at 03:28
  • No difference, but the best way is still to have a visible button. – Adam Apr 26 '16 at 07:50