How To Test Touch Target Size to Meet Accessibility Standards
Updated: Apr 30
How do you test size of buttons, touch targets, hotspots and links by keeping UX and accessibility standards in mind? Here you learn how to do it in 4 simple steps and makes huge difference for your users especially when designing for elderly people or those suffering from Arthritis.
Here is how to do it in 4 steps:
1. Plugin Installation:
Download Adee app plugin for Sketch or Figma or Adobe XD > Open Adee plugin from plugin menu > Select the touch size tab (hand icon).
2. Select a device:
From the drop down menu select a device you want to test your touch target size in it. There are a variety of devices based on what is available on the design tools such as Figma, Sketch and Adobe XD. Currently, this list is divided in two categories of Android devices and Apple devices. It's recommended to try various type of devices for testing your touch target size.
3. Select your touch target:
Your touch target could be a text link, button, image, icon and so on. Just keep in mind that this part in Sketch is a bit different from Figma:
In Figma you have access to all shapes, fonts and there is NO need to create hotspot or prototype.
In Sketch you also have access to hotspot as well as all other type of layers. Just remember that your layers needs to have unique name otherwise it will be confusing for you when testing.
Test results:
The image below shows in summery what Adee touch target size checker does afterwards and what you can learn from your test:
As it is mentioned in the guidelines such as Android accessibility help, designers needs to consider that touch targets consist of the area that responds to user input. Touch targets extend beyond the visual bounds of an element: An element like an icon may appear to be 25x25dp but the padding surrounding it comprises the full 48x48dp touch target.