Images missing alt text in Vue
The alt attribute is how screen-reader users perceive an image and how search engines (and image search) understand it. An <img> with no alt attribute is opaque to both — the user hears only “image” or the filename. AI-generated markup frequently emits <img> tags with a src and nothing else.
Framework fixes
Symptoms
How VibeCheck catches it
In your widget · Problems
Images missing alt text
To your coding agent · MCP
agent › get_detected_issues
→ { detector: "seo", issue: "Images missing alt text", threshold: "one or more <img> without an alt attribute" }
The same string in your widget and in your agent’s context — no screenshot, no copy-paste.
Root causes
The fix for Vue
Bind alt in the template; enable vuejs-accessibility/alt-text to catch omissions.
<img :src="photo.url" :alt="photo.caption" />Steps
- Add a descriptive
altto every content image - Use
alt=""for decorative images (not a missing attribute) - For dynamic images, require
alttext at the data layer
FAQ
- Is
alt=""ever correct? - Yes — for purely decorative images (dividers, background flourishes), an explicit empty
alt=""tells assistive tech to skip it. That is different from omitting the attribute, which VibeCheck flags. - What makes good alt text?
- Describe the information the image conveys in context, concisely. Skip “image of” — screen readers already announce it is an image.
- Does alt text help SEO?
- Yes. It helps images rank in image search and adds relevant context to the page. It is also a legal accessibility requirement in many jurisdictions.