HTML Academy · Lesson

Image Alt Text When and How

Write alt text that conveys meaning for non-decorative images.

Image Alt Text When and How is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is alt Text?

The alt attribute provides alternative text for images:

Read by screen readers instead of the image
Displayed when the image fails to load
Indexed by search engines
Required for WCAG compliance

The Golden Rule

Alt text should convey the same information or function as the image would to a sighted user:

<!-- The test: if you removed this image,
     would the alt text give you the same information? -->

<!-- BAD: not descriptive -->
<img src="chart.png" alt="Chart">

<!-- GOOD: conveys the information -->
<img src="chart.png" alt="Bar chart showing 48% revenue increase from Q1 to Q4 2024">

Informative Images

Images that convey information: describe the content:

<img
  src="signup-flow.png"
  alt="Five-step signup flow: Email → Profile → Plan → Payment → Confirmation"
>

<!-- Describe what the image shows, not what it is -->
<!-- BAD: 'Image of a graph' -->
<!-- GOOD: 'Line graph showing download growth from 10k to 150k per month' -->

Decorative Images: Empty alt

Purely decorative images should have an empty alt to be skipped:

<!-- Decorative separator -->
<img src="divider.png" alt="">

<!-- Icon beside text that already describes it -->
<img src="warning-icon.svg" alt=""> <span>Payment failed</span>
<!-- The icon duplicates the adjacent text — empty alt is correct -->

<!-- Never omit alt entirely — missing alt attribute is an error
     Empty alt="" = intentionally decorative
     Missing alt = unknown, screen readers may read the filename -->

Functional Images

Images that serve a function — describe the function, not the appearance:

<!-- Logo that links to home -->
<a href="/">
  <img src="logo.svg" alt="CoddyKit — Go to homepage">
</a>
<!-- Describes the destination, not the logo's appearance -->

<!-- Submit button using an image -->
<input type="image" src="submit.png" alt="Submit registration form">
<!-- Describes what happens when activated -->

Complex Images: Figures and Long Descriptions

Complex charts or diagrams may need more than a short alt:

<figure>
  <img
    src="complex-diagram.png"
    alt="Network architecture diagram — see the description below"
    aria-describedby="diagram-desc"
  >
  <figcaption id="diagram-desc">
    <p>The diagram shows three tiers: a client layer with browsers and mobile apps,
       a middle tier with load balancers and app servers,
       and a data tier with primary and replica databases.</p>
  </figcaption>
</figure>

Images of Text

Avoid images of text — if you must use them, the alt must match the text exactly:

<!-- Logo with text 'CoddyKit' -->
<img src="text-logo.png" alt="CoddyKit">

<!-- Promotional banner with text 'Save 50% this week only' -->
<img src="promo.jpg" alt="Save 50% this week only">

<!-- Better: use real HTML text styled with CSS
     Images of text fail at zoom and high contrast modes -->

Context Changes alt

The same image may need different alt text in different contexts:

<!-- As part of an article about dogs: -->
<img src="golden.jpg" alt="Golden retriever fetching a yellow tennis ball">

<!-- As a product photo for 'Golden Retriever Dog Toy':
<img src="golden.jpg" alt="Golden retriever playing with our premium fetch toy">

<!-- As a decorative header image:
<img src="golden.jpg" alt=""> -->

alt Text Length

Guidelines for alt text length:

Keep it concise — no need to start with 'Image of' or 'Photo of'
Aim for under 125 characters (some screen readers truncate at 125)
For complex images, use a brief alt + aria-describedby for extended description
Do not stuff keywords — write for humans

Testing alt Text

How to test your alt text:

Disable images in browser (Firefox: Tools → Page Style → No Style)
Use WAVE tool to see all alt text at once
Listen with VoiceOver/NVDA to hear what is announced
Run Lighthouse: Accessibility → Image elements have [alt] attributes

SVG and Accessible Names

For inline SVG, provide accessible names differently:

<!-- Standalone SVG with title: -->
<svg role="img" aria-labelledby="icon-title">
  <title id="icon-title">Settings</title>
  <!-- SVG paths -->
</svg>

<!-- Decorative SVG: -->
<svg aria-hidden="true">
  <!-- paths -->
</svg>

Quick Check

What alt value should a purely decorative image have?

Recap: alt Text

Alt text essentials:

Always include alt attribute; use alt="" for decorative images
Describe the information, not the appearance
Functional images: describe the action/destination
Complex images: short alt + aria-describedby for full description
Images of text: alt must match the text exactly

Frequently asked questions

Is the “Image Alt Text When and How” lesson free?

Yes — the full text of “Image Alt Text When and How” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “Image Alt Text When and How”?

Write alt text that conveys meaning for non-decorative images. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Image Alt Text When and How” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy