Provide buttons with a large target size

Comparison of a large button size (accessible) vs. very tiny ones (inaccessible)
Image description: Accessible and inaccessible comparison of button size. The accessible example shows a hand pressing a large button (labeled button). The inaccessible example shows the same had with the finger on a series of 6 small buttons.

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

Large buttons (44 px) are accessible for people with physical disabilities who have dexterity needs.

Large buttons are both easier to see and manipulate. When people interact with small buttons, it's very likely they might accidentally miss the button or click on the wrong button, especially if they have a motor/dexterity-related disability, such as paralysis or cerebral palsy.

This references WCAG criterion 2.5.5 Target Size (Level AAA).

How to Implement This

WCAG 2.1 recommends a target size of at least 44 x 44 pixels. However, the button can be smaller in the following scenarios:

  • Equivalent - there is another button that serves the same purpose and is at least 44 x 44 pixels
  • Inline - it's a link in a block of text
  • User agent control - the size of the button is set by the user
  • Essential - a certain presentation is essential

Target Size

There are a couple ways you can accomplish a large target size.

You can expand the size of the entire button so that it’s at least 44px wide in one direction. Sometimes, that might make the button look overwhelming, especially for icons. In that case, you can make the button smaller but keep the target size large by using a link area or increasing the padding around the button.

Text and icon buttons at 44 pixels and slightly smaller.
Image description: Example of 2 buttons, 1 text and 1 icon, that have large target sizes. The button is 110x44 pixels and the garbage can icon at 44x44. In another version, the buttons look visually smaller but the target size is the same.

‍


Buttons for Touch Screens

Even though large buttons are only required for WCAG level AAA, this rule becomes more critical when designing for a touch screen, such as a phone or tablet.

Human fingers are larger than a computer mouse. Unless we use a screen reader, we don’t have the option of tabbing through all the buttons as we would with a computer and keyboard. Therefore, it’s important that buttons on mobile are a large size to accommodate the human error that could come with large fingers and hand movement.

The same display with a smaller button on desktop and larger on mobile.
Image description: Example of the same page on desktop and mobile, showcasing a smaller button and mouse cursor on desktop and a larger button size and hand on mobile. The page displays some black text and a purple button.

‍
‍

Additionally, think about button placement on mobile. Smartphones are increasingly getting bigger and bigger. A human thumb can easily access the lower region of the phone. However, it gets increasingly difficult to access buttons at the top.

Interesting Further Reading

‍

‍

How to Test This

The Android Accessibility Checker can automatically scan for buttons and suggest those that need larger touch target sizes.

You can also consider the Adee plugin to test for button sizes across multiple devices on Figma and Sketch.

‍

Credits

No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.