Alt Text: A Practical Guide for SEO and Accessibility

If there’s one web topic that never gets boring for me, it’s how small steps can spark big changes. In my work, I’ve met website owners who transform their sites’ reach and inclusiveness by fixing something as simple as image descriptions. It always feels rewarding to see those “aha” moments: Suddenly, an image isn’t just decorative, but connects with everyone—search bots, users on slow networks, and those using screen readers.

Good alternative image descriptions do much more than help search engines—they help people. That’s why on The Best SEO, I keep coming back to the subject. I see it as both a technical and human choice, with the right description weaving together website traffic and online inclusion.

What exactly are image alt attributes?

Let me set the stage: Alt text (short for “alternative text” or “image description”) is a written description included in the HTML of an image. Its primary role is to provide context and meaning for anyone who can’t see the picture—think of someone using a screen reader, or when images fail to load. But that’s not all. Search engines rely on it to understand images as well, improving your site’s chance of being found, as highlighted in articles in the SEO basics section of The Best SEO blog.

Every time you add an image to a page, you have a choice: Describe it well, skip it altogether, or end up somewhere in between.

According to the 2024 Web Almanac, nearly 69% of images passed the Google Lighthouse audit for alt text, up from 59% in 2022. This shows a heartening trend: more sites recognize the value of solid descriptions, not just for robots, but for everyone who visits.

Why describing images matters for both SEO and accessibility

On the surface, a description might look like a tiny detail, but I’ve watched it make a powerful difference:

• It unlocks content for users with visual impairments, who rely on screen readers to experience the web.
• It gives search engines clues about the subject and relevance of an image, supporting your content’s ranking.
• It can offer context for everyone in situations where an image doesn’t load—such as slow connections.

But there’s more to it. By describing images clearly, you’re building digital spaces that feel open and useful to all kinds of visitors. It’s the sort of detail professional content creators discuss in places like the content creation category of The Best SEO.

Inclusion is built one description at a time.

The main types of images and how to describe them

One of the first things I learned is that not all images carry the same weight. Some are central, some are just for appearance, and some do a job (like buttons or icons). The approach to describing them shifts depending on their role.

Functional images

These images aren’t for looks—they help users complete a task. Classic examples: a shopping cart icon, a magnifying glass for search, or a submit button.

Functional images must be described based on what action they perform, not what they look like.

Instead of “Magnifying glass,” describe as “Search.” If someone clicks it to perform a function, tell them what the function is.

Decorative images

Some images are purely visual and add nothing to understanding. Think: abstract backgrounds, simple borders, or extra ornamentation. Section508.gov mentions that for these, the description can be left empty (using alt=""), so screen readers skip them and avoid confusion for users. Guidance for this can be found on Section508.gov.

Complex images

Things like graphs, charts, or instructional diagrams don’t fit in a short phrase. Here, the description should either:

• Convey the summary in the alt attribute
• Provide a longer explanation nearby on the page (with the attribute pointing to it or referencing the context)

I typically keep the alt attribute short—“Bar chart of monthly sales, detailed data below”—and then offer extra info in a caption or paragraph.

How image descriptions help people using screen readers

For someone with low vision or blindness, a screen reader is often their main tool for navigating the web. When they arrive at an image, the software reads out the alternative description set in HTML. If it’s good, users get the same information as anyone else. If it’s missing or vague, a part of your site is cut off from them.

For example, I once helped review a website where every image was labeled just as “photo.” To a screen reader user, that’s as helpful as silence. But with proper descriptions—”Map of downtown with accessible routes highlighted” or “Close-up of a pink rose bloom”—the site came alive in ways that truly mattered.

Thoughtful descriptions unlock content for everyone.

Best practices for writing useful image descriptions

Writing a good description is a mix of clarity, relevance, and brevity. The following guidelines help me stay on target every time:

• Be specific and concise. For “Golden retriever running on grass,” don’t just write, “Dog.”
• Avoid repeating information already in surrounding text.
• Don’t include “image of” or “picture of.” Screen readers do that for you.
• Reflect the image’s purpose. If it’s a button, describe its function, not its color.
• Use keywords only if they fit naturally. Never force them or repeat them just for ranking.
• Limit alt descriptions to about 125 characters. Many screen readers cut off longer descriptions.

For complex visuals, I write a summary in the description and give full details elsewhere: “Annual energy usage graph, see detailed table below.”

How do I handle empty alt attributes properly?

For images that aren’t informative—those decorative swirls, logos without a link, etc.—it’s standard to leave the description empty (alt=””). This tells screen readers to ignore the image, so users aren’t interrupted by pointless content.

But if you forget to add the attribute altogether, some screen readers read the image file name, which can be confusing or meaningless (“logo-final-V7-NEW.png”). That’s why I always double-check the code, even for backgrounds or graphic lines.

Fitting descriptions in your HTML code

Adding image descriptions to your HTML is simple. The pattern looks like:

<img src=”golden-retriever.jpg” alt=”Golden retriever running on grass”>

If the image is only decorative:

<img src=”blue-border.png” alt=””>

This approach is universal—whether you use plain HTML, a CMS, or a web builder, learn how to spot and update this attribute.

Step-by-step: Adding alt text in popular CMS platforms

I’ve worked with many content managers, so here’s how I usually coach people through the process:

• WordPress: When you upload an image to the Media Library, look for the field labeled “Alternative Text.” Fill it with your description before you insert the image onto your page.
• Squarespace: Click an image and use the “Image Title” or “Filename (Alt)” field, depending on your version.
• Wix: With your image selected, use the “Settings” or “Accessibility” panel to enter your description.
• Custom Sites: Edit the raw HTML, making sure each <img> tag uses the alt attribute in line with its purpose.

Some platforms include extra options for long descriptions or linking to details (for charts and diagrams), so check your settings—this is one place where a quick review always pays off.

Common pitfalls to avoid

There’s a real art to writing good image descriptions, and a few frequent mistakes come up in my training sessions:

• Loading descriptions with search keywords (“best running shoes running running jog shoes”).
• Writing generic phrases (“picture,” “photo,” “graphic”).
• Repeating the file name as the description (which often happens by accident).
• Not filling in descriptions at all, especially on template-driven pages or with user-uploaded images.
• Missing the context—if a nearby heading says “Our Team,” and the image is a group photo, “Team at company retreat” is more useful than just “people.”

Descriptions work best when they fit neatly and naturally into the page context. When reviewing sites like those in website optimization, I always check for these slip-ups.

Compliance and standards: WCAG and Section 508

The Web Content Accessibility Guidelines (WCAG) set the gold standard for accessible websites. Among other things, they require alternative descriptions for meaningful images, as do U.S. Section 508 rules for government-related web content. Section508.gov confirms that the text should be brief, accurate, and in the page’s main language.

Good descriptions aren’t just a best practice—they help you meet legal and ethical standards, so I recommend them for every site, from hobby blogs to large organizations.

Reviewing and testing your alt attributes

I always recommend these tips for ongoing checks:

• Use screen readers (such as NVDA or VoiceOver) to navigate your website and check how image descriptions are read out.
• Try browser accessibility audits (like those in Chrome DevTools or third-party plugins) to find missing or problematic attributes.
• Ask a friend or colleague who uses assistive technology to review a few critical pages.

You’ll spot missing pieces, generic phrases, or misused keywords. Fixing these details doesn’t take long, and the improvement in inclusiveness and search performance is real.

Small changes, big impact.

Image file naming tips for SEO

Descriptions aren’t the only piece of the puzzle. File names matter too—search engines look at these when crawling your pages. Here’s what I suggest:

• Rename images with short, descriptive English words, joined by hyphens (“cherry-cheesecake-slice.webp”).
• Share what the file contains without going overboard—never stuff keywords into the file name.
• Keep them simple and avoid spaces or complex strings (no “IMG_93234FINALcopy.jpg”).

This adds a minor boost to search engines’ understanding—useful for any well-organized website, and doubly so for anyone interested in ranking strategies found in examples from The Best SEO.

Conclusion

When I step back and look at the effect of great image descriptions, what stands out is how many people benefit—site visitors, content creators, search engines, and anyone who wants an open web. The more I work with these details, the more I see them as a bridge: not just for page rank, but for building useful, friendly, and compliant websites.

If you’re passionate about reaching more people, describing your images properly is a habit worth building. At The Best SEO, my goal is to keep offering guidance so you can make your website work for everyone, search bots included. To learn more ways to improve your site’s visibility and accessibility, take a look at our tips in related posts or try our tool to simplify your own ranking journey. Your visitors—and your search results—will thank you.

Frequently Asked Questions

What is alt text and why use it?

Alt text is a brief description of an image’s content, written in HTML, used to help screen readers describe images to people with visual impairments and to help search engines understand the image’s context. It’s helpful for those who can’t see the image and improves your site’s search visibility. Meeting accessibility standards (such as WCAG and Section 508) often requires these descriptions on meaningful images.

How to write good alt text?

To write useful image descriptions, be clear and concise. Describe what’s in the image and its purpose, avoid unnecessary repetition or wordy phrases, and match the description to the surrounding content. Never stuff keywords, and don’t start with “image of” or “photo of.” For more advice, see resources from Section508.gov.

Does alt text help with SEO?

Yes, it helps search engines understand an image’s content and relevance, supporting image search and improving your page’s chance to rank higher. Descriptions that match the subject naturally can bring more visitors to your website from image search results. For example, descriptive text helps Google better index your pages, as seen in the latest surveys by the Web Almanac.

Where to add alt text in images?

You add alt descriptions in the HTML code using the alt attribute inside an <img> tag, or through your content management system (CMS) in the media or image settings panel. Always review your site’s code or CMS options to make sure every important image includes a useful description.

What are common mistakes with alt text?

Common mistakes include leaving image descriptions empty when they should be descriptive, stuffing them with keywords, using phrases like “image” or “photo,” repeating file names, or describing images that are only decorative. The best image descriptions are specific, brief, and match the image’s purpose and nearby content.