Missing Alt Warning - Everyday Interface Patterns

A static missing alt warning shows Product detail, Alt text missing problem, Add short description next step, and Needs review status.

Program

Missing alt warnings should show the problem and next step without running a validator service.

missing_alt_warning.html

Visuals: captured from real browser rendering

<section class="missing-alt" aria-labelledby="missing-alt-title"><h2 id="missing-alt-title">Missing alt warning</h2><dl>
  <div><dt>Image</dt><dd>Product detail</dd></div>
  <div><dt>Problem</dt><dd>Alt text missing</dd></div><div><dt>Next step</dt><dd>Add short description</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Needs review</span></dd></div></dl>
  <p class="check">Learner check: the missing alt problem is visible without running validation.</p>
  <p class="note">Static missing alt warning 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>
  .missing-alt { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b45309; padding: 12px; background: #fffbeb; }
  .missing-alt dl { display: grid; gap: 8px; margin: 0; }
  .missing-alt dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .missing-alt dt { color: #475569; }
  .missing-alt dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #fde68a; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the missing alt warning.
The section is labelled by its visible heading.
Show image row.
The image label is exact pinned data.
Show problem and next step rows.
The problem and next step are exact pinned data.
Render needs-review status.
The status badge says this needs review.
Check warning readback.
The check says the missing alt problem is visible without running validation.
Check warning honesty.
Image, problem, next step, status, and no live editing.

step flow step(1) labels the source, step(2) shows the image, step(3) shows problem and next-step rows, step(4) shows needs-review status, step(5) checks the warning readback, and step(6) checks the honesty note.

warning readback The section heading names the missing alt warning surface.

warning rows Image, Problem, Next step, and Status values are exact pinned data.

no validator service 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.