Accessible Buttons – 7 Best Practices for Inclusive Interfaces

Buttons are one of the most important interactive elements on a website.

Users rely on them to perform important actions such as submitting forms, opening menus, starting media, or completing purchases.

However, many websites still implement buttons in ways that make them difficult to understand or activate. According to the WebAIM Million 2025 report, 29.6% of the top 1 million website home pages contained empty buttons, meaning buttons without an accessible label.

These issues can create barriers for users, especially those who rely on screen readers or keyboards to navigate websites.

In this guide, we will look at 7 best practices for designing and coding accessible buttons. You will also learn how to identify and fix inaccessible buttons on your website.

Accessible buttons best practices

To make buttons accessible, you need to consider how they are designed, labeled, and displayed on the page. Following a few simple practices can help ensure that users can easily see, understand, and activate buttons, regardless of how they interact with your website.

Here are 7 best practices for creating accessible buttons:

1. Always use the native <button> element.
2. Write clear and descriptive button labels.
3. Ensure sufficient contrast between button text and background.
4. Provide accessible labels for icon-only buttons.
5. Provide visible focus indicators.
6. Make buttons large enough to activate.
7. Indicate button state when necessary.

Now, let’s look into each of them in detail.

#1. Always use the native <button> element

Use the <button> element instead of <div> or <span> when creating buttons.

Example:

<button type="button">Buy now</button>

The native <button> element has built-in accessibility. It is:

• Keyboard accessible by default.
• Recognized as a button by screen readers.
• Supports focus styles automatically.
• Works with Enter and Space keys.

In contrast, <div> and <span> elements are not keyboard accessible by default, may not be announced as buttons by screen readers, and require extra code to behave like real buttons. So it is best to avoid using them as buttons.

#2. Write clear and descriptive button labels

First, do not leave a button empty. Every button should have a text label.

And that label should clearly communicate what will happen when the button is activated.

Good examples include:

• Buy now
• Download report
• Save changes
• Add to cart

Another important consideration is when multiple buttons on the same page share the same label.

For example, a product listing page may contain several “Buy now” buttons. In these cases, provide additional context programmatically so screen readers can distinguish between them.

For instance, a screen reader might announce “Buy now – Wireless headphones.” This helps users identify which product the button relates to.

Example:

<button type="button" aria-label="Buy now - Wireless headphones"> Buy now </button>

#3. Ensure sufficient contrast between button text and background

Text and interface elements should have enough contrast against their background to remain clearly visible.

Low contrast can make the label difficult to see, especially for people with low vision or color vision deficiencies.

There are two types of contrast you should pay attention to:

1. Contrast between the button text and the button background.
2. Contrast between the button and the page background.

Accessibility guidelines recommend these minimum contrast ratios:

• 4.5:1 for normal text (text smaller than 18pt or 14pt bold)
• 3:1 for large text (text at least 18pt or 14pt bold)

#4. Provide accessible labels for icon-only buttons

Some buttons use only an icon instead of visible text, such as a search icon.

While these icons may be clear to sighted users, screen reader users may not understand what the button does without a proper label.

In such cases, add an accessible label using aria-label that describes the button’s action.

Example:

<button aria-label="Search"> 🔍 </button>

With this label, screen reader users can understand that the button is used for search.

#5. Provide visible focus indicators

Buttons should have clear and visible focus indicators. A focus indicator shows keyboard users which element is currently selected as they navigate through a page.

Common focus indicators include:

• An outline
• A border
• A background color change

Also, ensure that the focus indicator has a strong color contrast so it is easy to see. If the indicator blends into the page or button color, users may miss it. You can use a free color contrast checker for this purpose.

#6. Make buttons large enough to activate

Buttons should be large enough to click or tap easily.

Small buttons can be difficult to activate. This is especially true for people with motor disabilities, tremors, or users on touch devices.

A commonly recommended minimum size is 44 × 44 pixels. This gives users enough space to activate the button comfortably.

Buttons should also have enough space between other clickable elements.

A common practice is to keep at least 8px of spacing between interactive elements so users do not accidentally activate the wrong element.

#7. Indicate button state when necessary

Some buttons can change state after they are activated. For example, a Pause animation button may switch between pausing and playing an animation.

Users should be able to clearly tell the current state of the button.

For sighted users, this can be shown through text changes, icons, or visual styling. For assistive technology users, the state should also be communicated programmatically.

Example:

<button aria-pressed="true">Pause animation</button>

How to find inaccessible buttons on your website

Finding inaccessible buttons manually can be time-consuming, especially on large websites. Automated accessibility testing tools are your friend in these cases. These tools can help you quickly detect issues such as:

• Buttons without labels.
• Buttons with unclear or non-descriptive labels.
• Low color contrast in buttons.
• Buttons with small touch targets.

One such tool is WebYes Accessibility.

It can help you scan multiple pages and identify these issues across your website, making it easier to spot problems and prioritize fixes.

How to test button accessibility manually

In addition to automated testing tools, it is important to manually test buttons on your website. Manual testing helps you verify how buttons actually behave for real users.

Here are a few simple checks you can perform:

• Navigate the page using only the Tab key
  • Ensure every button can be reached
  • Confirm the focus moves in a logical order
• Check for a visible focus indicator
  • The focused button should be clearly highlighted
  • The indicator should be easy to see
• Test button activation with the keyboard
  • Press Enter to activate the button
  • Press Space to activate the button
• Test with a screen reader
  • Ensure the button is announced as a button
  • Ensure the button label is announced clearly

These quick checks can help you identify usability issues that automated tools may miss and ensure that buttons work properly for all users.

Wrapping up

Buttons play a big role in how users interact with your website. If buttons are difficult to see, understand, or activate, some users may struggle to complete important tasks.

By following these best practices, you can make sure your buttons are clear, visible, and easy to use for everyone. Accessible buttons not only support people using keyboards, screen readers, or touch devices, but they also improve usability for all users.