Skip to content
astro-doctor
Accessibilityerror by defaultastro-doctor/no-missing-alt

no-missing-alt

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

Why

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.

Examples

Incorrect

No alt attribute

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

Correct

Descriptive alt text

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

Configuration

Override the default severity in your ESLint config:

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

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

Or in your doctor.config.ts:

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

All rules

Edit this page on GitHub ↗