Skip to contentView the source on GitHub

no-missing-alt

All <img>, <Image>, and <Picture> elements must include an alt attribute.

Accessibilityerror by default ESLint rule

astro-doctor/no-missing-alt

Why it matters

Missing alt text leaves screen-reader users with no context for images. An empty alt="" is only acceptable for decorative images that carry no information.

See the difference

Incorrect

No alt attribute

astroIncorrect example
---
import { Image } from 'astro:assets'
import logo from '../assets/logo.png'
---
<Image src={logo} width={120} height={40} />

Correct

Descriptive alt text

astroCorrect example
---
import { Image } from 'astro:assets'
import logo from '../assets/logo.png'
---
<Image src={logo} alt="Astro Doctor logo" width={120} height={40} />

Configure this check

Override the default severity in your ESLint config:

javascripteslint.config.js
import astroDoctorPlugin from '@santi020k/eslint-plugin-astro-doctor'

export default [
  astroDoctorPlugin.configs.recommended,
  {
    rules: {
      'astro-doctor/no-missing-alt': 'error',
    },
  },
]

Or set the severity for CLI scans in doctor.config.ts:

typescriptdoctor.config.ts
export default {
  rules: {
    'astro-doctor/no-missing-alt': 'error',
  },
}

Use 'error', 'warn', or 'off'. The configuration guide covers presets and per-file overrides.

Keep exploring accessibility

Browse every rule and project audit