Alt Text Examples: Good vs Bad

Neglecting alt text means missing out on these opportunities and creating a less inclusive experience for a significant portion of your audience.

How to Write Good Alt Text & How to Check

Writing good alt text is a skill. Here’s a simple guide to get it right:

* Be Specific and Descriptive: Describe the content and function of the image in context. * Keep it Concise: Aim for a sentence or two. Screen readers will read the entire description aloud, so overly long text can be cumbersome. * Include Keywords Naturally: If a relevant keyword fits naturally into the description, include it. Avoid "keyword stuffing." * Skip "Image of..." or "Picture of...": Screen readers already announce an element as an image, so this is redundant. * Consider the Context: The alt text for a product image on an e-commerce page will be different from the same image used as a decorative divider on a blog.

How to Check Your Alt Text: You can inspect your page's HTML (right-click on an image and select "Inspect") or use an accessibility checker tool. For a free and user-friendly option, Osek.ai offers a comprehensive site audit that scans for missing or empty alt text across your entire website. It’s a quick way to find and fix these critical issues in bulk.

Example: Weak vs. Better Alt Text

Let's look at practical examples for a website selling handmade pottery.

Weak Alt Text Examples (Bad):

* For a product photo of a blue ceramic mug: alt="mug" * *Why it's bad:* It's too vague. Which mug? What color? What makes it special? It provides zero useful information to a screen reader user or a search engine. * For the same mug photo: alt="blue coffee mug ceramic pottery handmade buy now" * *Why it's bad:* This is keyword stuffing. It's an unnatural, spammy list of terms that creates a poor experience for screen reader users and can be seen as manipulative by search engines. * Using the filename as alt text: alt="IMG_4582.jpg" * *Why it's bad:* The filename is meaningless to humans and bots. It describes the file, not the image content.

Better Alt Text Examples (Good):

* For the product photo: alt="Handmade cobalt blue ceramic coffee mug with a matte finish on a wooden table" * *Why it's better:* It's specific (color, material, finish), descriptive (coffee mug), and sets a scene (on a wooden table). It includes natural keywords like "handmade," "ceramic," and "coffee mug." * For a decorative banner image of a potter's wheel: alt="" * *Why it's better (in this specific case):* If the image is purely decorative and adds no informational content, an empty alt attribute (alt="") is correct. This tells screen readers to skip the image, avoiding clutter. * For an image used as a link: alt="View our new ceramic bowl collection" * *Why it's better:* It describes the *function* of the image—it's a link to the bowl collection. This is clear and actionable.

Common Mistakes to Avoid

1. Leaving Alt Text Empty for Informational Images: Don't just skip it. An empty alt attribute should only be used for purely decorative visuals.
2. Being Overly Verbose: An alt text that is a full paragraph is rarely necessary. Get to the point.
3. Ignoring the Image's Context: A photo of a person on a "Meet the Team" page should include their name and role, not just "a person smiling."
4. Duplicating the Caption or Surrounding Text: Alt text should add unique value, not repeat text that's already visible next to the image.
5. Forgetting Alt Text on Buttons and Icons: If you have an image-based button (like a "Search" magnifying glass icon), its alt text must describe the button's action (e.g., alt="Search").

Quick Checklist for Writing Alt Text

Use this checklist before you publish:

• Does the alt text accurately describe the content of the image?
• Is it concise (typically under 125 characters)?
• Does it include relevant keywords naturally, without stuffing?
• Have I avoided starting with "Image of..." or "Photo of..."?
• For decorative images, have I set alt=""?
• For functional images (links, buttons), does the alt text describe the action?
• Have I run a check using a tool like Osek.ai to catch any missing alt text on my site?

Frequently Asked Questions (FAQ)

Q1: Is there a character limit for alt text? There isn't a strict technical limit, but best practice recommends keeping it under 125 characters. Some screen readers may truncate longer text. The goal is clarity and conciseness, not hitting a specific word count.

Q2: Should I include alt text on every single image? For any image that conveys meaning, yes. For purely decorative images (like a stylish background swirl that doesn't add information), you should use an empty alt attribute (alt=""). This tells assistive technology to skip it.

Q3: How is alt text different from an image caption? They serve different purposes. A caption is visible text below an image that provides commentary or attribution for sighted users. Alt text is hidden code that describes the image for accessibility and SEO. They can contain different information.

Q4: Can I use the same alt text for multiple images? No. Each image should have its own unique, descriptive alt text that matches its specific content and context. Duplicate alt text across different images is unhelpful.

Q5: How can I audit my website for missing alt text at scale? Manually checking every image is impractical on large sites. Using a specialized tool is the most efficient method. Free SEO tools like Osek.ai can crawl your entire site, generate a report of images missing alt text, and help you prioritize fixes to improve both accessibility and SEO performance.