WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Angela French
Date: Dec 13, 2016 9:30AM

I think what my vendor (Siteimprove) was trying to tell me was that old technologies wouldn't recognize the <button> element, thus one should go with <input>

Angela French

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Monday, December 12, 2016 5:37 PM
To: WebAIM Discussion List
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/>;
>
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.