Size Availability - Everyday Interface Patterns

A static size availability readback shows Canvas Tote, Medium size, In stock availability, and Size preview status.

Program

Size availability readback should say what size is selected and whether it is available without a live stock check.

size_availability_readback.html

Visuals: captured from real browser rendering

<section class="size-availability" aria-labelledby="size-availability-title"><h2 id="size-availability-title">Size availability readback</h2><div class="size-row" aria-label="Static size availability preview"><span>Small</span><strong>Medium</strong><span>Large</span><span class="stock">In stock</span></div><dl>
  <div><dt>Product</dt><dd>Canvas Tote</dd></div>
  <div><dt>Size</dt><dd>Medium</dd></div><div><dt>Availability</dt><dd>In stock</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Size preview</span></dd></div></dl>
  <p class="check">Learner check: size and availability are readable without a live stock check.</p>
  <p class="note">Static size availability preview only; no framework, product API, inventory lookup, cart mutation, availability service, variant engine, click handler, keyboard handler, route change, storage, cookie, API, network, script, event listener, form submit, input, textarea, contenteditable, timer, analytics, object URL, download, service worker, account/session behavior, live product gallery, live variant change, live cart update, or live submission runs.</p></section>
<style>
  .size-availability { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #1d4ed8; padding: 12px; background: #eff6ff; }
  .size-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 32rem; }
  .size-row span, .size-row strong { border-radius: 6px; background: #dbeafe; padding: 8px; text-align: center; }
  .size-row strong { outline: 2px solid #1d4ed8; }
  .size-row .stock { background: #bbf7d0; }
  .size-availability dl { display: grid; gap: 8px; margin: 0; }
  .size-availability dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .size-availability dt { color: #475569; }
  .size-availability dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the size availability source.
The section is labelled by its visible heading.
Show size choices.
The static size row shows visible size and stock labels.
Show the pinned product row.
The product row gives the readback context without a product API.
Show the pinned availability state.
The selected size and availability are static pinned state.
Render size-preview status.
The status badge is the rendered consequence of the pinned availability state.
Check size availability readback.
Static markup, visual size affordance, readback, state update, rendered status, and no live stock check.

step flow step(1) labels the static source, step(2) shows the visual size affordance, step(3) shows the user readback, step(4) shows the pinned availability state update, step(5) shows the rendered consequence, and step(6) checks learner readback with honesty.

size readback The section heading names the size availability readback surface.

availability rows Product, Size, Availability, and Status values are exact pinned data.

no inventory lookup The lesson should not imply frameworks, product APIs, inventory lookups, cart mutations, availability services, variant engines, click handlers, keyboard handlers, route changes, storage, cookies, APIs, networks, scripts, event listeners, form submits, inputs, textareas, contenteditable surfaces, timers, analytics, object URLs, downloads, service workers, account/session behavior, live product galleries, live variant changes, live cart updates, or live submissions.