WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Mallory
Date: Dec 21, 2016 2:38PM


With regards to older technologies, button would still work, however
older
IE had the default button type not as submit or wouldn't actually submit
a form but instead the text inside the button (as if it were an input
with
a value).
Using the input type=submit is safer if you've got real old IE to worry
about.

It shouldn't be flagged as an a11y problem, but a known-legacy-UA
problem.

_mallory

On Tue, Dec 13, 2016, at 05:30 PM, Angela French wrote:
> 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.
> > > at http://webaim.org/discussion/archives
> > > > >