Accessibility · Interactive Guide

Mastering Alt-Text: Good vs. Bad & Why It Matters

By Anthony · Digital Allies Kingman, AZ Updated 2026

A screen reader hits an image without alt-text and skips right past it. Your gallery becomes invisible. Product photos disappear. Content you worked on — gone, from the perspective of anyone navigating your site with assistive technology.

This isn't an edge case. 24.1% of Kingman residents are over 65. Vision changes are a normal part of aging. Screen readers, high-contrast modes, and keyboard navigation aren't accessibility features for a small minority — they're how a significant chunk of your actual customer base interacts with the web.

Alt-text bridges your visual content to everyone who accesses information differently. It also feeds into SEO — search engines read alt-text to understand image content. And it shows up as visible text when images fail to load on a slow connection.

The fix is straightforward. The rules are simple. Most people just don't know them.

24.1%
Kingman residents over 65
Vision changes are a normal part of aging. This is your market.
1 in 12
Men have some form of color blindness
Accessibility affects more people than most businesses realize.
WCAG
2.1 AA — the standard to meet
Alt-text on meaningful images is a hard requirement, not a suggestion.

The Rules, Plainly Stated

Alt-text has four rules. They're not complicated — but most people either don't know them or don't apply them consistently.

01
Write what you see

Describe what's actually in the image. Be specific. Include context that matters to understanding the content. If the image shows a chart of mobile traffic data, say that — not "chart" or "graph."

02
Stay under 125 characters

Most screen readers truncate after 125 characters. If your alt-text is a paragraph, most of it disappears. Be specific, but be concise. If an image genuinely needs a long description, use a caption or the surrounding text instead.

03
Skip "image of" or "photo of"

Screen readers already announce that it's an image before reading the alt-text. Starting with "image of" means the user hears "image, image of..." — redundant and mildly annoying. Just describe the content directly.

04
File names ≠ alt-text

File names help you organize folders. Descriptive file names help SEO. Alt-text describes content for screen readers and shows up when images fail to load. These are two different jobs — do both.

Good file name: kingman-mobile-traffic-2026.png
Good alt-text: Bar chart showing 87.4% of Kingman website visits occurring on mobile devices, May 2025 to May 2026

+1
Decorative images

If an image is purely decorative — a background texture, a divider line, a repeated pattern — use an empty alt attribute: alt="". This tells the screen reader to skip it entirely, which is the right call. Only skip alt-text intentionally, never by accident.

Examples: Good vs. Bad

Theory is easy. Here's what it actually looks like in practice — using real image types you probably have on your site right now.

Example 01 · Button Image
❌ Bad
alt="Button Image"

Vague. Doesn't describe the button's purpose, label, or state. A screen reader user has no idea what this button does.

✓ Good
alt="Blue 'Contáctenos' button showing 30% text expansion for Spanish localization"

Specific, descriptive, conveys function and context. Someone who can't see the image still understands exactly what it shows and why it matters.

Example 02 · Code Screenshot
❌ Bad
alt="Code screenshot"

Tells the reader nothing about what the code does, what file it's from, or why it's there. Completely useless context.

✓ Good
alt="LegalRouter.js snippet showing dynamic routing to legal documents based on detected language preference"

Explains the file, function, and purpose. Useful for screen reader users and for search engines trying to understand technical content.

Example 03 · Data Chart
❌ Bad
alt="Chart"

What chart? Showing what? For what time period? The entire point of the data is lost.

✓ Good
alt="Bar chart showing 87.4% mobile, 9% desktop, and 3.6% tablet traffic for a Kingman business, May 2025 to May 2026"

The key finding is communicated. A screen reader user gets the actual data point — not just the knowledge that a chart exists.

Example 04 · Product Photo
❌ Bad
alt="Product photo"

Which product? What color? What size? No purchasing decision can be made from this.

✓ Good
alt="Handmade turquoise ceramic mug with matte glaze and wide handle, 12oz capacity"

Material, color, finish, size — everything a customer needs to make a decision without seeing the image.

Where to Add It — Platform by Platform

Every platform handles alt-text slightly differently. Here's where to find the field on the most common ones.

WordPress
Upload image → Media Library → click image → "Alternative Text" field on the right panel.
Or: when adding an image block in the editor, check the right sidebar for the Alt Text field.
Block editor also supports bulk alt-text via the Media Library.
Wix / Squarespace
Click any image in the editor → look for "Settings" or the pencil/edit icon → "Alt Text" or "Image Description" field.
Wix also lets you set alt-text from the Media Manager before images are placed on a page.
Shopify
Products → click the product → click an image → "Add alt text" link appears below the image preview.
Also available in the Files section for non-product images.
Raw HTML
Add the alt attribute directly to the <img> tag.
<img src="mug.jpg"
  alt="Turquoise ceramic mug, 12oz">
Social Media
Instagram: Advanced Settings when posting → "Write Alt Text."
Twitter/X: Add image → "Add description" before posting.
Facebook: Click the image after uploading → "Edit" → "Alternative Text."
Google Docs / Slides
Right-click any image → "Alt text" → fill in Title and Description fields.
Use the Description field — it's what screen readers actually read aloud.
Interactive Tool

Alt-Text Checker

Paste your alt-text and get instant feedback on what's working and what to fix.

0 characters
Start typing to see feedback.
Self-Audit

Image Accessibility Checklist

Run through your site and check off each item as you verify it.

0%
Check off each item as you verify it on your site.

The SEO Bonus You Weren't Expecting

Alt-text isn't just for screen readers. Search engines use it to understand image content, which affects how your images appear in Google Image Search and how your pages rank for related queries.

A product page with descriptive alt-text on every image gives search engines more signal to work with than one with empty or generic alt-text. This is a small, consistent advantage that compounds over time.

It's not a silver bullet — but it's free, it's right, and it takes ten seconds per image. There's no reason not to do it.

The Test

"Close your eyes. Have someone read your alt-text out loud. Does the image make sense without seeing it?"

If yes — you're done. If no — rewrite it.

Quick Reference
✓ Under 125 characters
✓ No "image of" or "photo of"
✓ Specific, not generic
✓ Describes function for buttons/icons
✓ Empty alt="" for decorative images
✓ File names are descriptive (separate from alt-text)
The Bottom Line

Making your site accessible isn't good practice.
It's how you reach your entire community.

Alt-text takes ten seconds per image. An accessibility audit takes a few hours. The alternative is a site that's invisible to a meaningful percentage of the people you're trying to serve — including a quarter of Kingman's population.

Free Audit

Want me to run a quick accessibility check on your site? I'll tell you exactly what's missing and what to fix first.

[ Book a Free Audit ]
Need a strategic ally?