When to use the button element

A button element or tag defines a clickable button. There are types of buttons:

• button
• reset
• submit

W3Schools explains in detail which type to use and when.

A <button> element is a semantic tag with a specific role: identifying “an element as a button to assistive technology such as screen readers”.

A <button> tag should be used when the following actions are needed:

• submitting a form
• opening a dialog box
• canceling an action
• performing a command such as inserting a new record or displaying information

A <button> tag should not be used when its only purpose is to style a link! This causes an accessibility error. Site Improve, the UTHealth Houston provided software that analyzes our websites, describes the error as “Role with implied hidden content has keyboard focus”. By default, a <button> tag has focus.

Keyboard focus allows visitors with disabilities to use the tab key to travel throughout the page to elements with focus. Since the <button> tag is incorrectly used—not following one of the examples listed above— this will mislead the user.

---