What does this accessibility issue mean?
Accessibility issue summary: Insufficient touch target size
On touch-based devices (for example, a smartphone or tablet), a “touch target” refers to an interactive area of the screen that a user can ‘tap’.
Touchscreens may not provide the same level of precision as mouse inputs. Ensuring touch targets are large enough to be easily used on mobile devices helps to ensure that users can interact with a website effectively using touch-based devices. If multiple touch targets are overlapping, the area of overlap should not be included in the measurement of the target size (unless the overlapping targets perform the same action).
Solution:
Touch targets for interactive elements, such as links and buttons, should have a target size of at least 44 x 44 pixels to ensure that they are easy to click or tap on mobile devices.
Example HTML violation: Insufficient touch target size (WCAG Level AA Issue)
<button style="width: 10px; height: 10px; font-size: 8px;">Click Me</button>
<button style="width: 10px; height: 10px;">Click Me</button>
<button id="target" style="width: 10px; height: 10px; font-size: 8px;">+</button>
<button style="margin-left: -10px;">Adjacent Target</button>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>The above HTML violates the target-size accessibility rule because it does not maintain a minimum target size for each interactive element and allows elements to be positioned too closely to each other.
How to fix "Insufficient touch target size (WCAG Level AA Issue)" issue
<button style="width: 44px; height: 44px; font-size: 14px; margin-bottom: 10px;">Click Me</button>
<button style="width: 44px; height: 44px; margin-bottom: 10px;">Click Me</button>
<button id="target" style="width: 44px; height: 44px; font-size: 14px; margin-bottom: 10px;">+</button>
<button style="margin-left: 10px; width: 44px; height: 44px; margin-bottom: 10px;">Adjacent Target</button>
<ul>
<li style="margin-bottom: 10px;">
<a style="font-size: 14px;" href="#">Home</a>
</li>
<li style="margin-bottom: 10px;">
<a style="font-size: 14px;" href="#">About</a>
</li>
<li style="margin-bottom: 10px;">
<a style="font-size: 14px;" href="#">Contact</a>
</li>
</ul>All buttons and links are now at least 44x44 pixels in size, which is the minimum recommended target size for interactive elements according to WCAG.
Margins have been added between buttons and list items on the vertical axis to prevent them from being too close to each other.
The text on the buttons has been enlarged to improve readability.
Overlapping of the button "Adjacent Target" and the button with id "target" has been corrected. They are now clearly separated.
