alt Is a Replacement, Not a Description

In one line

What to write in alt is decided not by what the picture depicts but by what the picture does in this spot. So even the same photo has different answers depending on where it is.

Why this was needed

"Put alt on images" is a rule everyone knows, so people usually do. The problem is what to put. Here is what you actually see in practice.

alt="이미지"
alt="banner_2024_final_v3.png"
alt="빨간 등산 배낭 45리터 제품 상세 페이지 바로가기 클릭"

The first tells you nothing, the second reads out a file name, and the third is so long you can't pick it out of a list. All three pass the "is alt there" check.

And accidents in the opposite direction happen even more often. It is putting descriptions on decorative pictures, so that meaningless sounds keep interrupting while the screen is read. A page where twenty divider images are all read as "line decoration" is unusable in itself.

How it works — the judgment comes from the position

The W3C's image decision tree sums up this judgment in a few questions. The essentials are as follows.

This picture's role	What to write in alt
It conveys content	That content, briefly
It is inside a link or button	Not the picture but the purpose of that link
The same description is already next to it	alt="" — being read twice is a hindrance
It is purely decorative	alt=""
It is a picture of text	That text as is
It is a graph or chart	One line of the main point + the actual values in the body

Two things must be distinguished here.

Not writing alt at all is different from alt="". If the attribute is missing, a screen reader judges that there is nothing to substitute and reads the file name (IMG_20240103.jpg). An empty string is an explicit declaration that "there is nothing to read," so it is quietly skipped. For decorative images, always write an empty alt.

And an image inside a link is especially often wrong. <a href="/"><img src="logo.svg" alt="회사 로고"></a> (the alt text is the Korean phrase for "company logo") is read as "company logo link." Nowhere does it say where the link goes. Here alt is not a description of the image but the name of the link, so alt="홈으로" (the Korean word for "to home") is right.

figure and figcaption

figcaption is not a substitute for alt. The two have different readers.

• alt — what you give in place of the picture to someone who can't see it
• figcaption — a description everyone sees. The source, when it was taken, the figure number

So if you write the same sentence in both, a screen reader user hears the same thing twice. If the caption already has all the content, it is better to leave alt="".

A table is a vessel for relationships

The way a table is read is completely different from a paragraph. A screen reader moves from cell to cell and reads together which row and which column that cell belongs to. What creates that connection is th and scope.

<table>
  <caption>월별 매출</caption>
  <thead>
    <tr><th scope="col">월</th><th scope="col">매출</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1월</th><td>1,200</td></tr>
  </tbody>
</table>

With scope, it is read like "January, sales, 1200." Without it, only the numbers are read one after another, and in a ten-column table there is no way to know what the number you are looking at is. The W3C's table tutorial even covers complex tables with two layers of header cells — for such tables, you write the connection for each cell with headers and id.

caption is the title of the table. When a page has several tables, it lets you skim and choose from a list.

Don't use tables for layout. If you declare the relationship of rows and columns when there is actually no relationship, the screen reader reads out a structure that doesn't exist.

What it looks like in the field

Automated check tools catch perfectly whether alt is present or not, but can't judge whether the content is right. That is why alt="이미지" (the Korean word for "image") passes every tool. A person has to make this judgment, and a judgment a person has to make is cheapest when made at the moment of creation.

What worked best in practice was not adding more rules but cutting the questions down to one.

If this picture doesn't load, what text should be in its place?

With this question, for a decoration the answer "nothing" comes naturally, and inside a link "where it goes" comes out. The urge to describe the picture is also naturally suppressed.

And if you use a content management system, what had a big effect was letting the upload screen leave alt empty but putting an "it's decorative" checkbox beside it. If you block it by making it a required field, people put in a single space and move on.

What to check in the next quiz

You check how the same picture changes depending on its position, the difference between alt="" and a missing attribute, the division of roles with figcaption, and what scope does in a table.