Ensure Pointer Target Size is Sufficiently Large

Disabilities Affected: Mobility, Visual

Success Criterion: 2.5.5

Level: AAA

The size of the target for pointer inputs (like buttons, links, controls) must be at least 44 by 44 CSS pixels, except when:

Equivalent: The target is available through an equivalent link or control on the same page that is at least 44×44 pixels.
Inline: The target is in a sentence or block of text.
User Agent control: The size is determined by the user agent and not modified by the author.
Essential: A particular presentation is essential for the information being conveyed.

Why It Matters

Small click/tap targets are difficult to hit accurately for users with motor impairments (like tremors) or those using touchscreens, especially on mobile devices. Providing adequately sized targets reduces frustration and improves usability for everyone, particularly those with dexterity challenges.

Fixing the Issue

Ensure that interactive elements like buttons, standalone icons acting as controls, and other important targets have a clickable area of at least 44×44 CSS pixels. Use CSS width, height, min-width, min-height, and padding to achieve this. Remember that padding increases the clickable area around the content. Test target sizes, especially on mobile views. Inline links within text are exempt.

Good Code Example

Using padding and min-height/width to ensure adequate target size:

Markup
Preview

<style>
  .good-button {
    padding: 10px 15px; /* Adds space inside the button */
    min-height: 44px; /* Ensures minimum height */
    min-width: 44px; /* Ensures minimum width, useful for icon-only buttons */
    border: 1px solid #333;
    background-color: #eee;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex; /* Helps align icon + text if needed */
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Include padding/border in size calculation */
  }

  .icon-button {
     padding: 0; /* Reset padding if needed */
     width: 44px;
     height: 44px;
     /* Other styles as above */
  }
<button class="good-button">Submit Form</button><button class="good-button icon-button" aria-label="Settings">
  <img src="/wp-content/uploads/settings-icon.svg" alt="" style="width: 24px; height: 24px;">
</button><p>This is a paragraph with an <a href="/accessibility-services/full-service-website-remediation/">inline link</a> which does not need to be 44x44px.</p></style>

Bad Code Example

Small buttons or links that are hard to click/tap:

Markup
Preview

<style>
  .small-button {
    padding: 2px 5px; /* Very little padding */
    font-size: 0.8rem; /* Small text */
    /* No min-height or min-width set */
    /* Resulting target size is likely much smaller than 44x44px */
    border: 1px solid #ccc;
  }
  .tiny-icon-link {
     display: inline-block;
     width: 16px; /* Very small target */
     height: 16px;
     /* background-image: url(...); */
  }
<button class="small-button">Go</button><a href="/" class="tiny-icon-link" aria-label="Delete">
   <img src="/wp-content/uploads/delete-icon.png" alt="">
</a></style>

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult