Image Alt Text Checker
Paste any page HTML and audit every image's alt attribute. Catches missing alts, generic "image"/"photo" placeholders, filename-only alts, overlong text, and missing width/height for layout-shift prevention.
Page HTML
Paste HTML containing image tags
Copy from View Page Source, or paste an <article> / <section> block. The tool extracts every <img> and reports on its alt, width, height and loading attributes.
Alt Text Audit
How to Write Effective Alt Text
Four rules that cover WCAG accessibility, SEO, and user experience — all at once.
Describe the image's role, not the image
"Woman smiling" is literal. "Sarah Chen — Marketing Director testimonial" tells the user why it's there. Alt text should answer: if this image disappeared, what information would be lost?
Decorative images get alt=""
Dividers, abstract shapes, background patterns — images that carry no information — should use alt="" (empty, but present). Screen readers skip them, which is the correct behaviour.
Keep it under 125 characters
Most screen readers truncate alt text around 125 chars. If you need more detail, use a caption or aria-describedby. Alt text is a short summary, not a full description.
Don't start with "Image of..."
Screen readers already announce "image" before the alt text. "Image of a chart..." becomes "image image of a chart...". Just describe what's in the image directly.
Alt Text Quick Reference
What to do in every common scenario.
Photo of a person
Include name + context. "Sarah Chen, CEO of Example Co" beats "smiling woman in blue top".
Chart or diagram
Summarise the takeaway. "Bar chart showing SEO traffic doubled from Jan to Dec 2026" is better than "bar chart".
Decorative flourish
Use alt="" (empty string, but attribute present). Screen readers will skip it — which is what you want.
Logo
If linked to home: "workspacein.com home". If in a list: just "workspacein.com". Skip the word "logo".
Icon with nearby text
Use alt="" if the text already describes it. "Call us 1800..." next to a phone icon doesn't need the icon described.
Icon standalone
Describe the action. A printer icon with no text: alt="Print this page".
Complex illustration
Short alt + longer description elsewhere. Use aria-describedby to link to a full description in a caption or paragraph.
Product photo
Describe visible attributes. "Brown leather ankle boot, side view" — not "boot" or "IMG_1234.jpg".
Alt Text Mistakes to Avoid
What shows up in every accessibility audit — and why each one matters.
Accessibility violations
SEO waste
Performance
Edge cases
Alt Text FAQ
Should every image have alt text?
No. Decorative images (dividers, background shapes, purely visual flourishes) should use alt="" (empty alt). This tells screen readers to skip them. Only meaningful content images need descriptive alt text.
What's a good alt text length?
Under 125 characters is the practical limit — screen readers can truncate longer text. Aim for a concise description that conveys the image's role on the page, not a full caption.
Does alt text help SEO?
Yes. Google uses alt text to understand image content — which helps with image search, main search ranking, and accessibility signals. Treat it like a short caption users will never read but Google will.
Is my HTML sent anywhere?
No. Parsing runs entirely in your browser via the native DOMParser. Your HTML never leaves your device.