Check every image on a page for missing, empty or weak alt text, export the list as a CSV, then fix it with the writing guide and helper below.
Runs in your browser. Nothing you paste or check is sent anywhere.
Check alt text
The most reliable way. It runs on the page you are looking at, after scripts and lazy-loaded images have loaded, so it sees what visitors see.
Check alt textDrag this button to your bookmarks bar. Clicking it here runs a demo on this page.
Show your bookmarks bar (Ctrl+Shift+B, or Cmd+Shift+B on a Mac).
Drag the Check alt text button onto it.
Open any page and click the bookmark. A panel lists every image; press Esc to close it.
On a phone, or if dragging doesn't work: , then add a new bookmark and paste the code as its URL. A few sites with strict security settings block bookmarklets; use Paste HTML for those.
Open the page, press Ctrl+U (or right-click, View Page Source), select all and paste here. For pages built by JavaScript, use your browser's dev tools: right-click the <html> element, Copy, Copy outerHTML.
Honest warning: most sites won't allow this. Browsers block one site from reading another site's pages unless the other site opts in (that's called CORS). When it's blocked you'll see why, and the bookmarklet or Paste HTML will still work. Your browser contacts that site directly; there's no server of mine in between.
Report
Thumbnails load straight from where each image is hosted. Images with relative paths only show if you add the page URL.
Alt text helper
Answer a few questions and get a draft you can edit. No image recognition here: you know why the image is on your page, a machine doesn't.
A free alt text checker that works on any page
Alt text is the description a screen reader reads out in place of an image. It also shows up when an image fails to load, and search engines use it to understand what an image is about. Most sites have a few images with no alt at all, a lot with alt text like IMG_4032.jpg or image, and some links that are only an icon with nothing for a screen reader to say.
This tool finds those. It checks <img>, inline <svg>, image buttons, image map areas, role="img" elements and CSS background images, then tells you what is missing and what's weak. It can't judge whether a description is good for your context; that part is on you, and the guide below helps.
How to check missing alt text
Add the bookmarklet. Drag the Check alt text button to your bookmarks bar.
Open the page. Go to the page you want to check and click the bookmark.
Review the report. Errors first, then warnings. Show on page scrolls to each image and outlines it.
Export and fix. Download the CSV for your team or CMS, and rewrite weak alt text with the helper.
What each result means
Result
Check
Why it matters
Error
No alt attribute
Screen readers may read the file name or URL. Fails WCAG 1.1.1.
Error
Image is the only thing in a link or button, and has no alt text
The link has no name; people hear "link" and nothing else. WCAG 1.1.1, 2.4.4, 4.1.2.
Error
Image button, map area or role="img" with no text
Controls need a name that says what they do. WCAG 1.1.1, 4.1.2.
Warning
Alt looks like a file name (DSC_0042.jpg)
Present, but useless to anyone listening.
Warning
Generic alt (image, photo, logo, icon)
Says it's an image, which the screen reader already said.
Warning
Starts with "image of" / "photo of"
Redundant. Mention the medium only if it matters.
Warning
Longer than 125 characters
A rule of thumb, not a WCAG rule. Long descriptions are tiring to listen to and can't be paused or skimmed easily.
Warning
Inline SVG with no name and not hidden
Screen readers may skip it or read something odd. Name it or hide it.
Note
Empty alt (alt="")
Correct for decoration. Double-check it really is decoration.
Note
Same alt on different images
Fine for repeated icons. Different photos usually need different descriptions.
Note
Alt repeats the link text or caption
It gets read twice. Use alt="" or make them say different things.
Note
CSS background image
Can't have alt. Fine for decoration; meaningful content should be real text or an <img>.
How to write alt text
Ask one question: if this image didn't load, what would the reader need to be told? The answer depends on why the image is there, not just what's in it. The same photo of a stage can be "Speaker Maya Chen opening the 2026 summit" on a news post and alt="" on a page where it's just a banner.
Be specific and brief. Lead with what matters.
Don't start with "image of" or "picture of". Do say "Screenshot", "Painting" or "Diagram" when the medium matters.
Don't stuff keywords. Write for people; search engines read it the same way.
Write it like a sentence. End with a period so screen readers pause.
If an image is a link or button, describe what it does, not what it looks like.
Decorative? Use alt="". Never leave the attribute out.
Alt text examples: good and bad
Image type
Bad
Good
Informative: event photo in a recap post
Bad:alt="IMG_4032.jpg" Bad:alt="photo of people"
Good:alt="A full theatre giving the closing speaker a standing ovation."
Decorative: a swirl divider between sections
Bad:alt="decorative swirl divider" Bad: no alt attribute
Good:alt=""
Decorative: photo next to text that says the same thing
Bad: repeating the heading in the alt
Good:alt=""
Functional: magnifying glass search button
Bad:alt="magnifying glass"
Good:alt="Search"
Functional: PDF icon that downloads the program
Bad:alt="pdf icon"
Good:alt="Download the 2026 program (PDF)"
Logo linking to the home page
Bad:alt="logo" Bad:alt="FirstShow logo red and white"
Good:alt="FirstShow home"
Logo in a sponsor row, not linked
Bad:alt="sponsor"
Good:alt="Bow River Coffee Co." (the sponsor's name)
Text in image: promo graphic
Bad:alt="promo banner"
Good:alt="Early bird tickets end Friday. Save 20% with code EARLY." (the exact words)
Chart in a report
Bad:alt="chart" Bad: every data point in the alt
Good:alt="Line chart: ticket sales doubled from March to May. Full numbers in the table below."
Complex diagram: org chart, map, flowchart
Bad: a 600-character alt
Good: short alt naming it (alt="Org chart of the festival team") plus the full structure as a list or text on the page
Headshot on a speaker page
Bad:alt="headshot"
Good:alt="Maya Chen", or alt="" if her name is the caption right below
Decorative vs informative vs functional images
Informative images add information: describe that information. Decorative images add nothing a reader would miss: alt="". Functional images are links or buttons: describe the action or destination. When you're torn between informative and decorative, ask whether a blind reader would be missing out on something. If not, it's decorative. The W3C alt decision tree walks through edge cases.
Text in images
If an image contains text that matters, the alt needs those words. Better still, put the text in real HTML: it scales, translates, and works for everyone. WCAG 1.4.5 asks you to avoid images of text where real text can do the job (logos are the exception).
WCAG 2.2 alt text requirements (1.1.1 Non-text Content)
Success Criterion 1.1.1 Non-text Content, Level A. Every image, icon, chart or other non-text content shown to users needs a text alternative that does the same job as the original. The exceptions, in plain words:
Controls and inputs need a name that says what they do (an icon button needs a label).
Time-based media, tests and sensory experiences (like a piece of music or art) need at least a text label that identifies them.
CAPTCHAs need text saying what they are, plus an alternative that uses a different sense.
Decoration, formatting and invisible images must be hidden from assistive technology, for example with alt="".
Text alternative for every meaningful image; decoration hidden.
1.4.5 Images of Text
AA
Use real text instead of pictures of text, except logos and where the look is essential.
1.4.9 Images of Text (No Exception)
AAA
Images of text only for decoration or where the look is essential.
2.4.4 Link Purpose (In Context)
A
An image link's alt has to make its destination clear.
4.1.2 Name, Role, Value
A
Image buttons and icon links need an accessible name.
WCAG doesn't set a character limit for alt text. The 125-character warning in this checker is a widely used rule of thumb.
Image accessibility FAQ
How do I check a page for missing alt text?
Drag the Check alt text bookmarklet to your bookmarks bar, open the page and click it. It lists every image, flags missing or weak alt text and lets you jump to each image. You can also paste a page's HTML into the Paste HTML tab.
Is empty alt text (alt="") an error?
No. alt="" tells screen readers to skip the image, which is correct for decoration. It is a problem when the image carries meaning, or when it is the only thing inside a link or button, because then the link has no name.
How long should alt text be?
As short as it can be while still doing the job. WCAG sets no limit. Around 125 characters is a common rule of thumb; if you need more, put the detail in a caption or nearby text.
Should alt text start with "image of" or "photo of"?
Usually not. Screen readers already announce it as an image. Mention the medium only when it matters, like a painting, a screenshot or a diagram.
What alt text should a logo have?
The organization's name. If the logo links to the home page, use the name plus where it goes, like "FirstShow home". If the name is already written right next to it, use alt="".
Do background images need alt text?
CSS background images cannot have alt text, so screen readers skip them. That is fine for decoration. If a background carries meaning, put that meaning in real text on the page or use an <img> element with alt.
Why can't this tool check any URL I type in?
Browsers stop one website from reading another website's pages unless that site allows it (CORS). Most sites don't. The bookmarklet gets around this because it runs on the page you are already viewing.
Does this tool send my HTML or my page anywhere?
No. The audit runs in your browser. There is no server, no account and no analytics. Thumbnails in the report load straight from where the images are hosted, and you can turn them off.