Avatar Crop Preview - Everyday Interface Patterns

A static avatar preview shows initials MC inside a 128 x 128 preview frame, with no image upload, file API, or crop algorithm.

Program

Avatar preview states should show the preview frame and readback text without pretending to crop or upload an image.

avatar_crop_preview.html

Visuals: captured from real browser rendering

<section class="avatar-card" aria-labelledby="avatar-title">
  <h2 id="avatar-title">Avatar preview</h2>
  <div class="preview" role="img" aria-label="Avatar preview initials MC">MC</div>
  <p><strong>Preview size</strong> 128 x 128</p>
  <button type="button">Use preview</button>
  <p class="note">Static avatar preview only; no image upload, file API, or crop algorithm runs.</p>
</section>
<style>
  .avatar-card { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .preview { display: grid; place-items: center; inline-size: 128px; block-size: 128px; border-radius: 50%; background: #dbeafe; color: #1e3a8a; font-size: 2rem; font-weight: 700; }
  .avatar-card p, .note { margin: 0; }
  .avatar-card button { justify-self: start; padding: 8px 12px; }
  .note { color: #475569; }
</style>

Label the avatar preview card.
The section is labelled by its visible heading.
Make the preview read as an image.
The preview has role img and an accessible label.
Show the pinned initials.
The avatar content is fixed initials text.
Show the preview size.
The size is visible as pinned text.
Show the preview affordance.
The button is type button and does not upload anything.
Check preview honesty.
Initials, size readback, button, and no crop algorithm.

preview frame The preview frame has a fixed 128 x 128 size.

readback label The preview has an accessible label for the initials.

no crop work The lesson should not imply uploads, file APIs, or crop algorithms.