Every <img> must have a meaningful alt attribute. Without alt text, screen readers either skip the image entirely or read the raw filename ("DSC_0042.jpg"), leaving visually impaired users completely unable to understand the content.
Images without alt text are completely invisible to screen reader users — they either hear nothing or hear a meaningless filename like "DSC_0042.jpg". This affects 2.2 billion people with vision impairments worldwide and also breaks SEO, since search engines rely on alt text to index image content.
BeforeMerge scans your pull requests against this rule and 4+ others. Get actionable feedback before code ships.
Screen readers announce images using their alt attribute. When alt is missing, the screen reader either skips the image entirely (the user does not know it exists) or reads the src attribute ("image slash uploads slash D-S-C-underscore-zero-zero-four-two-dot-jay-peg"), which is worse than useless.
This is not just an accessibility concern. Alt text is also used by search engines to index images, by browsers when images fail to load, and by users who disable images for bandwidth savings. Missing alt text is the single most common WCAG violation on the web.
The fix is trivial — adding a descriptive alt attribute takes seconds per image — but the impact on usability for visually impaired users is enormous.
Every <img> element must have an alt attribute. If the image conveys information, alt should describe the content. If the image is purely decorative, use alt="" (empty string) to tell screen readers to skip it. Never omit alt entirely.
// Missing alt — screen reader reads filename or nothing
<img src="/uploads/team-photo.jpg" />
// Empty alt on informational image — screen reader skips it
<img src="/chart-quarterly-revenue.png" alt="" />
// Useless alt — does not describe the image
<img src="/uploads/hero.jpg" alt="image" />// Descriptive alt for informational image
<img src="/uploads/team-photo.jpg" alt="The BeforeMerge team at the 2025 company retreat" />
// Descriptive alt for chart
<img src="/chart-quarterly-revenue.png" alt="Bar chart showing Q4 revenue increased 23% compared to Q3" />
// Empty alt for purely decorative image
<img src="/decorative-divider.svg" alt="" />Search for <img tags without alt attributes:
grep -rn '<img' --include="*.tsx" --include="*.jsx" --include="*.html" | grep -v 'alt='Use ESLint with eslint-plugin-jsx-a11y which flags missing alt attributes automatically.
<img> in the codebase for missing or empty alt attributesalt=""jsx-a11y/alt-text ESLint rule to prevent future regressions