What Does That Image Say? Non-text Content

If you know anything about web accessibility, you probably know about alt text. It's the most widely recognized accessibility technique - that little text description you add to images so screen readers can announce what the image shows. But there's more to non-text content accessibility than just slapping some alt text on every image and calling it done.

Let's dig into what you might not know about making images, icons, charts, and other non-text content accessible.

The Standard

WCAG 1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for specific situations including controls, time-based media, tests, sensory experiences, CAPTCHAs, and decoration.

The key phrase is "serves the equivalent purpose." The text alternative doesn't need to describe every visual detail - it needs to convey the same information or function that the non-text content provides.

Beyond Basic Alt Text: What You Need to Know

Context Changes Everything

The same image might need completely different alt text depending on where it appears. A red sweater photo in a shopping catalog needs to describe the product: "Red cable-knit sweater with crew neck." But the same photo in a blog post about knitting techniques might need: "Red cable-knit sweater showing the twisted rope pattern down the front."

Always ask: what information does this image convey in this specific context?

When Empty Alt Text Is Correct

Sometimes the right alt text is no alt text at all - but you still need the attribute. Use alt="" (empty string) for:

• Purely decorative images - borders, flourishes, spacers that don't convey information
• Adjacent text already describes it - if a PDF icon sits next to text that says "Download Report (PDF)", the icon is redundant
• Images within links where the link text is sufficient - the link text already tells users where they're going

Never remove the alt attribute entirely - that causes screen readers to announce the filename instead, which is usually gibberish.

Functional Images Describe the Action

When images function as links or buttons, describe what happens when you click them, not what the image looks like. A house icon that links to your homepage should have alt="Home", not alt="Small blue house icon".

Complex Images Need More Than Alt

Charts, diagrams, and infographics can't be adequately described in a brief alt text. You have several options:

• Include the description in surrounding text - where everyone can benefit from it
• Use aria-describedby - to link to a detailed description elsewhere on the page
• Provide the data in another format - like a table alongside a chart

The alt text can be brief: "Market share pie chart, see details below" - then provide those details in a way that works for everyone.

Icons and Icon Fonts

Icon fonts (like Font Awesome) and SVG icons need text alternatives too. For icon fonts, add aria-label to the container element and aria-hidden="true" to the icon itself. For SVG icons, use a <title> element inside the SVG, or mark decorative SVGs with role="presentation".

CAPTCHAs: The Accessibility Paradox

Visual CAPTCHAs create an accessibility barrier by design - you can't describe the distorted text without defeating the purpose. The standard requires providing alternatives:

• Audio CAPTCHA option
• Alternative verification method (like SMS code)
• Human support option

Modern alternatives like reCAPTCHA v3 or hCaptcha with accessibility features are better choices than traditional distorted-text CAPTCHAs.

Writing Better Alt Text

Good alt text is concise but complete. Some guidelines:

• Don't say "image of" or "picture of" - screen readers already announce it's an image
• Include text that appears in the image - if there's a caption or label, include it
• Be concise - aim for one or two sentences maximum for most images
• Avoid being overly detailed - you don't need to describe every visual element, just the relevant information

Common mistakes:

• Using the filename as alt text: alt="IMG_2847.jpg"
• Being too verbose: describing every visual detail when a simple description would suffice
• Repeating adjacent text verbatim

AI-Powered Alt Text in Drupal

Here's something that might surprise you: Drupal can now use AI to write your alt text automatically. The AI Image Alt Text module adds a "Generate with AI" button next to image fields, letting AI vision models analyze your images and suggest descriptive alt text.

From our testing, AI often describes images better and more consistently than humans do manually - and it's much faster. This doesn't mean you should blindly accept every AI suggestion, but it's an excellent starting point that you can refine as needed. We wrote about this in last year's advent calendar.

Having good alt text is important for accessibility, but writing it can feel like a chore. AI can speed up the process significantly while improving overall quality and consistency.

Alt Text in Content Management Systems

Most modern CMSs make it easy to add alt text:

• Drupal - The media library includes an alt text field for all images. You can make it required, and with the AI module mentioned above, you can generate suggestions automatically.
• WordPress - The media uploader has an "Alternative Text" field that appears when you upload or edit images.

The key is training your content editors to write meaningful alt text. It's not just technical accessibility - it's good content practice that helps everyone, including search engines.

Testing Your Alt Text

Here's how to check if your images have good alt text:

1. Turn off images in your browser - Can you understand the page content with only the alt text showing?
2. Use a screen reader - Navigate through images with NVDA, VoiceOver, Orca, or JAWS. Does the alt text make sense in context?
3. Check with automated tools - Tools like WAVE or axe DevTools can identify missing alt attributes
4. Review context - For each image, ask: "Does this alt text convey the same information/function as the image?"

The Bottom Line

Everyone knows about alt text, but implementing it well requires understanding context, purpose, and when less is actually more. An empty alt attribute is sometimes exactly right. A verbose description might be exactly wrong. And modern tools like AI can help you maintain consistent, quality alt text across your entire site.

Before you publish that next blog post or update your website, check every image. Does it have an alt attribute? Is the alt text meaningful in context? Does it serve the same purpose as the image? These details make the difference between a site that's truly accessible and one that just goes through the motions.