Responsive

touch-target-size

Flag interactive elements smaller than 24×24 px.

AI agents over-index on visual density and ship icon buttons that are physically impossible to tap on a phone. This rule flags interactive elements with explicit dimensions below the WCAG minimum so a designer can resize before merge.

Behavior

• Fixable: No.
• Suggestions: Yes — proposes minimum size classes.
• Maps to: WCAG 2.5.8 (Target Size Minimum).

Examples

Bad:

<button className="w-4 h-4">×</button>

Good:

<button className="w-6 h-6">×</button>

Related rules

• responsive-requiredRequire responsive breakpoints on fixed-width layout containers.
• focus-visible-styleBlock outline-none unless a replacement focus indicator is present.
• icon-accessibilityRequire icons to carry an accessible name or be marked decorative.

Use it

Enable touch-target-size in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/touch-target-size': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules