WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Rakesh P
Date: Dec 21, 2016 9:17PM

I second, using <button> is not an a11y problem and definitely not 3.2.2.

Thanks & Regards
Rakesh

On Thu, Dec 22, 2016 at 3:08 AM, Mallory < <EMAIL REMOVED> > wrote:

> 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
> > > > > > > > > > > > > > >