How to Make Your Website's Images Accessible (Beyond Just Alt Text)

Most guides on image accessibility stop at alt text. Write a short description, move on. But alt text is really just the starting point. Depending on the types of images on your website, there are several other decisions that affect whether your site works for people with disabilities — and whether you are actually compliant with accessibility laws.

This guide covers everything beyond alt text: how to handle decorative images correctly, what to do with complex visuals like infographics and charts, how SVGs and icons need special treatment, and practical tips for popular website platforms like WordPress, Squarespace, and Shopify.

First: The Two Types of Images (and Why They Need Different Treatment)

Before anything else, every image on your site falls into one of two categories. Getting this distinction right is the foundation of accessible images.

Informative Images

An informative image adds meaning that the surrounding text does not already provide. Your product photos, team headshots, charts showing your results, screenshots in a tutorial — these all communicate something the reader needs to understand the page.

Informative images need descriptive alt text. If the image were removed, the reader would lose information.

Decorative Images

A decorative image exists purely for visual appeal. It does not add information — it adds atmosphere. A background pattern, a dividing flourish between sections, a stock photo of a coffee cup on your blog post that has nothing to do with coffee — these are decorative.

Decorative images should have empty alt text: alt="".

This is a deliberate instruction that tells screen reading software to skip the image entirely. It sounds counterintuitive, but it is the right approach. Without it, screen readers announce the file name (something like “stock-photo-4872-dot-jpeg”), which is confusing and disruptive for people navigating your site by ear.

The quick test: If you removed this image and replaced it with nothing, would the page lose any information? If no, it is decorative. Use empty alt text.

Infographics: The Most Mishandled Image on the Web

Infographics are popular because they turn complex information into a visual that is quick to share. The problem is that everything a sighted person reads in the infographic — every statistic, every step, every label — is invisible to someone using a screen reader if you only provide a vague alt text like “infographic about email marketing.”

The Right Approach: Two-Part Accessibility

Step 1: Write a summary alt text. Keep it brief. It should convey the topic and signal that a full description is available.

Example: “Infographic: 5 steps to improve email open rates. Full details in the text below.”

Step 2: Include the full content as regular text on the page. This does not have to be immediately visible to sighted users. You can place it in a collapsible section (“View full text version”), include it as a bulleted list below the infographic, or write the content into the body of the article itself.

This approach benefits everyone, not just users with disabilities. Search engines cannot read images. Every word in your infographic that exists only as an image is invisible to Google. Making that text available in HTML form improves your search visibility while also making your content accessible.

Charts and Graphs: Describe the Insight, Not the Data

Charts present a similar challenge to infographics, but with a twist. A bar chart showing quarterly revenue has not just visual structure but underlying data. The goal of alt text for a chart is not to list every data point — it is to communicate the headline finding.

Instead of: “Bar chart with four bars”

Write: “Bar chart showing quarterly revenue growing from $80K in Q1 to $210K in Q4 2025, with the strongest growth between Q2 and Q3”

The alt text should answer the question: What is the main takeaway from this chart?

For charts with many data points or complex comparisons, follow the same two-part approach as infographics: summary alt text plus a data table or detailed description in the page body. A data table is particularly useful here because it is genuinely useful for all readers, not just an accessibility workaround.

SVGs and Icons: A Different Kind of Image Problem

SVG (Scalable Vector Graphics) files — commonly used for logos, icons, and illustrations — behave differently from regular image files like JPEGs and PNGs. The accessibility approach is different too.

Icons Used Alongside Text

If an icon sits next to a text label (a phone icon next to “Call Us,” a calendar icon next to “Book an Appointment”), the icon is decorative — the text already communicates the meaning. The icon should be hidden from screen readers entirely.

In practice, this usually means your developer or theme needs to add aria-hidden="true" to the icon element. If you are using a no-code website builder, check whether your platform has an accessibility option for icons or whether icons are already handled this way by default.

Standalone Icons and Logos

If an icon or SVG appears without any accompanying text label — an icon-only button, a standalone logo, a clickable social media icon — it needs a text alternative. For a social media icon that links to your Twitter profile, the accessible label should describe where the link goes: “Follow us on Twitter.”

Most website builders handle logos well if you fill in the alt text field, but standalone icon buttons are a common accessibility gap. If your site has icon-only buttons (like a search magnifying glass with no text label, or share icons), check whether they have accessible labels.

Decorative SVG Illustrations

Purely decorative SVG illustrations — an abstract background shape, a wave divider between sections — should be hidden from screen readers just like decorative raster images. The implementation is slightly different from a regular alt="" (it typically requires aria-hidden="true" on the SVG element), but the principle is the same.

Image-Heavy Layouts: When Your Images Are Your Content

Some websites are built around images. Photography portfolios, product galleries, lookbooks, restaurant menus with photos of every dish. These sites face a particular challenge: there is a lot to describe, and it can become overwhelming if done poorly.

Galleries and Portfolios

Each image in a gallery needs alt text that helps the viewer understand what they are looking at. A photography portfolio should describe the subject, setting, and mood of each photo. Think about what a sighted visitor gets from browsing the gallery — your alt text should give a screen reader user the same ability to evaluate the work.

Product Image Galleries

Product pages often have multiple photos of the same item: front view, back view, detail shot, lifestyle photo. Each image in the gallery should have distinct alt text that describes what that specific view shows.

  • “Blue linen jacket, front view, showing button placket and lapel detail”
  • “Blue linen jacket, back view, showing vent and seam construction”
  • “Blue linen jacket, detail shot of interior label showing size and care instructions”

Avoid copying the same alt text across multiple images of the same product. Screen reader users navigate galleries image by image — identical alt text offers no way to understand what has changed between images.

When Images Contain Text

Images that contain text — promotional banners, event posters, quote cards — are a significant accessibility risk. The text in the image is invisible to screen readers and cannot be resized by users who need larger text.

The rule is simple: any text inside an image should also appear as real HTML text on the page. For promotional banners, duplicate the headline as an HTML heading. For event posters, list the event details (date, time, location, ticket link) as actual page text.

Responsive Images: Accessibility Travels Across Devices

Responsive design means your images resize and reformat depending on the device. A desktop hero image might show a wide landscape scene; on mobile, it might crop to a tighter view of the central subject.

If your cropped mobile image shows something different from the desktop version — for example, a person who is visible on desktop but cropped out on mobile — ideally both versions should have alt text that accurately reflects what is shown. In practice, most platforms serve the same alt text across all versions of a responsive image, so write alt text that describes the core subject that will be visible at all sizes.

Also be cautious about images set as CSS background images rather than standard HTML <img> tags. CSS background images cannot have alt text at all. If a background image conveys important information, it should be an <img> element instead — this is typically a decision for your developer or theme.

CMS-Specific Tips

WordPress

WordPress has a dedicated alt text field in the Media Library (look for “Alternative Text” in the image editing sidebar). You can also add or edit alt text directly in the block editor when you insert an image block.

For existing images without alt text, the Media Library is the most efficient place to do a bulk update — you can click through each image and fill in the field without touching individual posts. The WAVE browser extension is useful for quickly identifying which pages still have images missing alt text.

Shopify

Alt text on product images is added from the product editor: click any product image thumbnail and look for the “Add alt text” link. You can also bulk-edit product images via the Shopify admin if you have a large catalog.

One common gap in Shopify stores: collection banner images and theme promotional banners are often added through the theme customizer and may not have an obvious alt text field. Check your theme’s documentation or contact your theme developer to confirm how alt text is handled for customizer images.

Squarespace

When you click on an image block in the Squarespace editor, you will see an “Image Description” field in the Content tab. This field serves as the alt text.

Gallery blocks work slightly differently — click into the gallery, select an individual image, and look for the description field in the image editor. Note that Squarespace gallery captions and alt text are separate fields; the caption is visible on-screen, while the description is the behind-the-scenes alt text.

Wix

In the Wix Editor, click on any image, select Settings, and fill in the “What’s in the image? Tell Google” field. Wix also prompts you for alt text when uploading images through the Wix Media Manager.

For Wix Pro Gallery, each image has an editable description field. Click the three-dot menu on any image in the gallery editor to access it.

A Practical Checklist for Every Image You Publish

Use this as a quick reference before hitting publish:

  1. Is the image informative or decorative? Informative gets a real description. Decorative gets empty alt text.
  2. Does the alt text describe what matters? For products: name, color, view. For charts: the main finding. For people: who they are and what they are doing.
  3. Does the image contain text? If yes, is that text also available as real HTML text?
  4. Is this an infographic or complex chart? If yes, is the full content available as text elsewhere on the page?
  5. Are there icon-only buttons or standalone SVG icons? If yes, do they have accessible labels?
  6. Are you in a gallery with multiple images of the same item? If yes, does each image have distinct alt text?

Working through this checklist takes less than a minute per image. Over time it becomes second nature.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.