Buttons and links are not the same.

This button looks like a button.


This button looks like a link:

<button class="inline">

Fully disabled button

A button that uses the disabled attribute will not be focusable, but it is still discoverable by the screen reader while browsing.

<button disabled>

Focusable disabled button

When a button isn’t ready to submit a form yet, but can still be clicked, use aria-disabled="true" to increase perceivability for people using a screen reader. Ex: Clicks submit and is notified of errors in the form.

<button aria-disabled="true">

Avoid icon buttons

Buttons with no visible text (icon only) are inadvisable.

Use your words

You can think of words like a group of symbols that mean things.

Annotations for buttons

If it does something, it’s a <button>

  • Buttons cause an action to occur on the same page
    • Submit a form (even when submission takes you to a new page)
    • Open a menu
    • Launch a modal
    • Expand details
  • A button can look like a link, but it must be coded as a <button>
  • Links take the browser to a different location
    • (Either another page or even another area of the same page)
  • A link can look like a big shiny button but it must be coded as <a> link

Repeating buttons

Sometimes a design will call for multiple buttons with the same text label. In a case like this, aria-label can be used to name each control’s purpose.

<h1>Payment details</h1>
<span>1 Jan, 2024</span>
<button aria-label="Edit payment date">
<button aria-label="Edit payment amount">

Design notes

Related button entries