Accessible Buttons

A Button is an interactive element that cause an action on a page or submit a form. For a long time now, we have had the <button> tag. Developers should use these for this purpose.

This may seem obvious to many developers. Unfortunately there is a lot of code out there that uses <a> tags to do the work of a <button>. Marking them up this way is an accessibility issue, since screen reader users will assume that pressing it will go to another page. When I review code like this, it makes me sad. If you do this in a new project, think about how sad I will be, and change your ways.

This page covers how to make buttons in three ways. Review all scenarios and decide which is best for your use-case (but read the disclaimers made before you make that decision).

An HTML Button.

This is the best solution to use, especially when building from scratch.

The most bulletproof way to make a button. It "just works" for everyone.

The following is a <button> tag with a <label> tag describing what it is for.

If you are sure you want to give Facebook your data, push this:

Code Walkthrough of the Above Example

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

Wrap text

☜ Scroll to read full source ☞

A link with the role of button

If you already are using a component similar to this in existing work that is not accessible, go to the developer walkthrough of this section to see we made our implementation accessible.

I can't tell you how many times I have seen buttons marked up as links on a project. When the project is an older one, and it would take a long time to refactor the existing functionality to change the "links that are actually buttons" to <button> tags, it makes sense to add the ARIA role="button" to the existing <a>. If you decide to do this, you should first review all the steps below and see what would be more work: refactoring the code to use real HTML buttons, or to add the extra JS to the codebase to make the "faux buttons" accessible.

If you are sure you want to give Facebook your data, push this: Submit

Code Walkthrough of the Above Example

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

Wrap text

☜ Scroll to read full source ☞

A DIV with a role of button

This works, but For the Love of God and All That is Holy, don't do this.

There have been a few projects (usually, in my experience, in ones done in React and Angular for some reason) where I have seen developers use <div> tags to make buttons.

This hurts my brain. It goes against the ideas of semantic HTML and it makes Tim Berners-Lee cry. Do you really want to make the Father of the Web cry? What kind of monster are you?

If you have an existing project that has code built this way, read the steps below and determine if it would be less work to do this instead of using real HTML <button> tags.

If you are sure you want to give Facebook your data, push this:

Submit

Code Walkthrough of the Above Example

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

Wrap text

☜ Scroll to read full source ☞

Disabled HTML Button.

There are two ways of making a button disabled.

Use the disabled attribute. This removes the button from the keyboard tabbing order. It also doesn't prevents click events from being fired.
Use aria-disabled="true" attribute. This doesn't remove the button from the keyboard tabbing order. It also doesn't prevents click events from being fired except for Chrome on Google Android with Talkback on (Thanks to Noel Tibbles for pointing this out).

The following is disabled with the disabled attribute

If you are sure you want to give Facebook your data, push this:

THe following is disabled with aria-disabled="true"

If you are sure you want to give Facebook your data, push this: