DEV Community: Rustamjon Akhmedov

How to Check if an Image Has Alt Text: 4 Easy Methods

Rustamjon Akhmedov — Mon, 30 Mar 2026 17:01:58 +0000

Why Alt Text Matters

Alt text (alternative text) is a short written description added to an image via the alt attribute in HTML. It serves two critical purposes:

It allows screen readers to describe images to visually impaired users
It gives search engines context to understand what an image depicts

According to the WebAIM Million 2025 report, 95.9% of home pages have detectable WCAG failures, and missing alt text remains the single most common accessibility error found on the web.

Method 1: Inspect the Page Source (View Source)

The simplest way to check alt text is to view the raw HTML source:

Open the page in your browser
Right-click anywhere and select View Page Source (or press Ctrl+U / Cmd+U)
Use Ctrl+F / Cmd+F to search for <img
For each image tag, look for the alt attribute

Example of properly formatted alt text:

<img src="photo.jpg" alt="A woman reading a book in a library">

If the alt attribute is missing entirely, or if it's present but empty (alt=""), the image may need attention. Note that alt="" is intentionally used for decorative images—this is valid per WCAG standards.

Method 2: Use Browser Developer Tools (Inspect Element)

For a faster, more visual approach:

Right-click directly on the image you want to check
Select Inspect or Inspect Element
The DevTools panel will open with the image's HTML highlighted
Look for the alt attribute in the highlighted <img> tag

This method is especially useful when you want to check a specific image quickly without searching through the full page source.

Method 3: Use the WAVE Accessibility Tool

The WAVE browser extension from WebAIM is one of the most widely used free accessibility testing tools available.

How it works:

Install the WAVE browser extension (Chrome or Firefox)
Navigate to the page you want to check
Click the WAVE extension icon
Red icon = missing alt text (critical error)
Green icon = alt text is present
Yellow icon = potential concern (suspiciously long, duplicated, or filename-based)

WAVE also displays a summary count of errors, making it easy to see how many images on a page are missing alt text.

Method 4: Use Alt Audit for Sitewide Checks

For larger websites with hundreds or thousands of images, automated tools like Alt Audit save hours of manual work:

Scan thousands of images across your entire domain in minutes
Identify exactly which pages and images are missing alt text
Get AI-powered suggestions to generate descriptive alt text automatically
Track your progress over time as you fix issues

What Makes Good Alt Text?

Follow these guidelines when writing alt descriptions:

✓ Be descriptive and specific: "Golden retriever puppy playing in autumn leaves" beats "dog"
✓ Keep it concise: Aim for under 125 characters (screen readers may cut off longer text)
✓ Don't start with "Image of" or "Photo of": Screen readers already announce it's an image
✓ Reflect context: The same image might need different alt text depending on where it appears
✓ Use empty alt for decorative images: alt="" tells screen readers to skip purely decorative images

Common Alt Text Mistakes to Avoid

Watch out for these frequent errors:

✗ Missing alt attribute entirely
✗ Using filenames as alt text ("IMG_4823.jpg")
✗ Keyword stuffing ("best cheap shoes buy shoes online")
✗ Identical alt text on different images
✗ Alt text that's too long or too short to be meaningful

Quick Comparison: All 4 Methods

Method	Best For	Scope	Cost	Skill Level
View Source	Quick spot-checks	Single page	Free	Beginner
DevTools	Inspecting specific images	Single element	Free	Intermediate
WAVE Extension	Visual accessibility overview	Single page	Free	Beginner
Alt Audit	Full site audits at scale	Entire domain	Free tier available	Beginner

Final Thoughts

Whether you're a developer, content manager, or SEO specialist, knowing how to check if an image has alt text is fundamental for building accessible, high-performing websites. For fast, thorough, and scalable solutions, automated tools like Alt Audit help you stay compliant with WCAG standards while improving your site's accessibility and search rankings.

Canonical URL: https://altaudit.com/blog/how-to-check-if-image-has-alt-text

How to Check if an Image Has Alt Text — 4 Methods I Actually Use

Rustamjon Akhmedov — Sat, 21 Mar 2026 11:54:52 +0000

If you've ever wondered whether the images on your site actually have alt text — you're not alone. It's one of those things that's easy to forget and surprisingly tedious to check manually.

I've been working on accessibility tooling for a while now, and these are the four methods I rely on daily — from quick one-off checks to full site audits.

Why bother checking?

Alt text does two things:

Screen readers use it to describe images to visually impaired users.
Search engines use it to understand what an image shows.

Missing alt text is the most common WCAG violation on the web (WCAG 1.1.1). And fixing it is usually straightforward — you just have to know where the gaps are.

Method 1: View Page Source

The old-school way. Still works perfectly.

Right-click anywhere on the page → View Page Source (or Ctrl+U / Cmd+U)
Ctrl+F → search for <img
Check each image tag for the alt attribute

<!-- ✅ Good -->
<img src="photo.jpg" alt="A woman reading a book in a library">

<!-- ❌ Missing -->
<img src="photo.jpg">

<!-- ⚠️ Empty (valid only for decorative images) -->
<img src="divider.png" alt="">

Quick note: alt="" is actually correct for purely decorative images. WCAG says screen readers should skip these.

Method 2: DevTools (Inspect Element)

This is my go-to for checking a specific image:

Right-click the image → Inspect
DevTools opens with the <img> tag highlighted
Look for the alt attribute right there

It takes about 3 seconds. You can also hover over elements in the panel to see which image you're looking at — super useful on image-heavy pages.

Method 3: WAVE Browser Extension

WAVE is a free accessibility checker from WebAIM. It overlays visual indicators directly on the page:

🔴 Red icon = missing alt text (error)
🟢 Green icon = alt text present
Summary panel shows total error count

Install the Chrome or Firefox extension, navigate to any page, click the icon. Done. You get an instant visual map of every accessibility issue — not just alt text.

I use WAVE when I want a broader accessibility check beyond just images.

Method 4: Scan your entire site at once

The methods above work great for individual pages. But if you're managing a site with hundreds or thousands of images, checking one page at a time isn't realistic.

This is why I built Alt Audit. It crawls your entire domain and flags every image that's:

Missing an alt attribute entirely
Has an empty alt where it shouldn't be
Has alt text that's suspiciously short, long, or auto-generated (like IMG_4823.jpg)

You get a prioritized report so you can fix the worst issues first, and it can generate AI-powered alt text suggestions for the ones that need it.

Writing good alt text (once you find the gaps)

Finding missing alt text is step one. Writing good replacements is step two. A few rules I follow:

Be specific, not generic. "Golden retriever puppy playing in autumn leaves" beats "dog photo."

Keep it under 125 characters. Screen readers may truncate longer text.

Skip "Image of" / "Photo of." Screen readers already announce that it's an image.

Match the context. The same chart might need different alt text on a marketing page vs. a data report.

Mistakes I see constantly

After auditing thousands of sites, these come up again and again:

Filenames as alt text — banner-v2-final.png is not alt text
Keyword stuffing — "best cheap shoes buy shoes online" helps no one and can hurt your SEO
Same alt text on every image — screen reader users can't tell them apart
No alt attribute at all — some CMS themes and plugins just don't add one

Wrapping up

Checking alt text is one of those small things that has an outsized impact — on accessibility, on SEO, and on the overall quality of your site. Start with DevTools for quick checks, use WAVE for page-level audits, and use a crawler like Alt Audit when you need the full picture.

If you want the complete walkthrough with screenshots and more detail, I wrote a longer version here: How to Check if an Image Has Alt Text (4 Easy Methods)

What's your go-to method for checking alt text? I'd love to hear in the comments.

Is Your Alt Text Actually Good? A Developer's Guide to Writing (and Checking) Descriptions That Work

Rustamjon Akhmedov — Mon, 16 Mar 2026 12:44:11 +0000

You've added alt text. But is it any good?

Most developers I talk to treat alt text as a binary thing: either the alt attribute is there or it isn't. But the spec is more nuanced than that, and bad alt text — alt text that's technically present but useless — can be just as harmful as no alt text at all.

This guide covers how to write effective alt text, how to evaluate what you've already got, and how to use a free checker to get instant quality scores.

Why "Any Alt Text" Isn't Good Enough

Here's a quick breakdown of common failure modes:

<!-- Failure 1: Missing entirely -->
<img src="product-shot.jpg">

<!-- Failure 2: Filename as alt text (useless) -->
<img src="IMG_2847.jpg" alt="IMG_2847.jpg">

<!-- Failure 3: Generic descriptor (nearly useless) -->
<img src="team.jpg" alt="image">

<!-- Failure 4: "Image of" redundancy (screen readers already say "image") -->
<img src="ceo.jpg" alt="Image of CEO">

<!-- Failure 5: Keyword stuffing (bad for everyone) -->
<img src="shoe.jpg" alt="Nike shoe shoes footwear buy Nike cheap Nike shoes">

<!-- What actually works -->
<img src="product-shot.jpg" alt="Black Nike Air Max 90 running shoes on white background, side view">

Each of those failures has a real impact. Screen reader users get confusing or no information. Search engines can't index the image content. Accessibility audits fail. Lawsuits cite them.

The Alt Text Quality Scoring Framework

Here's how I think about alt text quality — a framework you can apply yourself or automate:

Score: 0 — Missing or empty (for meaningful images)

<img src="chart.png">  <!-- 0/100 -->
<img src="chart.png" alt="">  <!-- 0/100 for meaningful image -->

Empty alt text (alt="") is correct for purely decorative images. It tells screen readers to skip the image. But for any image that conveys information, this is a critical failure.

Score: 20-30 — Filename or generic label

<img src="DSC_0023.jpg" alt="DSC_0023.jpg">  <!-- 20/100 -->
<img src="team.jpg" alt="photo">  <!-- 25/100 -->

Better than nothing, barely. The field is filled but the value is meaningless to users and search engines alike.

Score: 40-50 — Generic but relevant

<img src="annual-report.jpg" alt="report cover">  <!-- 45/100 -->
<img src="team.jpg" alt="team photo">  <!-- 45/100 -->

At least it's contextually relevant, but it doesn't describe what's actually in the image. Who's on the team? What does the report cover look like?

Score: 70-80 — Specific and descriptive

<img src="team.jpg" alt="Five engineers gathered around a whiteboard in a modern office">  <!-- 75/100 -->

This is passing. It describes who and what is visible. A screen reader user gets useful context.

Score: 90-100 — Specific, contextual, appropriately concise

<img src="q4-results.jpg" alt="Bar chart showing 45% revenue increase in Q4 2024 compared to Q3">  <!-- 95/100 -->

Describes subject, context, and relevant detail. Under 125 characters. No redundant phrases. This is the target.

The Do's and Don'ts at a Glance

Do:

✅ Be specific — describe what's actually visible
✅ Keep it under 125 characters (screen readers may truncate longer text)
✅ Include relevant context (who, what, where for people; data for charts)
✅ Use natural language with relevant keywords where they fit organically
✅ Use alt="" for purely decorative images

Don't:

❌ Start with "Image of", "Photo of", "Picture of"
❌ Use the filename as alt text
❌ Repeat the surrounding text verbatim
❌ Keyword stuff
❌ Leave it blank for meaningful images

Alt Text by Image Type

Different images need different approaches:

Image type	What to describe
Product photo	Color, type, key features, angle/background
Person / headshot	Name (if known), role/context, setting
Data chart / graph	Chart type, key finding or trend, time period
Screenshot	What UI is shown, what action is being demonstrated
Logo	Brand name + "logo"
Decorative	`alt=""` — no description needed
Infographic	Summarize the key information conveyed
Button/icon image	The action the button performs

How to Check Your Existing Alt Text

Option 1 — Browser DevTools (manual)

Right-click any image → Inspect → look for the alt attribute in the HTML:

// Check all images on a page with console one-liner
document.querySelectorAll('img').forEach(img => {
  console.log({
    src: img.src,
    alt: img.alt,
    hasAlt: img.hasAttribute('alt'),
    isEmpty: img.alt === ''
  });
});

This gets tedious fast for large pages. And it only checks the current page.

Option 2 — Free Alt Text Checker (instant quality score)

Alt Audit's free alt text checker lets you paste any existing alt text and get an instant quality score with specific feedback:

Length check (is it too short, too long, or just right?)
Redundancy detection (does it start with "image of"?)
Filename detection (is it just a filename?)
Descriptiveness scoring (does it have enough words to be meaningful?)

It also gives a suggested improvement when the score is below 70, so you're not just told what's wrong — you get direction on how to fix it.

Option 3 — AI Generation for New or Missing Alt Text

If you have images with no alt text at all, manually checking won't help — you need to generate from scratch. The same tool offers AI-powered generation: upload an image and get an auto-generated, quality alt text description based on what's actually in the image.

Free tier includes 25 AI-generated alt texts per month, no credit card required.

Building Alt Text Into Your Dev Workflow

The real fix isn't one-time cleanup — it's making good alt text the default:

For developers:

Add alt attribute as a required field in your CMS or component system
Lint HTML in your CI/CD for missing alt attributes:

# Using axe-core CLI
npx axe https://yoursite.com --rules image-alt

For content teams:

Create an alt text style guide with examples by image type
Make alt text a required field in your media upload workflow
Review AI-generated alt text before publish for brand or data-sensitive images

For agencies:

Include an alt text audit in every site deliverable
Use Alt Audit's site scanner to generate a compliance report for clients

TL;DR

Alt text quality exists on a spectrum. Empty is not the same as bad, and bad is not the same as good. The goal is specific, concise, and contextual — describing what's actually in the image in a way that serves both screen reader users and search engines.

If you're unsure where your current alt text stands, start with the free alt text checker. Paste in a description, get a quality score, and see exactly what to improve. It takes 30 seconds and you might be surprised by what you find.

This post was originally published on Alt Audit — Free Alt Text Checker. Get 25 free AI-generated alt texts per month with a free account.

I Automated Alt Text for 10,000 WordPress Images — Here's What I Learned

Rustamjon Akhmedov — Mon, 16 Mar 2026 12:36:23 +0000

WordPress powers 43% of the internet. And roughly 43% of those sites have the same problem: a media library full of images with no alt text, empty alt attributes, or filenames like IMG_2847.jpg passed off as descriptions.

I've been there. Working across agency client sites, I've stared down libraries of 5,000, 10,000, even 30,000 images — all needing alt text. Here's what I've learned about doing it efficiently without sacrificing quality.

Why Alt Text Is a Real Problem (Not Just a Compliance Checkbox)

Let's be honest about what's actually at stake:

Accessibility: Screen readers read the alt attribute aloud. An empty or missing alt attribute means a user relying on a screen reader gets absolutely nothing. On an image-heavy site — eCommerce, photography, news — that's a broken experience.

SEO: Google can't see images. It reads alt text. Descriptive alt text is how your images get indexed and ranked in image search. A site with 5,000 images and no alt text has 5,000 missed SEO opportunities.

Legal risk: ADA lawsuits targeting inaccessible websites are rising year over year. Missing alt text on meaningful images is consistently cited in demand letters and complaints.

The WordPress Alt Text Problem Is Structural

WordPress stores four text fields per image in the media library: title, caption, description, and alt text. The alt text field is the only one that maps to the HTML alt attribute that assistive technologies and search engines actually use.

But here's the structural problem: WordPress never auto-fills alt text. When you upload an image, the alt text field is blank. If you don't fill it in manually, it stays blank.

For a site uploading 50 images a week, that's 2,600 images per year added with no alt text. After five years? You're not fighting a backlog — you're fighting an archive.

How I Approached Automation

After trying several approaches, the workflow that actually scales looks like this:

Step 1 — Audit First

Before generating anything, you need to know what you're dealing with. How many images are missing alt text? What percentage have empty strings vs. filenames vs. real descriptions that just need improvement?

# Quick approach: search your DB for empty alt text
SELECT pm.post_id, pm.meta_value 
FROM wp_postmeta pm
WHERE pm.meta_key = '_wp_attachment_image_alt'
AND (pm.meta_value = '' OR pm.meta_value IS NULL)

But running raw DB queries is clunky for non-developers, and doesn't give you a visual overview. I ended up using Alt Audit's WordPress plugin for this — it scans the full media library and gives you a dashboard of missing, empty, and inadequate alt text across all images.

Step 2 — Bulk Generation

Once you know the scope, you need to generate alt text at scale. The important distinction here:

Generation on upload — Good for keeping up with new content. New images get auto-generated alt text when they're uploaded.

Bulk retroactive generation — Critical for the existing backlog. Select all images missing alt text, run AI generation in batch, review and apply.

The AI engine in Alt Audit uses Google Gemini Vision to analyze each image and generate contextually accurate descriptions. For a batch of 500 images, the process takes minutes rather than hours.

Step 3 — Review Before Applying

Not everything should go live unreviewed. AI vision models are excellent at general images (products, people, illustrations) but can struggle with:

Technical diagrams or charts with specific data labels
Images with embedded text (infographics, screenshots)
Brand-specific or context-dependent images

My rule: bulk-apply for the long tail (products, stock photos, banners), review manually for editorial and data-heavy images.

Step 4 — Set Up Ongoing Automation

Once the backlog is cleared, set up automatic alt text generation on upload. Every new image gets a description from day one. The backlog never grows back.

The Alt Audit WordPress Plugin — Setup in 5 Minutes

# Install via WP CLI
wp plugin install alt-audit --activate

Or search "Alt Audit" in the WordPress plugin directory and activate with one click.

After activation:

Create a free account at altaudit.com (25 AI credits/month, no card needed)
Copy your API key and paste it in the plugin settings
Go to Media → Alt Audit Scanner to run your first scan
Select images with missing alt text and click Generate Alt Text
Review the suggestions and click Apply

That's it. The plugin handles the rest — including rule-based fallback generation for images where AI isn't needed (logos, icons, structural images).

Alt Text Quality: What "Good" Actually Looks Like

The goal isn't just filling the field — it's writing descriptions that actually help users and search engines.

Image type	Bad alt text	Good alt text
Product photo	`blue-headphones.jpg`	`Blue wireless over-ear headphones with cushioned ear pads on white background`
Team photo	`team`	`Four engineers standing in front of a server rack at Alt Audit's London office`
Chart	`chart-2024.png`	`Bar chart showing 45% increase in organic search traffic from January to December 2024`
Decorative banner	`banner`	(should be `alt=""`)

The magic number: aim for 10–150 characters, describe the subject and context, skip "image of" or "photo of" (screen readers already say that).

Comparing WordPress Alt Text Approaches

Approach	Scale	Quality	Time
Manual writing	Low	High	4+ hrs/100 images
Yoast SEO	Reminder only	N/A	Still manual
AI Engine plugin	Medium	Good	~30 min/100 images
Alt Audit	High	Excellent	~5 min/100 images

The Takeaway

Alt text at scale is a solved problem in 2026. AI vision models are accurate enough for the vast majority of WordPress images, and the tooling to automate bulk generation has matured significantly.

The bottleneck isn't technical anymore — it's awareness. Most sites don't have a systematic approach to alt text, and it shows in their accessibility scores and image search rankings.

If you're managing a WordPress site and haven't audited your media library lately, start there. You'll probably find thousands of images that need attention. The Alt Audit plugin (free tier available) is a solid starting point for the audit and the fix.

This post was originally published on Alt Audit — WordPress Alt Text Plugin. Free plan includes 25 AI credits/month. No credit card required.

How to Get Your Website WCAG 2.2 Compliant (Without Losing Your Mind)

Rustamjon Akhmedov — Mon, 16 Mar 2026 12:29:28 +0000

Here's a stat that should make every developer pause: 96% of websites have detectable WCAG failures. Not some websites — nearly all of them.

And the #1 culprit? Missing alt text on images.

If your site is in that 96%, you're not just failing an accessibility audit — you're potentially exposed to ADA lawsuits, locking out 1 billion+ users with disabilities, and leaving SEO value on the table. The good news: WCAG compliance is way more achievable than it sounds, especially with the right tools.

What Actually Is WCAG 2.2?

WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility, published by the W3C. Version 2.2, released in 2023, added 9 new success criteria to an already comprehensive spec.

There are three conformance levels:

Level	What it means	Required by?
A	Bare minimum — alt text, keyboard nav, no seizure content	Everyone
AA	Legal standard in most countries	ADA, EAA, EN 301 549
AAA	Best practice for government/public sector	Recommended only

If your site serves users in the US, EU, or UK, WCAG 2.1/2.2 AA is what you need to target.

The 4 Pillars Every Dev Needs to Know (POUR)

Every WCAG criterion maps to one of four principles:

🔍 Perceivable — Can users receive the content? (alt text, captions, color contrast)
⌨️ Operable — Can users interact with it? (keyboard navigation, focus indicators, no time traps)
💬 Understandable — Is it clear? (plain language, predictable UI, helpful error messages)
🛠️ Robust — Does it work with assistive tech? (valid HTML, proper ARIA, screen reader support)

The Most Common WCAG Failures (Fix These First)

You don't need to boil the ocean. Start with the issues that affect the most users:

1. 🖼️ Missing Alt Text (WCAG 1.1.1)

The single most common failure. Every meaningful image needs a descriptive alt attribute. Empty alt="" is correct only for decorative images.

<!-- Bad -->
<img src="team-photo.jpg">

<!-- Also bad -->
<img src="team-photo.jpg" alt="image">

<!-- Good -->
<img src="team-photo.jpg" alt="Five engineers collaborating around a whiteboard at Alt Audit HQ">

2. 🎨 Insufficient Color Contrast (WCAG 1.4.3)

Normal text must have a contrast ratio of at least 4.5:1 against its background. Large text (18pt+) needs 3:1.

3. 🖱️ Keyboard Inaccessibility (WCAG 2.1.1)

Every interactive element — buttons, links, dropdowns, modals — must be reachable and operable via keyboard alone. Tab through your site right now. Can you reach everything?

4. 🏷️ Missing Form Labels (WCAG 1.3.1)

Every <input>, <select>, and <textarea> needs a programmatically associated <label>. Placeholder text alone does not count.

5. 🔗 Non-Descriptive Links (WCAG 2.4.4)

Links that say "click here" or "read more" are useless to screen reader users who navigate by tab. Use descriptive text: "Read the WCAG 2.2 compliance guide."

How to Run a WCAG Compliance Check

Automated scanning (catches ~30–40% of issues)

Use these tools to get a baseline fast:

Alt Audit — Scans your entire site for WCAG failures, with special focus on alt text (the #1 failure). Generates AI-powered fixes in bulk. Free plan available.
axe DevTools — Browser extension that highlights violations in DevTools
Lighthouse (Chrome) — Built-in audit with accessibility scoring
WAVE — Visual overlay tool for accessibility errors

Manual testing (catches the other 60–70%)

Tab through the entire page — can you reach everything?
Use VoiceOver (Mac/iOS) or NVDA (Windows) for a real screen reader experience
Test at 200% zoom — does content reflow without horizontal scrolling?
Check every form for labels and error messages

A Practical WCAG 2.2 Compliance Checklist

Here's a quick checklist for WCAG 2.2 AA:

Images & Media

[ ] All meaningful images have descriptive alt text
[ ] Decorative images have alt=""
[ ] Videos have captions and audio descriptions

Keyboard & Navigation

[ ] All interactive elements are keyboard accessible
[ ] Visible focus indicator on all focusable elements
[ ] Skip navigation link at the top of the page
[ ] No keyboard traps

Forms

[ ] All inputs have associated labels
[ ] Error messages are clear and descriptive
[ ] Required fields are indicated

Visual

[ ] Text contrast ratio ≥ 4.5:1 (normal text)
[ ] Text contrast ratio ≥ 3:1 (large text)
[ ] Text can be resized to 200% without loss of functionality

New in WCAG 2.2

[ ] Dragging actions have pointer alternatives
[ ] Target size ≥ 24×24 CSS pixels for interactive elements
[ ] Focus not obscured by sticky headers/footers

The Alt Text Problem at Scale

Fixing one image is easy. Fixing 5,000? That's where most sites get stuck.

If you're running a WordPress site, a large content platform, or managing multiple client sites, you need automated alt text generation at scale. Tools like Alt Audit can scan your entire site, identify every image with missing or inadequate alt text, and generate WCAG-compliant descriptions using AI — all in one workflow.

The output? A full compliance report you can download and share with clients or stakeholders.

TL;DR — Start Here

Run an automated scan — Find out where you stand in minutes
Fix alt text first — It's the #1 failure and the easiest win
Fix keyboard navigation — Tab through your site and document every gap
Fix color contrast — Run your palette through a contrast checker
Manual test with a screen reader — Nothing replaces real assistive tech testing
Document and retest — Accessibility is ongoing, not a checkbox

The goal isn't perfection on day one. It's making meaningful progress, building accessible habits into your dev workflow, and not being the team that gets a lawsuit because nobody checked if the contact form had labels.

This article was originally published on Alt Audit — WCAG Compliance Tool. Alt Audit helps developers and agencies run automated WCAG compliance checks and fix alt text at scale.

Best WordPress Alt Text Generator Plugins in 2026 (Compared)

Rustamjon Akhmedov — Mon, 16 Mar 2026 12:03:51 +0000

WordPress powers over 43% of all websites on the internet — and the vast majority of them have an alt text problem. Manually writing alt text for every image is time-consuming, tedious, and easy to forget. The result? Thousands of images with no alt text, empty attributes, or unhelpful defaults like the filename.

This hurts both SEO (search engines can't index images properly) and accessibility (screen reader users get no useful context).

The good news: AI-powered WordPress alt text generator plugins now make it possible to automatically generate accurate, descriptive alt text for your entire image library — in minutes.

What to Look for in a WordPress Alt Text Plugin

Not all alt text plugins are created equal. Key criteria to evaluate:

AI quality — Does it use a capable vision AI that produces accurate, context-aware descriptions?
Bulk processing — Can it handle your existing image library, not just new uploads?
Overwrite control — Can you choose whether to overwrite existing alt text or only fill in missing ones?
Multilingual support — Can it generate alt text in multiple languages for international sites?
Customization — Can you set tone, style, or keyword focus?
WooCommerce compatibility — Does it handle product images correctly?
WCAG compliance focus — Does it help meet accessibility standards, not just fill in text?

Top WordPress Alt Text Generator Options in 2026

1. Alt Audit (API Integration)

Alt Audit is a dedicated accessibility and alt text platform that integrates with WordPress via its API. Unlike a traditional plugin, Alt Audit gives you a full dashboard to scan your site, review every image, and generate AI-powered alt text — with full control over what gets published.

Key features:

Full-site scanning across all WordPress pages and posts
AI-generated alt text using advanced vision models
Bulk fix capabilities — update hundreds of images at once
Detailed reporting showing missing, empty, or inadequate alt text
Multilingual alt text generation for international sites
WCAG compliance-focused — built specifically for accessibility, not just SEO

Ideal for agencies, developers, and site owners who want a professional-grade solution with full auditability.

2. Yoast SEO (Basic Alt Text Reminders)

Yoast SEO is one of the most popular WordPress plugins overall. It includes basic alt text prompts in its content analysis — flagging images that are missing alt text and reminding you to add them.

However, Yoast does not automatically generate alt text. For large sites or media libraries, you're still writing alt text manually.

3. Imagify / ShortPixel (Optimization-First)

Image optimization plugins like Imagify and ShortPixel focus primarily on compressing and converting images for performance. Some have begun adding basic alt text features, but their core competency is not AI-generated descriptions.

Worth using alongside a dedicated alt text tool, but not as a primary solution.

4. AI Engine (ChatGPT-Powered)

AI Engine is a popular WordPress plugin leveraging OpenAI's API for content generation tasks, including alt text. It can generate alt text on upload and offers some bulk processing.

Output quality depends on the model and prompt configuration — some technical setup required. A flexible option for developers comfortable with API configuration.

How to Automatically Generate Alt Text for Existing WordPress Images

Most WordPress sites have hundreds or thousands of images already uploaded with no alt text. Here's the general workflow:

Audit your existing library — Identify how many images are currently missing alt text (tools like Alt Audit can give you a complete count instantly)
Choose your generation tool — Select a plugin or platform that supports bulk alt text generation for existing media
Configure preferences — Set your preferred language, tone, and any keywords to incorporate
Review before publishing — For brand-sensitive images, review AI-generated text before applying
Apply in bulk — Run the bulk update to populate missing alt text across your library
Monitor going forward — Set up automatic generation for future uploads

Alt Text vs. Image Title in WordPress: What's the Difference?

WordPress stores several text fields for each image:

Alt text — Exposed to screen readers via the alt attribute in HTML ✅
Title — NOT read by screen readers by default ❌
Caption — Displayed below images, not the same as alt text ❌
Description — Used internally in the media library ❌

Make sure your alt text plugin is updating the correct field.

Does Auto-Generated Alt Text Meet WCAG Standards?

Modern vision AI models can produce accurate, contextually appropriate descriptions for most image types. Edge cases where human review is recommended:

Highly specialized technical diagrams
Images with embedded text
Complex infographics

For everyday images (product photos, team headshots, blog illustrations, banners), AI-generated alt text from a quality tool will meet WCAG 1.1.1 Level A requirements. The key is using a tool that generates real, meaningful descriptions rather than short, generic labels.

Get Started with Alt Text Automation

If your WordPress site has images without alt text, every day you wait is a day those images are invisible to screen readers and search engines. Automated alt text generation has never been more accessible or accurate.

Alt Audit helps WordPress site owners and agencies identify every image with missing or inadequate alt text and fix them at scale with AI — achieving WCAG compliance faster and improving image SEO at the same time.

Originally published at altaudit.com

WCAG Audit: A Complete Guide to Testing and Fixing Web Accessibility

Rustamjon Akhmedov — Mon, 16 Mar 2026 11:59:24 +0000

A WCAG audit is a systematic evaluation of your website to determine how well it conforms to the Web Content Accessibility Guidelines (WCAG) — the globally recognized standards published by the W3C for making digital content accessible to people with disabilities.

Whether you're a developer, designer, or business owner, conducting a WCAG audit is one of the most important steps toward building an inclusive digital experience and staying compliant with laws like the ADA, Section 508, and the European Accessibility Act (EAA).

Why WCAG Audits Matter

Over 1 billion people worldwide live with some form of disability. When websites aren't accessible, these users are excluded from information and services. Beyond ethics, there are strong legal and business reasons to audit regularly:

Legal compliance: Failing to meet accessibility standards can result in lawsuits and fines
Wider reach: Accessible sites serve more users, including older adults and those with temporary disabilities
Better SEO: Alt text, proper headings, and descriptive links also improve search rankings
Improved UX: Accessibility improvements benefit all users

Understanding WCAG Levels: A, AA, and AAA

WCAG is organized into three conformance levels:

Level A: Minimum baseline — absolute essentials
Level AA: Required by most laws (ADA, EAA) — the standard target for most organizations
Level AAA: Highest level — not typically required by law but recommended for specialized use

Most audits target WCAG 2.1 AA or WCAG 2.2 AA.

The Four Principles of WCAG (POUR)

Every WCAG success criterion falls under one of four core principles:

Perceivable — Content must be presented in ways users can perceive (e.g., alt text for images, captions for video)
Operable — UI must be operable (e.g., keyboard accessibility, no seizure-inducing content)
Understandable — Content must be understandable (e.g., clear language, predictable navigation)
Robust — Content must work with assistive technologies (e.g., valid HTML, ARIA attributes)

How to Conduct a WCAG Audit: Step-by-Step

Step 1: Define the Scope

Decide which pages to audit. Prioritize high-traffic pages, checkout flows, contact forms, and critical user journeys.

Step 2: Use Automated Scanning Tools

Automated tools can catch around 30–40% of WCAG issues:

Alt Audit — Detects missing or inadequate alt text across your entire site
axe DevTools — Browser extension catching a wide range of WCAG issues in your dev workflow
WAVE — Free visual tool that overlays accessibility errors on your live site
Lighthouse — Built into Chrome DevTools, provides an accessibility score with recommendations

Step 3: Perform Manual Testing

Manual testing uncovers what automation misses:

Keyboard navigation — Can every element be reached and used with only a keyboard?
Screen reader testing — Use NVDA, JAWS, or VoiceOver to verify content is read correctly
Color contrast — Ensure text meets minimum ratios (4.5:1 for normal text, 3:1 for large text)
Form accessibility — All inputs should have proper labels, error messages, and instructions
Focus indicators — Visible focus states must be present for all interactive elements

Step 4: Document Your Findings

Create a detailed audit report covering:

Each issue found
The WCAG criterion it violates
The severity level (critical, major, minor)
Recommended remediation steps

Step 5: Remediate and Retest

Work through findings systematically, starting with the most critical issues. Retest after each fix to confirm resolution and check for regressions.

Common WCAG Failures to Watch For

These are the most frequently encountered accessibility failures:

Missing or empty alt text on images
Insufficient color contrast
Form inputs without associated labels
Non-descriptive link text ("click here", "read more")
Videos without captions or transcripts
Pages that can't be navigated by keyboard
Missing skip navigation links
Inaccessible PDF documents

How Often Should You Audit?

Accessibility is an ongoing commitment, not a one-time fix. Best practice:

Conduct a full audit at least once a year
Audit after significant changes (redesigns, new templates, major feature launches)
Integrate automated scanning into your CI/CD pipeline to catch regressions early

Start Your WCAG Audit Today

A WCAG audit is the foundation of any serious accessibility program. By identifying and fixing barriers on your website, you protect your organization from legal risk and create a better experience for every visitor.

One of the most common and impactful WCAG failures is missing or inadequate alt text. Tools like Alt Audit make it easy to scan your entire site, identify images with missing alt text, and fix them at scale with AI.

Originally published at altaudit.com

Stop Writing Alt Text Manually: How AI Is Changing Image SEO Forever

Rustamjon Akhmedov — Tue, 03 Mar 2026 18:05:19 +0000

If you've ever stared at a WordPress media library with thousands of images — all missing alt text — you know the feeling. It's somewhere between "I should fix this" and "this is going to take forever."

You're not wrong on either count.

Alt text isn't optional. It's the bridge between your images and the people (and bots) who can't see them. Get it right, and you boost your SEO, pass accessibility audits, and make your site usable for everyone. Get it wrong — or skip it entirely — and you're leaving real value on the table.

The good news? You no longer have to do it manually.

Why Alt Text Actually Matters

When a screen reader encounters an image on your page, it reads the alt text aloud. If that field is empty, the user gets nothing — or worse, a garbled filename like IMG_20231104_152301.jpg. That's not just unhelpful; it's a barrier.

For search engines, it's a similar story. Google can't "see" your images the way a human can. Alt text is how you tell it: here's what this image shows, and here's why it matters on this page. Without it, your images are essentially invisible to Google Image Search.

There's also a legal angle that's getting harder to ignore. WCAG 2.1 Level A (Success Criterion 1.1.1) requires non-text content to have a text alternative. The EU's European Accessibility Act came into effect in June 2025. Similar legislation is expanding in the US and UK. The question isn't if you'll need to fix your alt text — it's when.

The Manual Approach Doesn't Scale

For a site with 50 images, manual alt text is manageable. For 5,000? It becomes a project. For 50,000? A crisis.

Here's what it actually looks like in practice:

Crawl your site to identify missing or weak alt text
Open each image one by one in the media library
Write a description, weave in a keyword, save
Repeat hundreds (or thousands) of times
New images get uploaded next week — cycle restarts

It's not that it can't be done. It's that it shouldn't have to be done this way.

What AI-Powered Alt Text Generation Actually Does

Modern AI doesn't just slap a generic label on your image. Good tools use computer vision to analyze the actual content — objects, scenes, context — and generate natural language descriptions that read like something a human wrote.

The rough process:

Image recognition — identifies what's in the image: a product, person, landscape, diagram
Context awareness — factors in surrounding data like page title, product name, or focus keyword
Natural language generation — turns those observations into a coherent, useful description

The result isn't perfect 100% of the time, but it gets you 80-90% of the way there. That's the difference between a months-long project and an afternoon.

How Alt Audit Handles This (And Why the Free Tier Is Genuinely Free)

Most alt text tools make you choose: pay for AI, or do it yourself. Alt Audit takes a different approach.

Rule-Based Generation: Free, Unlimited, Offline

The core engine is rule-based generation — completely free, works entirely on your server, no API key, no external service, no monthly subscription.

You set up templates using dynamic variables:

{site_name} | {page_title} | {product_title} | {image_filename}

Alt Audit fills them in automatically based on context. For a WooCommerce product page, it pulls the product title. For a blog post, the post title. It adapts to your content type automatically.

For most sites — especially large libraries with predictable image patterns — this alone handles the overwhelming majority of missing alt text.

Five Quality Levels (Not Just "Has It" or "Doesn't")

Alt Audit scores every image across five statuses:

Status	Meaning
Missing	Critical — fails WCAG
Decorative	Correctly marked as decorative
Weak	Present but unhelpful
Good	Acceptable
Excellent	Optimal

This matters because alt="image" technically exists but does nothing for SEO or accessibility. Alt Audit shows you the full picture — not just a count of empty fields.

AI Generation for Complex Images

When templates aren't enough — infographics, lifestyle photography, complex product shots — you can opt into AI-powered generation. Computer vision analyzes the actual image and writes a description no template could produce.

The AI tier:

Supports 130+ languages (great for multilingual sites and EAA compliance)
Pulls focus keywords from Yoast SEO and Rank Math automatically
Pay-as-you-go, no subscription — new users get 25 free credits to test it

Lives Where You Already Work

No separate dashboard to log into, no CSV exports:

Gutenberg — real-time quality indicators on image blocks as you write
Classic Editor — meta box for per-post auditing
Media Library — inline editing, quality badges, and bulk actions in the standard grid

A Practical Workflow for Bulk Alt Text Cleanup

Here's how to approach a large-scale cleanup using Alt Audit:

Step 1 — Audit. Open the dashboard, scan your media library. You'll immediately see Missing, Weak, Good, and Excellent breakdowns. Start with Missing.

Step 2 — Set up free templates. Configure rule-based templates for your main content types:

WooCommerce:  {product_title} - {site_name}
Blog:         {image_filename} from {page_title}

This handles your library in bulk, instantly, for free.

Step 3 — Use AI for exceptions. Run AI generation on image categories where templates fall short — product lifestyle shots, team photos, custom graphics. Use your free credits to sample quality first.

Step 4 — Review before publishing. Non-negotiable. AI is fast but not infallible. Spot-check a sample, fix anything generic, make sure keywords read naturally.

Step 5 — Maintain going forward. New uploads get flagged automatically in the media library. You won't let the problem rebuild itself.

The Accessibility Compliance Timeline

If you serve EU customers, the European Accessibility Act requires WCAG 2.1 Level A compliance — including image alt text — as of June 2025. US Section 508 and UK accessibility regulations are also expanding in scope.

Alt text is one of the most straightforward accessibility wins available. It doesn't require a redesign or a developer. It's metadata. The hard part is doing it at scale — which is exactly what Alt Audit solves.

Bottom Line

If your site has more than a few hundred images, manual alt text isn't a strategy — it's a backlog. Alt Audit handles the bulk of the work automatically with free rule-based generation, surfaces the images that need human attention through quality scoring, and integrates directly into the WordPress workflow you already use.

The free tier is worth installing today. The AI is there when you need it.

Try Alt Audit free on WordPress.org

Originally published at altaudit.com

Mastering Alt Text Generation: A Comprehensive Guide for SEO and Accessibility

Rustamjon Akhmedov — Thu, 26 Feb 2026 19:39:46 +0000

Okay, let's cut to the chase. I was digging into performance metrics on a client's site, specifically around their blog content, and noticed image loading was a significant bottleneck. Not just slow, but really slow. This wasn't just a UX annoyance; it was impacting engagement and, you guessed it, SEO. We're talking about how a seemingly small piece of HTML can become a major roadblock.

Here's the breakdown of what we found, what we did, and what the impact was.

The Problem: Bloated Images & Missed SEO Opportunities

The client had a ton of blog posts with numerous images. The issue wasn't just the sheer number, but the quality and optimization of these images. Many were high-resolution JPEGs, often uncompressed, leading to massive file sizes.

The symptoms were clear:

Slow page load times: Users were bouncing before content even loaded.
Poor Core Web Vitals scores: Specifically LCP (Largest Contentful Paint) was suffering.
Low Lighthouse scores: Accessibility and SEO scores were taking a hit.
Underperforming image search traffic: Images weren't being discovered or ranked effectively.

Beyond the raw performance, I saw a consistent pattern of poor alt text implementation. It was either missing entirely, generic (image.jpg), or stuffed with keywords. This was a double whammy: hurting accessibility for screen reader users and confusing search engines.

The Investigation: An Audit of Image Assets and Alt Text

My approach was to audit the existing image assets and their alt text implementation across a representative sample of blog posts.

Key areas of focus:

Image File Sizes & Formats:
- What formats were being used (JPEG, PNG, GIF)?
- What were the average file sizes per image?
- Were modern formats like WebP being considered?
- Were images being served at appropriate resolutions for their display context?
alt Text Quality:
- Was alt text present for all meaningful images?
- Was it descriptive and accurate?
- Was it free of keyword stuffing?
- Did it convey the purpose of the image within the content?
Technical Implementation:
- How were images being embedded? Standard <img> tags?
- Were there any lazy loading mechanisms in place?

The Findings: A Perfect Storm of Neglect

The audit revealed a predictable, yet frustrating, set of issues:

Average JPEG file size: 850KB. Many exceeded 1.5MB.
Image format prevalence: 90% JPEGs, 8% PNGs (for graphics that could have been SVGs), 2% GIFs (often used as static images).
alt text presence: Only about 40% of images had alt text.
alt text quality:
- Of the alt text present, 60% was generic (e.g., "Blog post image").
- 20% was keyword-stuffed (e.g., "Best developer tools for coding productivity software").
- Only 20% was reasonably descriptive.

This confirmed that both image optimization and alt text strategy were severely lacking.

The Technical Fix: A Two-Pronged Optimization Strategy

We implemented a multi-step solution targeting both image optimization and alt text best practices.

1. Image Optimization Pipeline

We introduced a process to optimize images before they were uploaded, and in some cases, implemented server-side resizing.

Format Conversion: Prioritizing WebP for its superior compression and quality. Fallback to JPEG for older browsers.
Compression: Using tools like imagemin (via Gulp or Webpack) to aggressively compress images without significant visual degradation.
Responsive Images: Implementing <picture> elements or srcset attributes to serve appropriately sized images based on the user's viewport.
Lazy Loading: Using native browser lazy loading (loading="lazy") for all images below the fold.

Bad vs. Good: Image Embedding (Responsive)

Bad:

<img src="large-image.jpg" alt="A descriptive alt text.">

Good (using srcset):

<img
  src="medium-image.jpg"
  srcset="small-image.webp 480w,
          medium-image.webp 800w,
          large-image.webp 1200w"
  sizes="(max-width: 600px) 480px,
         (max-width: 1024px) 800px,
         1200px"
  alt="A descriptive alt text."
  loading="lazy"
>

(Note: For simplicity, I've omitted WebP fallbacks here, but they would typically be handled with the <picture> element for broader compatibility.)

2. Strategic `alt` Text Generation

This was less about automation and more about a disciplined approach.

Focus on Context and Purpose: The alt text should describe what the image adds to the content, not just what it is.
Be Concise and Specific: Aim for clarity and avoid jargon or overly long descriptions.
Avoid Keyword Stuffing: Treat alt text as a natural language description, not an SEO hack.
Decorative Images: For purely decorative images, an empty alt="" attribute is appropriate.

Bad vs. Good: alt Text Example

Scenario: A blog post about effective code review practices, featuring a screenshot of a pull request with clear comments.

Bad:

<img src="pr-screenshot.png" alt="code review pull request comments best practices development">

Good:

<img src="pr-screenshot.png" alt="Screenshot of a pull request showing specific feedback on a code change.">

The Measurable Result: Tangible Performance Gains

The impact of these changes was significant and measurable across several key metrics.

Average Image Payload Reduction: Reduced by 65% (from ~850KB to ~300KB per page).
LCP Improvement: Increased by an average of 2.5 seconds across audited pages.
Lighthouse Scores:
- Performance: Improved from an average of 60 to 85.
- Accessibility: Improved from an average of 75 to 98.
- SEO: Improved from an average of 70 to 90.
Image Search Traffic: Saw a 20% increase in traffic originating from Google Image Search within 3 months.
Bounce Rate Reduction: Decreased by 12% on pages with optimized images.

Lessons Learned: The Devil (and the Gains) are in the Details

This project reinforced some critical engineering truths:

Don't Treat Images as Afterthoughts: They are first-class citizens of your web content. Ignoring them is leaving performance and SEO gains on the table.
alt Text is More Than Just SEO: It's a fundamental accessibility requirement. Get it right for everyone.
Automation is Key for Scale: For ongoing content creation, a well-defined image optimization pipeline (built into your CMS or build process) is crucial. Manual optimization is unsustainable.
Balance is Crucial: Aggressive compression can degrade quality. Find the sweet spot. Similarly, alt text needs to be descriptive without being a novel.
Measure Everything: You can't improve what you don't measure. The data from this audit and the subsequent improvements was the driving force for buy-in.

This wasn't a revolutionary new technology, but a disciplined application of existing best practices. The results speak for themselves.

Note: This article was drafted with the assistance of AI and reviewed for technical accuracy by our team.

How I Used Claude CLI to Fix My Laravel SaaS Site’s SEO (Zero Traffic Fully Optimized)

Rustamjon Akhmedov — Mon, 23 Feb 2026 21:27:44 +0000

How I Used Claude CLI to Fix My Laravel SaaS Site’s SEO (Zero Traffic → Fully Optimized)

After spending months building my Laravel SaaS, I expected slow growth — but not zero organic traffic.

The product worked. The UI was clean. Everything deployed smoothly.

Google? Completely unimpressed.

So I did what any developer would do:

I asked an AI to debug my SEO.

The Stack

My project:

Laravel 12
Livewire 3
mcamara/laravel-localization
AI-powered accessibility tool (altaudit.com)

Five languages. Marketing pages. Blog. Clean architecture.

Traffic: basically none.

The SEO Audit

Using Claude CLI, I ran a structured audit of the live site.

The result was brutal — and incredibly useful.

Critical Issues Found

Problem	Why It Matters
No `Sitemap:` in `robots.txt`	Google may not auto-discover pages
Zero canonical tags	Duplicate content risk (especially multilingual sites)
No Open Graph tags	Broken social previews
No structured data (JSON-LD)	No eligibility for rich results
hreflang only on homepage	Localized pages invisible to search engines
No noindex on auth pages	Crawl budget wasted on `/login`, `/dashboard`

Nothing catastrophic individually.

Together? SEO invisibility cloak.

Phase 1 — Crawl & Indexing Fixes

robots.txt

User-agent: *
Disallow: /dashboard
Disallow: /login
Disallow: /register
Disallow: /livewire/
Sitemap: https://altaudit.com/sitemap.xml

Canonical Tags

Added to layouts:

<link rel="canonical" href="{{ url()->current() }}">

noindex for Private Pages

<meta name="robots" content="noindex, nofollow">

Phase 2 — Open Graph & hreflang

Open Graph

<meta property="og:title" content="{{ __('meta.title') }}">
<meta property="og:description" content="{{ __('meta.description') }}">
<meta property="og:url" content="{{ url()->current() }}">
<meta property="og:image" content="{{ asset('images/preview.png') }}">

hreflang (Multilingual SEO Essential)

@foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
<link rel="alternate" hreflang="{{ $localeCode }}"
      href="{{ LaravelLocalization::getLocalizedURL($localeCode) }}">
@endforeach

<link rel="alternate" hreflang="x-default"
      href="{{ LaravelLocalization::getLocalizedURL('en') }}">

Without this, Google treats translations like unrelated pages.

Phase 3 — Structured Data (JSON-LD)

This is where Laravel developers hit a classic trap.

The Blade `@context` Bug

Blade interprets @context, @type, etc. as directives.

Result: ParseError.

Correct Fix

<script type="application/ld+json">
@verbatim
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Alt Audit"
}
@endverbatim
</script>

Alternative for dynamic JSON:

"@@context": "https://schema.org"

Yes, this feels weird. Yes, it works.

Unexpected Laravel Gotchas

1️⃣ route:cache + Localization = Disaster

If you're using mcamara/laravel-localization:

php artisan route:cache  # ❌ DON'T

Localized routes are dynamic.

Use:

php artisan route:clear

2️⃣ view:clear Isn’t Always Enough

Sometimes compiled Blade views linger:

rm -f storage/framework/views/*.php
php artisan view:cache

Instant mystery bug resolution.

3️⃣ Quotes Inside `{{ }}`

{{-- WRONG --}}
gtag('config', '{{ config('services.ga.id') }}')

{{-- CORRECT --}}
gtag('config', '{{ config("services.ga.id") }}')

Tiny detail → fatal error.

New Pages That Actually Matter

SEO isn’t just tags.

It’s intent targeting.

I added:

/about → E-E-A-T signals
/wcag-compliance
/alt-text-seo

Each translated into 5 languages.

What Claude CLI Was Actually Good At

Not magic.

Not "AI hype."

Just extremely efficient at:

✔ Reading real Blade files

✔ Finding real structural problems

✔ Applying consistent fixes

✔ Avoiding generic SEO advice

Most value came from systematic analysis, not individual snippets.

Final State

Every public page now has:

✅ Canonical

✅ Open Graph

✅ hreflang

✅ JSON-LD

✅ Proper robots directives

From invisible → properly indexed candidate.

Key Takeaway

Most Laravel SaaS SEO problems are not complex.

They are death by small omissions.

Canonical missing. hreflang incomplete. robots.txt half-configured.

Individually harmless.

Collectively fatal.

If you’re building a Laravel product and planning to “fix SEO later”…

Later is why Google ignores you.

Curious what your site is silently missing? Run an audit. You might be surprised.

Harnessing Gemini AI for Automatic Alt Text Generation: A PHP Developer's Guide

Rustamjon Akhmedov — Mon, 16 Feb 2026 19:30:40 +0000

Automating Alt Text Generation with Gemini and PHP: Enhancing Accessibility and SEO

In the ever-evolving landscape of web development, accessibility and Search Engine Optimization (SEO) are no longer afterthoughts but fundamental pillars of a successful online presence. For visually impaired users, alt text (alternative text) serves as a vital bridge, providing descriptive information about an image when it cannot be viewed. Screen readers rely on alt text to convey the image's content and function, ensuring an inclusive user experience.

Beyond accessibility, search engines also leverage alt text to understand image content, contributing significantly to image search rankings and overall website discoverability. However, manually generating descriptive and accurate alt text for every image can be a tedious and time-consuming process, especially for websites with large image libraries. This is where the power of Artificial Intelligence, particularly Google's Gemini, comes into play.

This comprehensive guide will explore how developers, particularly those working with PHP, can integrate Gemini's advanced image understanding capabilities to automate alt text generation, enhancing both accessibility and SEO efficiency.

Understanding Gemini: A New Era of AI Multimodality

Gemini, Google's latest and most capable AI model, represents a significant leap forward in artificial intelligence. Unlike previous models that were often specialized for specific tasks (e.g., text generation or image recognition), Gemini is natively multimodal. This means it can understand, operate across, and combine different types of information, including text, images, audio, video, and code, seamlessly.

For developers, this multimodal capability is a game-changer. It allows for more sophisticated and context-aware interactions with AI, opening up new possibilities for application development. When it comes to image analysis, Gemini's ability to process visual information and generate relevant textual descriptions is particularly potent. It can go beyond simple object recognition to understand the context, relationships between objects, and even infer actions or emotions within an image, leading to richer and more informative alt text.

The Technical Foundation: Gemini API and PHP Integration

To leverage Gemini's power for alt text generation, developers will need to interact with the Gemini API. Google provides robust APIs that allow programmatic access to its AI models. For PHP developers, this typically involves making HTTP requests to the Gemini API endpoints. The core process involves sending an image (or a URL to an image) along with a prompt to the Gemini API. The API then processes this input and returns a generated text description.

Setting Up Your Gemini API Key

Before you can start making API calls, you'll need to obtain an API key from Google AI Studio or the Google Cloud Platform. This key acts as your authentication credential. It's crucial to keep your API key secure and avoid exposing it directly in your client-side code. For PHP applications, it's best practice to store API keys in environment variables or secure configuration files that are not publicly accessible.

Making API Requests with PHP

PHP offers several ways to make HTTP requests. The most common and recommended methods include using:

Guzzle HTTP Client: A popular and powerful HTTP client library for PHP. It simplifies making requests, handling responses, and managing errors.
cURL: PHP's built-in cURL extension provides low-level access to various network protocols, including HTTP. While more verbose than Guzzle, it's a reliable option.

Let's outline a conceptual example using Guzzle to send an image and a prompt to the Gemini API for alt text generation.

<?php
require 'vendor/autoload.php'; // Assuming you're using Composer for Guzzle

use GuzzleHttp\Client;
use GuzzleHttp\Exception\RequestException;

/**
 * Generates alt text for an image using the Gemini API.
 *
 * @param string $imagePath The local path to the image file.
 * @param string $apiKey Your Gemini API key.
 * @param string $geminiApiEndpoint The Gemini API endpoint URL.
 * @return string|null The generated alt text, or null if an error occurred.
 */
function generateAltText(string $imagePath, string $apiKey, string $geminiApiEndpoint): ?string {
    $client = new Client();

    // Ensure the image file exists and is readable
    if (!file_exists($imagePath) || !is_readable($imagePath)) {
        error_log("Error generating alt text: Image file not found or not readable at {$imagePath}");
        return null;
    }

    try {
        // Prepare the image data for upload
        $imageData = file_get_contents($imagePath);
        if ($imageData === false) {
            throw new Exception('Could not read image file.');
        }
        $base64Image = base64_encode($imageData);
        $mimeType = mime_content_type($imagePath);

        // Construct the request body
        $requestBody = [
            'contents' => [
                [
                    'parts' => [
                        ['text' => 'Describe this image in detail for alt text. Focus on key visual elements and context.'],
                        [
                            'inline_data' => [
                                'mime_type' => $mimeType,
                                'data' => $base64Image
                            ]
                        ]
                    ]
                ]
            ]
        ];

        // Make the POST request to the Gemini API
        $response = $client->post($geminiApiEndpoint . '?key=' . $apiKey, [
            'json' => $requestBody,
            'timeout' => 60, // Set a reasonable timeout
        ]);

        $statusCode = $response->getStatusCode();
        if ($statusCode !== 200) {
            throw new Exception("API request failed with status code {$statusCode}.");
        }

        $body = $response->getBody()->getContents();
        $data = json_decode($body, true);

        // Extract and return the generated alt text
        if (isset($data['candidates'][0]['content']['parts'][0]['text'])) {
            return trim($data['candidates'][0]['content']['parts'][0]['text']);
        } else {
            // Log API response for debugging if alt text is not found
            error_log('Gemini API response did not contain expected alt text structure: ' . print_r($data, true));
            return null;
        }

    } catch (RequestException $e) {
        // Handle Guzzle-specific exceptions
        $response = $e->getResponse();
        if ($response) {
            $statusCode = $response->getStatusCode();
            $errorBody = $response->getBody()->getContents();
            error_log("Gemini API Request Error ({$statusCode}): {$errorBody}");
        } else {
            error_log('Gemini API Request Error: ' . $e->getMessage());
        }
        return null;
    } catch (Exception $e) {
        // Log other exceptions
        error_log('General Error generating alt text: ' . $e->getMessage());
        return null;
    }
}

// --- Example Usage ---

// Load API key from environment variable for security
$apiKey = getenv('GEMINI_API_KEY');
// Replace with the actual Gemini API endpoint for the model you are using (e.g., Gemini Pro Vision)
$geminiApiEndpoint = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-pro-vision:generateContent';

$imagePath = __DIR__ . '/path/to/your/image.jpg'; // Use __DIR__ for relative paths within the script

if (!$apiKey) {
    echo "Error: Gemini API Key not configured. Please set the GEMINI_API_KEY environment variable.\n";
} elseif (!file_exists($imagePath)) {
    echo "Error: Image file not found at {$imagePath}.\n";
} else {
    echo "Generating alt text for: " . basename($imagePath) . "...\n";
    $altText = generateAltText($imagePath, $apiKey, $geminiApiEndpoint);

    if ($altText) {
        echo "Generated Alt Text: " . htmlspecialchars($altText) . "\n";
    } else {
        echo "Failed to generate alt text. Please check error logs.\n";
    }
}

?>

Note:

Replace https://generativelanguage.googleapis.com/v1beta/models/gemini-pro-vision:generateContent with the actual Gemini API endpoint for the model you intend to use.
Ensure you have Guzzle installed via Composer: composer require guzzlehttp/guzzle.
Store your GEMINI_API_KEY in your server's environment variables for security.

Crafting Effective Prompts for Alt Text Generation

The quality of the generated alt text is heavily influenced by the prompt provided to the Gemini model. A well-crafted prompt guides the AI to produce descriptions that are not only accurate but also contextually relevant and SEO-friendly.

Key Elements of an Effective Prompt:

Clarity and Specificity: Clearly state the objective. For example, instead of just "Describe this image," use "Describe this image for use as alt text on a website, focusing on its key elements and purpose."
Contextual Information (Optional but Recommended): If the image is part of a specific article or product page, providing that context can lead to more tailored alt text. For instance, "This image is for a blog post about sustainable gardening. Describe the image, highlighting any plants or gardening tools."
Length and Detail: Specify the desired level of detail. "Provide a concise description" versus "Provide a detailed description."
SEO Considerations: You can even hint at SEO goals. "Describe this image, ensuring the description is useful for users and potentially includes relevant keywords if natural to do so."

Example Prompts:

"Generate alt text for this image. Focus on the main subject and any actions taking place."
"Describe this product image for an e-commerce website. Include details about the product's appearance and any notable features."
"This image depicts a historical event. Provide an accurate and informative description suitable for an educational website."

Experimentation with different prompts is key to finding what works best for your specific use case and the nuances of the Gemini model you are utilizing.

Best Practices for Implementing Automated Alt Text Generation

While Gemini offers a powerful solution for automating alt text generation, a purely automated approach might not always yield perfect results. A hybrid strategy often proves most effective, combining AI's efficiency with human oversight.

Human Review and Refinement

It's highly recommended to implement a review process where generated alt text is checked by a human before being finalized. This ensures accuracy, catches any potential misinterpretations by the AI, and allows for fine-tuning descriptions to perfectly match the image's intent and context within the webpage.

Handling Different Image Types

Consider how you'll handle various image types:

Decorative Images: Images that purely serve aesthetic purposes and don't convey critical information might not need detailed alt text. In such cases, an empty alt attribute (alt="") is often appropriate, signaling to screen readers to skip the image. You might need logic to identify these or a manual tagging system.
Functional Images (e.g., Buttons, Icons): Alt text for these should describe the action the image performs (e.g., alt="Search", alt="Add to Cart"). Gemini can be prompted to identify these functions if context is provided.
Informative Images (Charts, Graphs, Infographics): These often require more detailed descriptions, potentially summarizing the data presented. Gemini can provide a starting point, but significant human input might be necessary for complex data visualizations.

Performance and Cost Considerations

API Rate Limits: Be mindful of the API rate limits imposed by Google. Implement appropriate error handling and potentially caching mechanisms to avoid hitting these limits.
Cost: API usage typically incurs costs. Monitor your usage and consider optimizing requests. For instance, batching requests where possible or only generating alt text for new uploads rather than re-processing existing images.
Asynchronous Processing: For large-scale operations, consider implementing asynchronous processing (e.g., using job queues) to avoid blocking your web application and provide a better user experience.

Enhancing SEO with Gemini-Generated Alt Text

Accurate and descriptive alt text is a cornerstone of effective SEO. By leveraging Gemini, you can significantly improve your website's SEO performance in several ways:

Improved Image Search Rankings

Search engines like Google use alt text to index images. When users search for images, well-optimized alt text increases the likelihood of your images appearing in the search results. Gemini's ability to generate descriptive text helps search engines better understand the image's content, leading to higher relevance and better rankings.

Better Understanding of Page Content

Search engine crawlers analyze all the content on a webpage, including alt text. Descriptive alt text provides additional context about the page's topic, reinforcing its relevance for specific keywords and improving the page's overall SEO score.

Enhanced User Experience and Reduced Bounce Rates

While not a direct ranking factor, user experience is paramount. Images that are relevant to the content and accurately described via alt text contribute to a more engaging and informative user journey. This can lead to lower bounce rates and increased time spent on site, both positive signals for SEO.

Accessibility as an SEO Signal

Google increasingly emphasizes accessibility. By ensuring your website is accessible through proper alt text implementation, you align with search engine best practices and potentially gain favor in search rankings. Implementing Gemini for alt text generation is a proactive step towards building a more inclusive and SEO-friendly website.

Conclusion: The Future of Image Content Optimization

The integration of AI models like Gemini into web development workflows presents a transformative opportunity. Automating alt text generation using Gemini's advanced multimodal capabilities significantly streamlines the process, making it more efficient and scalable. For PHP developers, harnessing the Gemini API allows for the creation of more accessible, SEO-rich, and user-friendly websites.

While human oversight remains crucial for ensuring the highest quality, AI-powered tools like Gemini provide a powerful foundation for optimizing image content. By embracing these advancements, developers can stay ahead of the curve, build more inclusive digital experiences, and unlock new levels of performance for their web applications.

Call to Action

Ready to supercharge your website's accessibility and SEO?

Get your Gemini API key and start experimenting with the Gemini API.
Integrate the provided PHP code into your project and adapt it to your specific needs.
Develop a robust prompt strategy to ensure the highest quality alt text generation.
Implement a human review process for critical images to guarantee accuracy and context.
Share your experiences and findings in the comments below! Let's build a more accessible web together.

Navigating the ACA Deadline: Why WCAG 2.2 and EN 301 549 are Crucial for Federally Regulated Organizations

Rustamjon Akhmedov — Fri, 13 Feb 2026 03:35:09 +0000

The Countdown is On: June 1, 2026, and the Imperative of Digital Accessibility for Canadian Organizations

Federally regulated private-sector organizations in Canada are facing a significant deadline: June 1, 2026. This date marks the next annual progress report for accessibility, a critical juncture that underscores the growing importance of digital inclusion. While the Accessible Canada Act (ACA) has been in motion, the evolving landscape of accessibility standards, particularly the emergence of WCAG 2.2 and the European standard EN 301 549, necessitates a proactive and strategic approach. This isn't just about compliance; it's about embracing a future where digital spaces are truly accessible to all.

Understanding the Accessible Canada Act (ACA) and its Implications

The ACA aims to make Canada a more accessible place for everyone, including people with disabilities. For federally regulated private-sector organizations, this translates into a tangible responsibility to identify, remove, and prevent barriers to accessibility in various areas, including communication and information technology. The annual progress report is a key mechanism for demonstrating adherence to these principles. As the June 1, 2026 deadline approaches, organizations must move beyond basic compliance and integrate robust accessibility practices into their core operations.

The Evolution of Web Content Accessibility Guidelines (WCAG)

Web Content Accessibility Guidelines (WCAG) are the internationally recognized benchmark for web accessibility. Developed by the World Wide Web Consortium (W3C), these guidelines provide a framework for making web content more accessible to people with disabilities. The latest iteration, WCAG 2.2, builds upon its predecessors, introducing new success criteria and refining existing ones to address emerging challenges in digital accessibility.

Key enhancements in WCAG 2.2 include:

Focus Not Obscured (4.1.1): Ensuring that user interface components are not hidden behind other content when they receive focus. This is crucial for keyboard users and those using screen magnifiers.
Drag and Drop (2.5.7): Providing alternative methods for drag-and-drop functionality. This caters to users who may have difficulty with precise motor control or are using touch interfaces without multi-touch capabilities.
Motion Actuation (2.5.8): Offering alternatives for gestures or device motion. This addresses users who may experience motion sickness or have difficulty performing complex physical gestures.
Redundant Entry (3.3.7): Reducing the need for users to re-enter information. This streamlines user journeys and benefits users with cognitive disabilities or those who find repetitive tasks challenging.

These updates reflect a deeper understanding of the diverse needs of users and the complexities of modern web design and development. Embracing WCAG 2.2 now is not merely a forward-thinking strategy; it's a necessary step to ensure the future-proofing of digital assets and services.

The Significance of EN 301 549: A European Perspective with Global Impact

While WCAG provides the foundational principles for web content, EN 301 549 is a European standard that harmonizes accessibility requirements for ICT (Information and Communication Technology) products and services. It incorporates WCAG guidelines but also extends to other aspects of digital accessibility, including:

Hardware: Physical devices and their accessibility features.
Non-web software: Desktop applications, mobile apps, and other software not accessed via a web browser.
Documentation: User manuals and support materials.

For Canadian organizations operating in a global market, aligning with EN 301 549 can offer a competitive advantage and demonstrate a commitment to international accessibility best practices. The ACA, while Canadian in origin, benefits from the global dialogue on accessibility, and standards like EN 301 549 offer valuable insights and a comprehensive framework that can inform and strengthen Canadian accessibility initiatives.

Why Target WCAG 2.2 and EN 301 549 Now?

The June 1, 2026 deadline is not a distant future; it's a rapidly approaching reality. Organizations that delay their accessibility efforts risk falling behind, facing potential non-compliance issues, and, more importantly, failing to serve a significant portion of their audience. Targeting WCAG 2.2 and EN 301 549 proactively offers several key advantages:

1. Future-Proofing Digital Assets

By adopting the latest standards now, organizations can ensure their websites, applications, and digital content are built with future accessibility needs in mind. This avoids costly retrofitting and redesigns down the line, saving resources and time.

2. Enhanced User Experience for All

Accessibility is not just for people with disabilities; it benefits everyone. Clear navigation, well-structured content, and alternative formats improve usability for all users, including:

Users with temporary impairments (e.g., a broken arm).
Older adults with age-related changes in vision, hearing, or motor skills.
Individuals in diverse environmental conditions (e.g., bright sunlight affecting screen visibility, noisy environments requiring captions).
Users with slow internet connections benefiting from efficient content.

3. Expanded Market Reach and Customer Base

An accessible digital presence opens doors to a wider audience. By removing barriers, organizations can attract and retain customers who might otherwise be excluded. This can lead to increased customer loyalty and a stronger brand reputation.

4. Improved SEO Performance

Many accessibility best practices directly contribute to better Search Engine Optimization (SEO). These include:

Semantic HTML: Properly structured code helps search engines understand the content's hierarchy and meaning.
Descriptive alt text for images: Provides context for search engines when they can't "see" an image.
Clear headings: Establishes content structure and makes it easier for search engines to index.
Transcripts for multimedia: Makes audio and video content searchable and indexable.

Search engines favor well-structured, accessible content, leading to higher rankings and increased organic traffic.

5. Innovation and Competitive Advantage

Embracing accessibility can drive innovation. Developing inclusive solutions often leads to more robust, user-friendly, and competitive products and services. Organizations that lead in accessibility are often perceived as more socially responsible and forward-thinking, gaining a significant edge in the market.

6. Legal and Reputational Risk Mitigation

While the ACA focuses on progress, non-compliance can lead to complaints, investigations, and significant reputational damage. Proactive adoption of WCAG 2.2 and EN 301 549 demonstrates a strong commitment to legal obligations and ethical practices, protecting the organization's brand and trust.

Key Accessibility Considerations and Implementation Strategies

To effectively meet the upcoming deadline and embrace WCAG 2.2 and EN 301 549, organizations should focus on several key areas:

Alt Text for Images: A Cornerstone of Web Accessibility

Alternative text (alt text) is crucial for conveying the content and function of images to users who cannot see them. Screen readers read alt text aloud, allowing visually impaired users to understand the visual information. When writing alt text:

Be descriptive and concise: Provide enough information for the user to understand the image's purpose in context.
Avoid keyword stuffing: Alt text should be natural and informative, not just a list of keywords.
Omit "image of" or "picture of": Screen readers already identify the element as an image.
Use empty alt text (alt="") for decorative images: This tells screen readers to ignore the image, preventing unnecessary interruption.
Consider context: The alt text for an image in a product catalog will differ from the same image used as a background element.

Semantic HTML and Content Structure

Using semantic HTML elements (e.g., <nav>, <article>, <footer>, <h1> through <h6>) provides a clear structure to web content. This structure is vital for screen readers and other assistive technologies to navigate and understand the page. Proper heading hierarchies ensure users can quickly grasp the organization of information and jump to relevant sections.

Keyboard Navigability

All interactive elements on a website or application must be navigable and operable using only a keyboard. This includes links, buttons, form fields, and custom controls. Users who cannot use a mouse rely entirely on keyboard navigation. Ensure a logical tab order and visible focus indicators.

Clear and Understandable Language

Content should be written in clear, simple language. Avoid jargon and complex sentence structures where possible. Providing definitions for technical terms or acronyms can also enhance comprehension for a broader audience.

Multimedia Accessibility

For audio and video content, providing:

Captions: For deaf or hard-of-hearing users.
Transcripts: For a wider audience, including those who prefer reading or need to search content.
Audio descriptions: For videos, describing visual elements for visually impaired users.

Forms and Error Handling

Web forms should be clearly labeled, and error messages should be specific and easy to understand. Assistive technologies need clear identification of form fields and guidance on how to correct errors. Ensure form elements are programmatically associated with their labels.

Testing and Auditing

Regular accessibility testing is paramount. This should include:

Automated testing tools: To catch common issues.
Manual testing: With keyboard navigation and screen readers (e.g., NVDA, JAWS, VoiceOver).
User testing: With individuals with disabilities to gain real-world insights.

Accessibility audits can identify areas for improvement and ensure compliance with WCAG 2.2 and EN 301 549.

The Role of Training and Awareness

Implementing these changes requires more than just technical fixes. It necessitates a cultural shift within the organization. Training for designers, developers, content creators, and project managers on accessibility principles and best practices is crucial. Raising awareness among all employees about the importance of accessibility fosters a more inclusive mindset and encourages proactive consideration of accessibility in all projects.

Conclusion: Embracing Accessibility as a Strategic Imperative

The June 1, 2026, deadline for the ACA annual progress report is a clear signal that digital accessibility is no longer optional. For federally regulated private-sector organizations, proactively adopting WCAG 2.2 and considering the comprehensive framework of EN 301 549 is not just about meeting a compliance requirement. It's about embracing a strategic imperative that enhances user experience, expands market reach, improves SEO, drives innovation, and mitigates risk. By focusing on key elements like descriptive alt text, semantic HTML, keyboard navigability, and comprehensive testing, organizations can build digital experiences that are inclusive, equitable, and future-ready. The time to act is now.

Call to Action

Are you ready to meet the June 1, 2026 deadline and build truly accessible digital experiences?

Start your accessibility audit today.
Invest in training for your teams.
Prioritize WCAG 2.2 and EN 301 549 in your development cycles.

Share your thoughts and strategies for digital accessibility in the comments below! Let's build a more inclusive digital future together.