Image Alt Text Review Patterns

Decorative Choice

A static decorative image choice shows Divider flourish, Empty alt, Decorative purpose, and Not announced status.

Program

Decorative image choices should show that an empty alt value is intentional without inspecting a live accessibility tree.

decorative_image_choice.html
Visuals: captured from real browser rendering
<section class="decorative-choice" aria-labelledby="decorative-choice-title"><h2 id="decorative-choice-title">Decorative image choice</h2><dl>
  <div><dt>Image</dt><dd>Divider flourish</dd></div>
  <div><dt>Alt text</dt><dd>Empty alt</dd></div><div><dt>Purpose</dt><dd>Decorative</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Not announced</span></dd></div></dl>
  <p class="check">Learner check: the decorative choice is visible without inspecting a live tree.</p>
  <p class="note">Static decorative image choice only; no image upload, image fetch, file API, camera, OCR, AI captioning, accessibility-tree inspection, validator service, account lookup, storage, route, API, network, script, event listener, form submit, analytics, timer, or live editing runs.</p></section>
<style>
  .decorative-choice { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #1d4ed8; padding: 12px; background: #eff6ff; }
  .decorative-choice dl { display: grid; gap: 8px; margin: 0; }
  .decorative-choice dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .decorative-choice dt { color: #475569; }
  .decorative-choice dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the decorative choice.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show image row.

    The image label is exact pinned data.
    The image label is exact pinned data.

  3. Show empty alt and purpose rows.

    The empty alt choice and purpose are exact pinned data.
    The empty alt choice and purpose are exact pinned data.

  4. Render not-announced status.

    The status badge says the decorative image is not announced.
    The status badge says the decorative image is not announced.

  5. Check decorative readback.

    The check says the decorative choice is visible without inspecting a live tree.
    The check says the decorative choice is visible without inspecting a live tree.

  6. Check decorative honesty.

    Image, empty alt, purpose, status, and no live editing.
    Image, empty alt, purpose, status, and no live editing.
step flow step(1) labels the source, step(2) shows the image, step(3) shows empty alt and purpose rows, step(4) shows not-announced status, step(5) checks the decorative readback, and step(6) checks the honesty note.
decorative readback The section heading names the decorative image choice surface.
decorative rows Image, Alt text, Purpose, and Status values are exact pinned data.
no live tree inspection The lesson should not imply image uploads, image fetches, file APIs, cameras, OCR, AI captioning, accessibility-tree inspection, validator services, account lookups, storage, routes, APIs, networks, scripts, event listeners, form submits, analytics, timers, or live editing.