How to export image URLs and alt text for an accessibility audit

An accessibility audit needs more than a count of missing alt attributes. Some images should have descriptions, some should have empty alt text because they are decorative, and some need the surrounding link or caption reviewed before anyone can decide.

Exporting image URLs and current alt values creates a useful worksheet, but it is only the discovery step. A human must evaluate the image's purpose on each page.

The timing is especially useful during a redesign or migration: weak text can be fixed before it settles into the new CMS.

Alt text belongs to an occurrence

The same file can appear in different contexts. A speaker photograph may identify the person on an event page. The same photograph beside a visible name in an author card may be decorative. One universal description attached to the file can be wrong in one of those places.

Export one row per occurrence with page URL and DOM context. You can still link occurrences to a shared asset ID later.

What to collect

Useful fields include:

Field	Why it matters
Page URL	Identifies context and ownership
Image URL	Helps group files and verify loading
Current alt value	Shows what assistive technology may receive
Alt attribute state	Missing, empty, or populated
Nearby heading or caption	Helps interpret purpose
Parent link	Determines whether the image is an interactive label
Natural dimensions	Helps separate content from tracking pixels
DOM selector or role	Identifies templates and repeated patterns
Review decision	Informative, decorative, functional, or complex
Proposed text	Human-approved replacement

Keep "missing attribute" distinct from alt="". Empty alt can be correct for a decorative image. A missing attribute can cause some assistive technologies to announce the filename or URL.

Collect images from the rendered page

Use a rendering-aware crawl because JavaScript, lazy loading, and client-side templates can add images after the original response. Scroll long pages and activate legitimate tabs or galleries in scope.

The ExtractPics image URL extractor can help list public image sources. Pair that result with DOM extraction of alt values and page context. CSS backgrounds are not <img> elements and do not have alt attributes, so audit their meaning separately.

For missing deferred content, read how to extract lazy-loaded images.

A useful browser-side export for your own page

In Developer Tools on a page you control, a small script can gather basic fields:

const rows = [...document.images].map((img, index) => ({
  index,
  src: img.currentSrc || img.src,
  alt: img.getAttribute("alt"),
  hasAltAttribute: img.hasAttribute("alt"),
  width: img.naturalWidth,
  height: img.naturalHeight,
  linked: Boolean(img.closest("a")),
  figureCaption: img.closest("figure")
    ?.querySelector("figcaption")?.textContent?.trim() || ""
}));

console.table(rows);

This is an inventory aid, not an accessibility verdict. It misses semantic context, CSS backgrounds, canvas content, SVG details, and images in unloaded states.

For a full site, integrate equivalent fields into your authorized crawler and export a CSV or database table.

Classify the image's purpose

Informative

The image communicates information not already available in nearby text. Alt text should convey the relevant meaning, not every visible detail.

Decorative

The image adds visual styling without meaningful content. Use empty alt text on an <img> so it is ignored, or implement the visual in CSS when appropriate.

Functional

The image is inside a link or button. Its accessible name should describe the action or destination, not merely its appearance. "Search" is better than "magnifying glass" when the icon submits a search.

Complex

Charts, diagrams, and infographics may need a concise alt summary plus a nearby detailed explanation or data table. Stuffing every value into one alt attribute creates a poor experience.

Text image

If an image contains essential text, provide the same information in real page text. Logos can use the organization name; avoid repeating nearby visible copy unnecessarily.

W3C WAI's alt decision guidance is a useful reference for these categories.

Flag likely problems, not automatic failures

Create review flags for:

• Missing alt attribute
• Filename-like text such as IMG_2048.jpg
• Generic values such as "image" or "photo"
• Very long descriptions
• Repeated identical text across unrelated images
• Keyword-stuffed marketing copy
• Decorative separators with descriptions
• Linked images with empty accessible names
• Charts without nearby explanation
• Important information present only in an image

Automation can identify suspicious patterns. It cannot see the author's intent or decide which visual details matter to the reader.

Review linked images carefully

If an image is the only content inside a link, its alt text commonly contributes the link's accessible name. Describe the destination or action.

<a href="/downloads/report.pdf">
  <img src="report-cover.jpg" alt="Download the annual accessibility report">
</a>

If visible link text already provides the name, a decorative image inside the same link may use empty alt to avoid repetition.

Test the computed accessible name with browser accessibility tools rather than reading the HTML in isolation.

SVG and icon considerations

Inline SVGs are not included in document.images. Audit whether they are decorative, labelled with accessible markup, or part of a named control.

Icon fonts and CSS masks also require control-level review. A visible icon with raw ligature text or no accessible button name is an interface problem, even though the image worksheet contains no row for it.

Use the SVG and web icon guide to inventory those systems.

CSS backgrounds

CSS backgrounds have no alt attribute. If the background is decorative, that is fine. If it carries content, provide equivalent text in the HTML or use an appropriate semantic image pattern.

A hero background with overlaid heading may be decorative when the heading communicates the message. A background diagram containing unique instructions is not.

The CSS background extraction guide shows how to discover these files for manual review.

Write useful alt text

Good alt text is concise and tied to purpose.

Weak:

image of product

Better on a product page:

Walnut desk with two drawers, shown from the front

Weak:

beautiful stunning mountain image travel landscape

Better in a route guide:

Trail junction below the east ridge, with the lake path on the left

Do not start every description with "image of." Screen readers already expose the element as an image. Mention medium when it matters, such as "diagram," "map," or "screenshot."

Avoid fabricated interpretation

Do not infer sensitive characteristics, emotions, identities, or locations that are not confirmed. Use visible, relevant facts and the surrounding editorial context.

For charts, rely on the actual data and author-approved takeaway. For product images, use catalog records rather than guessing materials or colors from a compressed preview.

Organize the review workflow

Assign rows by page owner or content team. Include columns for reviewer, decision, proposed text, approval, and implementation status.

Prioritize:

1. High-traffic landing pages
2. Functional images and controls
3. Products and conversion pages
4. Complex diagrams and instructional screenshots
5. Repeated template components
6. Long-tail archived content

Fixing the shared author-card template can improve hundreds of occurrences at once.

Validate implementation

After updates:

• Recrawl the rendered site.
• Compare missing, empty, and populated states.
• Test representative pages with keyboard navigation.
• Inspect the accessibility tree.
• Use at least one screen reader for important flows.
• Confirm lazy-loaded images keep their alt attributes.
• Verify CMS editors cannot accidentally remove required semantics.

Automated testing can catch missing attributes and some name failures. Manual testing remains necessary.

Include the audit in migration QA

Keep the approved alt worksheet beside the asset mapping. After migration, join by page, role, and stable asset ID rather than filename alone.

The website migration image checklist shows how to reconcile image files, metadata, and responsive behavior together.

Privacy and security

An export can include signed image URLs, private page paths, user avatars, and query tokens. Store it securely, redact secrets, and avoid sending production manifests to public tools.

Audit content you own or are authorized to access. Accessibility work does not require bypassing private access controls.

The spreadsheet starts the review

The export is triage, not the audit itself. It can show you missing attributes, repeated boilerplate, and suspicious filenames. It cannot decide whether a photograph adds information on this particular page.

Give reviewers the page URL, nearby text, link context, and rendered image, not just two spreadsheet columns. Then test the changed page with the tools and assistive technology your team supports. Filling every empty cell is easy; giving each occurrence the right treatment takes judgment.