Ensure Minimum Target Size for Interactive Controls

• Targets must be at least 24 by 24 CSS pixels.

• If targets are smaller than 24 by 24 pixels, they should be spaced so that they do not overlap when a 24-pixel diameter circle is centered on each.

• Alternatives are provided if targets are smaller than the minimum size.

• A button on a webpage should be at least 24 by 24 pixels in size, or spaced far enough from other elements so users can click on it easily.

• If a link within a block of text is smaller than 24 by 24 pixels, it should not be so close to other links or elements that it’s hard to click accurately.

• Spacing: Targets smaller than 24 by 24 pixels can be used if they are positioned so that a 24-pixel circle centered on each target does not overlap with other targets or their circles.

• Equivalent: If a similar function can be accessed via a larger control elsewhere on the same page.

• Inline: When the target is part of a sentence or text block where it is impractical to meet the size requirement.

• User Agent Control: If the size of the target is controlled by the browser or user agent and cannot be adjusted by the content author.

• Essential: When a specific design size is crucial for conveying the content or is legally required.

• Ensure all interactive elements are easily tappable by making them at least 24 by 24 pixels or by spacing them appropriately.

• Provide alternative ways to access functions if some controls are too small to meet the minimum size requirements.

• Use browser developer tools or design software to measure the size of interactive controls.

• Check if smaller targets are positioned with enough spacing so they don’t overlap when a 24-pixel diameter circle is applied.

• Test with a variety of input methods (mouse, touch) to ensure ease of activation.

• Verify that alternative methods are available where minimum size requirements cannot be met.