Motion & Animation

icon-accessibility

Require icons to carry an accessible name or be marked decorative.

Detects icons (Lucide, Heroicons, Radix) that ship without aria-label on the parent button or aria-hidden on the icon itself. Icon-only buttons are an AI staple; without explicit a11y treatment they are invisible to screen readers.

Behavior

• Fixable: Yes — auto-adds aria-hidden to decorative icons.
• Suggestions: Yes.
• Maps to: WCAG 1.1.1 (Non-text Content), 4.1.2 (Name, Role, Value).

Examples

Bad:

<button><X /></button>

Good:

<button aria-label="Close dialog"><X aria-hidden /></button>

Related rules

• image-alt-textRequire meaningful alt text on every <img> element.
• focus-visible-styleBlock outline-none unless a replacement focus indicator is present.
• aria-validationForbid invalid ARIA roles and unknown aria-* attributes.

Use it

Enable icon-accessibility in your eslint.config.js:

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

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/icon-accessibility': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules