Touch Target Accessibility

Background Information

At KP, we believe good accessibility is good usability. We want every product to be usable by all of our members. The following case study examines best practices for designing touch target sizes for our users.

Why Does It Matter?

Small touch targets require more accuracy to hit and can be difficult for users with visual or motor impairment to successfully activate. Small or closely grouped touch targets can result in un-intentional taps on surrounding touch targets, causing frustration and confusion. Therefore, touch target sizes should be large and have sufficient space between each element.

DON’T

DO

Research done by the Human Factors and Ergonomics Society showed that in a test of touch screen number entry, the smaller buttons were associated with a greater amount of inaccurate touches. The study notes that large buttons about 20mm in size should be used, stating “anything smaller may result in significant performance decrements.”

Guidelines

What is the best way to implement a touch target? While every situtation is different for various mobile apps, there are consistent rules and guidelines that should be followed.

Encompassing

Touch target size should always encompass the entire area of the tappable element. Making the tappable area smaller than the icon or image displayed is confusing and difficult for users to activate.

DON’T

DO

Sizing

According to Google Accessibility Style guidelines, touch target size should be a minimum of 48 dp. When the tappable icon is smaller than 48 dp the surrounding touch target area should still be a 48 dp area. In the “DO” example below the icon is 30 dp but the surrounding touch target recommendation is 48 dp.

DON’T

DO

Padding

The padding surrounding a touch target should be sufficient enough to avoid accidentally tapping adjacent items. Google Accessibility Style guidelines recommend a minimum of 8 dp of padding between touch targets.

DON’T

DO

Conclusion

Utilizing large touch targets and allowing for space between tappable elements will help make your application delightfully easy to use. Be sure to let developers know what touch target size to use, and thoroughly test your application throughout the development process to ensure every element is easily tappable.

Want to learn more? Check out these case studies below:

	Accessibility for Visual Impairment Statistics about impaired mobile device users. In-depth analysis about visual impairments.
	Accessibility Scanner Using Google Accessibility Scanner to ensure that KP mobile products meet minimal Americans with Disability Act (ADA) standards.
	Cardiac Rehab Android Watch How accessibility affects product design for wearable devices.