WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: <input type="submit"> vs <button> element

for

From: Birkir R. Gunnarsson
Date: Dec 12, 2016 6:37PM

There is no accessibility violation using a <button> element rather
than <input type="submit">, None, Nada. You should file an issue with
the tool vendor for falsely reporting an accessibility issue.

The only potential difference between the two is that, yes, <input
type="submit"> main purpose is to submit a form, while the <button>
element is just a general purpose JavaScript trigger.
Both map to role="button" in the accessibility tree.
Your button has a valid accessible name (a <button>'s accessible name
comes from the content inside it, you you'd use the value attribute to
provide the accessible name for <input type="submit">).
There is another possible difference (at least in some browsers). If
the <input type="submit"> is placed inside a <form> element, it
becomes the primary action for the form. When users press enter with
focus on any text input field in the form (excluding <textarea> which
is multi line), the button is automatically triggered, whereas with a
<button> you probably have to tab to it and then trigger it, and I
think that is a better user experience in most cases, but 3.2.2 does
not apply to either of these, 3.2.2 states in fact that it does not
apply to links and buttons).

You can use aria-label="accessible name" on any element, but you
should not do so unless it's impossible to use the native HTML
labeling techniques (this example eeds no ARIA).


On 12/12/16, Pierre Hachey < <EMAIL REMOVED> > wrote:
> But really a submit button should be: input type =submit
>
>
>
> Sent from my Samsung device
>
>
> -------- Original message --------
> From: Pierre Hachey < <EMAIL REMOVED> >
> Date: 2016-12-12 6:03 PM (GMT-05:00)
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] vselement
>
> It would actually be Aria-label="submit"
>
> :)
>
>
>
> Sent from my Samsung device
>
>
> -------- Original message --------
> From: "Moore,Michael (Accessibility) (HHSC)"
> < <EMAIL REMOVED> >
> Date: 2016-12-12 5:59 PM (GMT-05:00)
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] vselement
>
> Why would you need <button aria-role="button"> the native semantics of
> <button> do not need to be overridden. Now if you had this <span
> role="button">Submit</span> then you would need the aria-role. You would
> also not be allowing the native semantics of button to work for you and
> would not be following best practices.
>
> The checker is possibly complaining because you are using <button> instead
> of <submit> but the native handling of the <submit> element by the browser
> may not be what is desired in this case, which is why your developers may
> have used the more generic <button> element.
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission
> Civil Rights Office
> (512) 438-3431 (Office)
>
>