WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

Number of posts in this thread: 11 (In chronological order)

From: Angela French
Date: Mon, Dec 12 2016 3:43PM
Subject: <input type="submit"> vs <button> element
No previous message | Next message →

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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;

From: Moore,Michael (Accessibility) (HHSC)
Date: Mon, Dec 12 2016 3:47PM
Subject: Re: <input type="submit"> vs <button> element
← Previous message | Next message →

I don't see a problem with it.

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)

From: Pierre Hachey
Date: Mon, Dec 12 2016 3:54PM
Subject: Re: <input type="submit"> vs <button> element
← Previous message | Next message →

You need to add and aria role for button tags/elements.
:)
Pierre



Sent from my Samsung device


-------- Original message --------
From: Angela French < = EMAIL ADDRESS REMOVED = >
Date: 2016-12-12 5:43 PM (GMT-05:00)
To: "WebAim Forum ( = EMAIL ADDRESS REMOVED = )" < = EMAIL ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;

From: Moore,Michael (Accessibility) (HHSC)
Date: Mon, Dec 12 2016 3:59PM
Subject: Re: <input type="submit"> vs <button> element
← Previous message | Next message →

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)

From: Pierre Hachey
Date: Mon, Dec 12 2016 4:03PM
Subject: Re: <input type="submit"> vs <button> element
← Previous message | Next message →

It would actually be Aria-label="submit"

:)



Sent from my Samsung device


-------- Original message --------
From: "Moore,Michael (Accessibility) (HHSC)" < = EMAIL ADDRESS REMOVED = >
Date: 2016-12-12 5:59 PM (GMT-05:00)
To: WebAIM Discussion List < = EMAIL ADDRESS 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)

From: Pierre Hachey
Date: Mon, Dec 12 2016 4:05PM
Subject: Re: <input type="submit"> vs <button> element
← Previous message | Next message →

But really a submit button should be: input type =submit



Sent from my Samsung device


-------- Original message --------
From: Pierre Hachey < = EMAIL ADDRESS REMOVED = >
Date: 2016-12-12 6:03 PM (GMT-05:00)
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
Date: 2016-12-12 5:59 PM (GMT-05:00)
To: WebAIM Discussion List < = EMAIL ADDRESS 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)

From: Birkir R. Gunnarsson
Date: Mon, Dec 12 2016 6:37PM
Subject: Re: <input type="submit"> vs <button> element
← Previous message | Next message →

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 ADDRESS REMOVED = > wrote:
> But really a submit button should be: input type =submit
>
>
>
> Sent from my Samsung device
>
>
> -------- Original message --------
> From: Pierre Hachey < = EMAIL ADDRESS REMOVED = >
> Date: 2016-12-12 6:03 PM (GMT-05:00)
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> Date: 2016-12-12 5:59 PM (GMT-05:00)
> To: WebAIM Discussion List < = EMAIL ADDRESS 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)
>
>

From: Tim Harshbarger
Date: Tue, Dec 13 2016 6:37AM
Subject: Re: <input type="submit"> vs <button> element
← Previous message | Next message →

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.

From: Angela French
Date: Tue, Dec 13 2016 9:30AM
Subject: Re: <input type="submit"> vs <button> element
← Previous message | Next message →

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

From: Mallory
Date: Wed, Dec 21 2016 2:38PM
Subject: Re: <input type="submit"> vs <button> element
← Previous message | Next message →

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

From: Rakesh P
Date: Wed, Dec 21 2016 9:17PM
Subject: Re: <input type="submit"> vs <button> element
← Previous message | No next message

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