CODEWITHSUNDEEP
htmlaccessibilitywai-ariawcag
enigment
enigment

Reputation: 3616

Web accessibility: input type="button" that submits

I have some forms that use submit butttons like this: <input type="button" onclick="validateAndSubmit()">

They work fine, but accessibility checkers say there's no submit button in the form, because there isn't one.

I know that type="button" makes it clear that it acts as a button, but I don't know how to indicate to assistive technologies that it acts as a submit button specifically without actually using type="submit". (I'd rather not use an actual submit button, because unexpected javascript errors will submit the form. Of course you can trap errors, it's just less robust in that sense, and I wonder if there's another way.)

Is there an ARIA role or other technique that makes it clear that the button submits the form (assuming everything validates)?

Upvotes: 2

Views: 4373

Answers (4)

Kamirura
Kamirura

Reputation: 19

WCAG does not require you to have a submit button. However there are recommended techniques on wcag saying you could use it to fullfill rule 3.2.2.

Upvotes: 0

QuentinC
QuentinC

Reputation: 14687

I don't agree with the two existing answers.

It is true that having a submit button in a form isn't an obligation. However, if your form is intended to be submitted, there must be a submit button.

The weakness of your button <input type="button" onclick="validateAndSubmit()"> is that you are really obliged to click on this button to trigger the function and submit the form.

However, it is often useful, and most users expect, that the form is submitted when pressing enter while being in any field, not necessarily the submit button. Typical usecase: type your e-mail, tab, type your password, and directly press enter to sign in, instead of taking the mouse to click on "sign in" or press one more time tab and enter.

Your fake submit button doesn't permit this. You should replace it by a true submit button <input type="submit" /> and use the submit event on the form (<form onsubmit="...">).

If your problem is that an unexpected JavaScript error makes the form being submitted with bad inputs, never forget that you must check again the input server-side. And just in case, you are perfectly allowed to use try...catch...finally and do event.preventDefault() in the finally clause if you are submitting via AJAX and if you aren't really sure that your code will never trigger errors; that's not a bad defensive programming solution.

Upvotes: 5

Tsundoku
Tsundoku

Reputation: 2687

<button type="submit" onclick="validateAndSubmit()">Submit</button>

should do the trick. There is no need for an ARIA role (button) in this case, since the button is used here as defined in the HTML specification.

Upvotes: 3

Adam
Adam

Reputation: 18807

Form elements do not need to have a submit button. There's no such obligation.

The accessibility checker you use is wrong about that.

W3C use some examples of forms without submit buttons in their documentation :

Finally, to make the form submittable we use the button element:

Upvotes: 0

Related Questions