Design Atlas
한국어
◉ Accessibility

Alt Text

대체 텍스트

The text a screen reader announces in place of an image. Meaningful images need a real description; decorative ones need an empty alt.

Also known as: alt attribute
···
html
<div class="stage" id="stage">
  <div class="pane">
    <div class="ph"></div>
    <div class="tag ok">Good</div>
    <div class="say" id="s1"></div>
  </div>
  <div class="pane">
    <div class="ph"></div>
    <div class="tag bad">Bad</div>
    <div class="say" id="s2"></div>
  </div>
  <div class="pane">
    <div class="ph deco"></div>
    <div class="tag deco">Decorative</div>
    <div class="say" id="s3"></div>
  </div>
</div>
css
.stage{width:96%;height:90%;display:flex;gap:3%}
.pane{position:relative;flex:1;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;align-items:center;padding:8% 4% 6%;gap:7%}
.ph{width:100%;flex:1;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-3));opacity:.85}
.ph.deco{opacity:.3}
.tag{font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.tag.ok{color:var(--accent-3)}
.tag.bad{color:var(--accent-2)}
.say{width:100%;min-height:26px;font:9.5px/1.3 ui-monospace,monospace;color:var(--fg);text-align:center;opacity:0;transition:opacity .3s ease}
.say.on{opacity:1}
.say.muted{color:var(--muted);font-style:italic}
js
const items = [
  { id: 's1', text: 'golden retriever, beach', muted: false },
  { id: 's2', text: 'IMG_2043.jpg', muted: false },
  { id: 's3', text: '(skipped)', muted: true },
];
function run() {
  items.forEach(function (it, i) {
    setTimeout(function () {
      const el = document.getElementById(it.id);
      el.textContent = it.text;
      if (it.muted) el.classList.add('muted');
      el.classList.add('on');
    }, i * 600);
  });
  setTimeout(function () {
    items.forEach(function (it) { document.getElementById(it.id).classList.remove('on'); });
  }, 3600);
}
run();
setInterval(run, 4400);

`img alt` isn't a fallback for when the image fails to load — it's the text a screen reader speaks **instead of** the image. A good alt describes what the image communicates in context. Reusing the filename (`IMG_2043.jpg`) or writing just "image" carries no information, which is functionally the same as having none.

Purely decorative images (background patterns, icons duplicating adjacent text) should get `alt=""` (empty string) so a screen reader skips them entirely. Omitting the alt attribute altogether is worse — some screen readers fall back to reading the file path.

The demo shows the same photo handled three ways, and what a screen reader actually says for each: a real description, meaningless text, and silence (skipped).

When to use

Every time you add an image, ask 'what would a user miss if this weren't here?' No answer means an empty alt; an answer is your alt text.