This page is in progress -
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
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.
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.
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
- NN: Touch Targets on Touchscreens
- Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes
- Button design for websites and mobile apps
How to Test This
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.