WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Tim Harshbarger
Date: Dec 13, 2016 6:37AM

I just did a quick search because I thought I remember seeing something related to this discussion. I believe it is also valid to include type="submit" on a button element. It even possibly looks like type="submit" is the default state of the button element.

I don't think it changes any answers to the question, but it was something I hadn't been aware of until recently so I thought I would share since it seems related to this topic.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Monday, December 12, 2016 7:37 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] <input type="submit"> vs <button> element

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)
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Pierre Hachey
> Sent: Monday, December 12, 2016 4:54 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] <input type="submit"> vs <button> element
>
> You need to add and aria role for button tags/elements.
> :)
> Pierre
>
>
>
> Sent from my Samsung device
>
>
> -------- Original message --------
> From: Angela French < <EMAIL REMOVED> >
> Date: 2016-12-12 5:43 PM (GMT-05:00)
> To: "WebAim Forum ( <EMAIL REMOVED> )"
> < <EMAIL REMOVED> >
> Subject: [WebAIM] vselement
>
> Is there any reason why this would not be accessible:
>
> <button >Submit</button>
>
>
>
> The accessibility evaluator I am using flags this under 3.2.2
>
>
>
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > > > > > > > > > > > > >


--
Work hard. Have fun. Make history.