What is Alternative Text (Alt Text)?

Alternative text, commonly called alt text, is a basic building block of web accessibility and image SEO. It gives a text description of an image, so people who can't see the image still get its meaning, and search engines understand what it shows. In this article, we explain what alt text is, why it matters, how to write it, and when an image should have no description at all.

What is Alternative Text (Alt Text)?

1. Definition:

• Alt text is a short, descriptive text assigned to an image on a webpage. It is added in the HTML code using the alt attribute in an <img> tag.

2. Purpose:

• The main purpose of alt text is to describe the content and function of an image to people who cannot see it. This includes blind and low-vision users who rely on screen readers, and anyone whose images fail to load on a slow mobile connection.

Why is Alt Text Important?

1. Accessibility:

• Screen readers read alt text aloud, so visually impaired users can understand what an image shows or does. Without it, they miss information or hear a meaningless file name instead.

2. SEO Benefits:

• Google says it uses alt text along with computer vision algorithms and the contents of the page to understand the subject of an image. Good alt text helps your images appear in Google Images and gives extra context to the page itself.

3. User Experience:

• When images fail to load because of slow connections or technical issues, browsers can show the alt text instead. The page still makes sense, which matters for visitors on patchy mobile data.

4. Compliance:

• Alt text is required to meet the Web Content Accessibility Guidelines (WCAG). The current W3C Recommendation, WCAG 2.2, says in success criterion 1.1.1 that all non-text content presented to users should have a text alternative that serves the equivalent purpose, with a few exceptions such as decorative images.

How to Write Effective Alt Text

1. Be Descriptive: Give a clear description of the image. Focus on what matters in the context of the page. The same photo might need different alt text on a product page and on a blog post about the photographer.

2. Be Specific: Use specific details that accurately describe the image. Google's own example shows the difference: "puppy" is fine, but "Dalmatian puppy playing fetch" is better.

3. Keep it Concise: Aim for a sentence or less that covers what the image contributes. You may have seen "under 125 characters" presented as a rule; it is a common rule of thumb, not a WCAG or Google requirement. If an image, such as a chart, needs a long explanation, give a short alt text and put the full details in the surrounding text or a caption.

4. Use Keywords Wisely: Include relevant keywords only when they describe the image. Google warns that filling alt attributes with keywords may cause your site to be seen as spam.

5. Contextual Relevance: Make sure the alt text fits the surrounding content and explains why the image is on this page.

6. Avoid Redundancy: Don't repeat information already in the surrounding text or caption. Also skip phrases like "image of" or "picture of"; screen readers already announce that it is an image.

7. Describe the Function of Linked Images: If an image is a link or button, such as a logo that goes to the homepage or a WhatsApp icon, the alt text should describe the action, for example "Softhat IT Solutions home" or "Chat with us on WhatsApp".

Decorative Images: When to Use an Empty Alt

Not every image needs a description. Background patterns, dividers, and purely decorative graphics add nothing to the meaning of the page. For these, the W3C recommends an empty alt attribute (alt="") so assistive technologies can ignore them.

Don't remove the alt attribute entirely. When it is missing, some screen readers announce the file name instead, such as "IMG_2024_final_v3.jpg", which only adds clutter.

Examples of Good and Bad Alt Text

1. Good Alt Text:

• “A group of five people hiking in the mountains during sunset.”
• “A red vintage car parked on a cobblestone street in a European city.”
• “Hand-embroidered black shawl with red floral pattern, folded.” (on a product page)

2. Bad Alt Text:

• “Image1.jpg”
• “Picture of car”
• “shawl shawls buy shawl online Pakistan best shawl price” (keyword stuffing)

How to Add Alt Text in HTML

1. Basic HTML Example:

2. CMS Platforms:

• Most content management systems (CMS), such as WordPress, Drupal, Joomla, and Shopify, provide a field to add alt text when uploading images. In WordPress, alt text set in the media library is used when you insert the image, so check it before publishing.

3. AI-Generated Alt Text:

• Some tools and CMS plugins now suggest alt text automatically using AI. These suggestions can save time, but they often miss context or get details wrong. Treat them as a draft and review each one, especially for product images and charts.

Conclusion

Alt text is a critical part of web accessibility and image SEO. Describe meaningful images clearly and in context, describe the action for linked images, and use alt="" for purely decorative ones. Do this consistently, and your site becomes easier to use for everyone and easier for search engines to understand.

Enhance Your Website's Accessibility and SEO with Expert Services!

Softhat IT Solutions builds accessible, fast, and search-friendly websites for businesses across Pakistan. Our web development services include proper image handling, alt text, and accessibility checks from the start. Want us to look at your current site? Book a free strategy call.