Using Alt Text Properly

The alt attribute (short for alternative text) describes the appearance and function of an image inside an HTML document. Using alt text correctly is arguably the most important rule in both Web Accessibility (a11y) and Image SEO.

If an image fails to load, the alt text is displayed on the screen in its place. More critically, screen readers read this text aloud so visually impaired users can understand what the image shows. Search engines also read the alt text to rank your page.

Every single img tag must include an alt attribute, but what you write inside it changes depending on the image's purpose.

1. Informational Images

If an image adds content or context to the page, the alt text must describe the image accurately and concisely. Do not start with "Image of..." or "Picture of..."; the screen reader already announces that it's an image.

2. Functional Images

Sometimes an image acts as a button or a link (like a magnifying glass icon for a search bar, or a social media logo). In this case, the alt text shouldn't describe the image itself, it should describe the action that occurs when you click it.

3. Decorative Images

If an image is purely decorative (like a background pattern, a colored divider, or a stylized flair) and adds no actual information to the page, you must still include the alt attribute, but you should leave it completely empty (alt="").

An empty alt attribute tells the screen reader "This image has no meaning, just skip right past it". If you forget the alt attribute entirely, many screen readers will attempt to read the entire garbled file name out loud.

Full Working Example

Below is a visual representation of how different images demand different types of alt descriptions:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Proper Alt Text Examples</title>
<style>
  body { font-family: sans-serif; margin: 20px; line-height: 1.6; max-width: 800px;}
  .example-block { margin-bottom: 30px; padding: 20px; border: 1px solid #ccc; border-radius: 8px; background: #fff;}
  .example-block img { max-width: 100%; height: auto; display: block; margin-bottom: 10px; border-radius: 4px; }
  .code-caption { background: #f4f4f4; padding: 10px; font-family: monospace; font-size: 0.9em; overflow-x: auto; color: #d63384; }
  h3 { margin-top: 0; color: #333; }
</style>
</head>
<body>

<div class="example-block">
    <h3>1. Descriptive (Informational Image)</h3>
    <p>This image contains important context for the article. The alt text describes exactly what is happening so a visually impaired user understands the scene.</p>
    
    <img src="/pix/samples/18s.jpg" alt="Three cats snuggled together sleeping, with one staring at the camera">
    <div class="code-caption">&lt;img src="/pix/samples/18s.jpg" alt="Three cats snuggled together sleeping, with one staring at the camera"&gt;</div>
  </div>

<div class="example-block">
    <h3>2. Functional (Image as a Link/Button)</h3>
    <p>When an image is wrapped in a link, the alt text shouldn't describe the image itself, it should describe what the button DOES.</p>
    <a href="/" target="_blank">
      <img src="/pix/icons/popup_icon_2.png" alt="Open home page in a new window">
    </a>
    <div class="code-caption">&lt;img src="/pix/icons/popup_icon_2.png" alt="Open home page in a new window"&gt;</div>
  </div>

<div class="example-block">
    <h3>3. Decorative (Ignored by Screen Readers)</h3>
    <p>This bullet graphic is purely decorative and adds no meaning to the page. By leaving the alt text completely empty (<code>alt=""</code>), screen readers will intelligently skip right past it.</p>
    <img src="/pix/samples/bullet1.png" alt="">
    <div class="code-caption">&lt;img src="/pix/samples/bullet1.png" alt=""&gt;</div>
  </div>

</body>
</html>

View Output Full Screen Preview