Alt Text (Alternative Text)


Alt text, short for “alternative text,” is a written description of an image that appears in the HTML code of a webpage. It serves as a text alternative when an image cannot be displayed or seen, providing context about what the image shows or its purpose on the page.

When you upload an image to WordPress, there’s an “Alt Text” field where you can add a description. This text is inserted into the HTML as the alt attribute of the image tag:

<img src="team-photo-2024.jpg" alt="Marketing team gathered around conference table during quarterly planning meeting">

Why it matters:

Screen Reader Accessibility

  • People who use screen readers (assistive technology for blind or visually impaired users) can’t see images
  • Screen readers read the alt text aloud, allowing these users to understand what the image shows and how it relates to the surrounding content

Legal Compliance

  • Under the Americans with Disabilities Act (ADA) and similar laws in other countries, websites are required to be accessible
  • Missing or poor alt text can lead to accessibility lawsuits

SEO Benefits

  • Search engines can’t “see” images—they read the alt text to understand what an image shows. Well-written alt text helps search engines:
  • Index your images properly
  • Understand page content better
  • Show your images in image search results
  • Determine page relevance for search queries

Broken Image Fallback

  • If an image fails to load (slow connection, broken link, deleted file), the alt text displays in its place
  • Visitors still know what was supposed to be there
  • Context When Images Are Disabled
  • Some users browse with images turned off to save bandwidth or improve page load speed
  • Alt text ensures they still understand your content

Writing good alt text:

Be Descriptive and Specific

  • Bad: “Image”
  • Bad: “Photo”
  • Bad: “IMG_2847.jpg”
  • Good: “CEO presenting quarterly sales results to board of directors”

Describe the Content and Purpose

  • Bad: “Picture of laptop”
  • Good: “Developer working on laptop reviewing WordPress code in text editor”

Keep It Concise but Meaningful

  • Aim for 125 characters or less (screen readers may cut off after this)
  • Include relevant details but don’t write an essay
  • Focus on what’s important about this specific image

Include Keywords Naturally (But Don’t Stuff)

  • Bad: “WordPress hosting managed WordPress hosting best WordPress host WordPress server”
  • Good: “Dashboard screenshot showing WordPress managed hosting performance metrics”

Context Matters

The same image might need different alt text depending on its purpose:

On a product page: “Black leather messenger bag with brass buckles and adjustable strap”
In a blog post about workplace fashion: “Professional using leather messenger bag during morning commute”

When to skip alt text:

Decorative Images

  • If an image is purely decorative and adds no informational value, use empty alt text: alt=””
  • This tells screen readers to skip the image entirely rather than reading the filename

Examples of decorative images:

  • Decorative borders or dividers
  • Background patterns
  • Spacer images
  • Images that duplicate information in adjacent text

Complex Images

  • For detailed infographics, charts, or diagrams, alt text alone isn’t enough
  • Use alt text for a brief description
  • Provide a longer description in the surrounding text or a linked document

Alt text vs. other image fields in WordPress:

  • Alt Text: For accessibility and SEO (required)
  • Title: Appears as tooltip on hover (optional)
  • Caption: Visible text displayed below image (optional)
  • Description: For internal organization in media library (optional, not visible on site)

Common alt text mistakes:

Using Filename as Alt Text

  • Bad: “IMG_0943.jpg” or “team-photo-final-v2.png”
  • The default filename is not descriptive or helpful

Starting with “Image of” or “Picture of”

  • Bad: “Image of a sunset over mountains”
  • Good: “Sunset over Rocky Mountains seen from Trail Ridge Road”
  • Screen readers already announce it’s an image

Keyword Stuffing

  • Bad: “Best WordPress hosting cheap WordPress hosting fast WordPress hosting managed WordPress hosting”
  • This is spammy, unhelpful, and may hurt SEO

Being Too Vague

  • Bad: “Team meeting”
  • Good: “Marketing team reviewing Q4 campaign performance in conference room”

Writing Long Paragraphs

  • Bad: “This is a photograph taken during our annual conference that shows our CEO standing at the podium in front of a large group of attendees while presenting the company’s financial results for the year and discussing future growth strategies…”
  • Too long; screen readers may truncate

Adding alt text in WordPress:

When Uploading:

  1. Upload image to Media Library
  2. Fill in “Alt Text” field on right side
  3. Click “Insert into post”

After Uploading:

  1. Click on image in post/page editor
  2. Look for “Alt text” field in block settings
  3. Add or edit description

In Media Library:

  1. Go to Media → Library
  2. Click on image
  3. Edit “Alternative Text” field
  4. Click “Update”

Checking for missing alt text:

Manual Check:

  • Right-click image → Inspect
  • Look for alt attribute in HTML

Browser Extensions:

  1. WAVE (Web Accessibility Evaluation Tool)
  2. axe DevTools
  3. Accessibility Insights

WordPress Plugins:

  • Accessibility Checker
  • SEO plugins often flag missing alt text

Alt text best practices summary:

Do:

  • Write clear, descriptive text
  • Include relevant keywords naturally
  • Consider context and purpose
  • Keep it concise (under 125 characters)
  • Use empty alt=”” for decorative images

Don’t:

  • Use “image of” or “picture of”
  • Keyword stuff
  • Use filename as alt text
  • Skip it entirely
  • Write novels

Alt text isn’t just a compliance checkbox—it’s about making your content accessible to everyone and helping search engines understand your visual content. Write clear, accurate descriptions that serve real people first. Good alt text practices benefit all your users and improve your site’s overall quality and discoverability.




EXPLORE TERMS

Accessibility

Accessibility in the context of web development refers to designing and building websites in a way that ensures all users, regardless of their abilities or disabilities, can access, navigate, and…

AJAX

AJAX stands for Asynchronous JavaScript and XML. It is a set of web development techniques used to create interactive and dynamic web applications by allowing parts of a web page…

API

An API (Application Programming Interface) is a set of rules and protocols that allows different software applications to communicate with each other. Essentially, an API acts as an intermediary that…

Backlink

Backlinks, also known as inbound links or incoming links, are links from one website to another. In the context of search engine optimization (SEO), backlinks are crucial because they signal…

Bandwidth

Bandwidth refers to the amount of data that can be transmitted between a website’s server and its users over a specific period of time, typically measured in megabytes (MB) or…

Brute Force Attack

A Brute Force Attack is a method used by attackers to gain unauthorized access to a system, account, or encrypted data by systematically trying every possible combination of passwords, encryption…