Sort Readback - Everyday Interface Patterns

A static sort order readback shows web buttons, Newest first, Button states guide, and Sorted display status.

Program

Sort readbacks should show the current sort and first visible result without implying a sorting engine or live reordering.

sort_order_readback.html

Visuals: captured from real browser rendering

<section class="sort-readback" aria-labelledby="sort-readback-title"><h2 id="sort-readback-title">Sort order readback</h2><dl>
  <div><dt>Query</dt><dd>web buttons</dd></div>
  <div><dt>Sort</dt><dd>Newest first</dd></div>
  <div><dt>Top result</dt><dd>Button states guide</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Sorted display</span></dd></div></dl>
  <p class="note">Static sort readback only; no sort algorithms, live search, search index, storage, route, API, network, script, form submit, analytics, timers, or live reordering run.</p></section>
<style>
  .sort-readback { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .sort-readback dl { display: grid; gap: 8px; margin: 0; }
  .sort-readback dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .sort-readback dt { color: #475569; }
  .sort-readback dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dcfce7; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the sort readback.
The section is labelled by its visible heading.
Show the query row.
The query is exact pinned data.
Show the sort row.
The sort order is exact pinned data.
Show the top result.
The top visible result is exact pinned data.
Render the sorted status.
The status badge says this is a sorted display.
Check sort honesty.
Query, sort, top result, status, and no live reordering.

step flow step(1) labels the source, step(2) shows the query, step(3) shows the sort order, step(4) shows the top result, step(5) shows the sorted status, and step(6) checks the honesty note.

sort readback The section heading names the sort order surface.

sort rows Query, Sort, Top result, and Status values are exact pinned data.

no live reordering The lesson should not imply sort algorithms, live search, search indexes, storage, routes, APIs, networks, scripts, form submits, analytics, timers, or live reordering.