Menu icon Foundation
Submit buttons for forms: do you use an <a> or?

I'm not really getting the rationale behind the overabundance of <a>s in the code at http://foundation.zurb.com/docs/components/buttons.html; and the lack of representation for the other elements.

Short of one mention, and one line, both under the Accessibility section, no mention is made of any other element (why not <button>, or <input> for example?). It almost seems as if (due to the overwhelming overrepresentation) the documentation were saying "we really designed this for <a>s". Is that really the case?

(Small aside: the line that mentions using other elements, I have a problem with. Quote: "If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable." If a button is focusable, I expect to be able to trigger it with the spacebar. Or the Enter key. Unfortunately, when you've got a div or a span, you can't. So is this really useful, or even constructive?)

I get that you can use <a>s for cases where no forms are involved, but what of your standard "submit" button where a form is involved? Wouldn't using a <button> resolve all the issues that you would have using an <a>? 1. It's focusable. 2. When focussed, you can trigger it with the spacebar. 3. You can conveniently press <Enter> to submit the form. What do other folks use for your submit button/s?

buttonsforms

I'm not really getting the rationale behind the overabundance of <a>s in the code at http://foundation.zurb.com/docs/components/buttons.html; and the lack of representation for the other elements.

Short of one mention, and one line, both under the Accessibility section, no mention is made of any other element (why not <button>, or <input> for example?). It almost seems as if (due to the overwhelming overrepresentation) the documentation were saying "we really designed this for <a>s". Is that really the case?

(Small aside: the line that mentions using other elements, I have a problem with. Quote: "If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable." If a button is focusable, I expect to be able to trigger it with the spacebar. Or the Enter key. Unfortunately, when you've got a div or a span, you can't. So is this really useful, or even constructive?)

I get that you can use <a>s for cases where no forms are involved, but what of your standard "submit" button where a form is involved? Wouldn't using a <button> resolve all the issues that you would have using an <a>? 1. It's focusable. 2. When focussed, you can trigger it with the spacebar. 3. You can conveniently press <Enter> to submit the form. What do other folks use for your submit button/s?

Bob Sawyer over 4 years ago

I've been successful using <button class="button">Submit</button> - it picks up the same styling as <a class="button">Submit</a> and it works correctly when submitting forms, etc.

Rafi Benkual over 4 years ago

All of the current accessibility was added onto Foundation at version 5.4. We were not able to re-write the codebase and cause breaking changes for people. The next version will be accessible from the ground up. The buttons will be <button class="button"> and we won't style button tags by default.

Buttons can be tabbed to by default so you don't need a tab-index.
Can you explain this a bit more?

Unfortunately, when you've got a div or a span, you can't. So is this really useful, or even constructive?)

If you're passionate about accessibility, we need people to help with testing and feedback on the next version.

jf over 4 years ago

The buttons will be and we won't style button tags by default.

Sorry, but I dont get what you mean. Can I still use <button class="button"> and have it look like it does now, like <a class="button">?

Buttons can be tabbed to by default so you don't need a tab-index.

Actual <button>s, yes. But not <a class="button">s!

Can you explain this a bit more?

Unfortunately, when you've got a div or a span, you can't. So is this really useful, or even constructive?)

To answer your question, let me quote that entire paragraph:

(Small aside: the line that mentions using other elements, I have a problem with. Quote: "If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable." If a button is focusable, I expect to be able to trigger it with the spacebar. Or the Enter key. Unfortunately, when you've got a div or a span, you can't. So is this really useful, or even constructive?)

My point is making a div or a span button focusable is just bad UI when you can't do anything with it. The point of making a UI element focusable is so that you can do something with it. Tab to a text input? You can type in it. Tab to a select input? You can choose from it using the arrow keys. Tab to a button? You can hit the spacebar. Well unfortunately when you've got a button-like div or span, and you make that focusable, you set up false expectations where the UI is concerned, because you won't be able to hit the spacebar and trigger the "button".

Rafi Benkual over 4 years ago

Thanks for the clarification!

In the next version, we won't be styling the button tag itself as we do now. So if you want the Foundation button style, you would do <button class="button"> .

We would not suggest people use tabindex on an element that the user cannot interact with.

It's more of a general statement referencing

<div> and <span> elements are NOT by default in the tab order; button and input are. <a> elements without an href attribute are also NOT in the tab order. Elements typically not in the tab order can be added by setting the tabindex attribute to 0 on that element.

from: http://itstiredinhere.blogspot.com/2014/08/the-anchor-button-bad-for-accessibility.html

For these reasons, we'll be changing how <button> is used in the next version and get away from <a href="button">