Column Summary - Everyday Interface Patterns

A static table-column summary shows visible columns Name and Status, hidden column Owner, and Column visibility preview status.

Program

Column visibility summaries should say what is visible and what is hidden before any live column picker runs.

visible_column_summary.html

Visuals: captured from real browser rendering

<section class="visible-columns" aria-labelledby="visible-columns-title"><h2 id="visible-columns-title">Visible column summary</h2><table class="column-table" aria-label="Static visible columns table"><caption>Visible columns</caption><thead><tr><th>Name</th><th>Status</th></tr></thead></table><dl>
  <div><dt>Visible columns</dt><dd>Name and Status</dd></div>
  <div><dt>Hidden column</dt><dd>Owner</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Column visibility preview</span></dd></div></dl>
  <p class="check">Learner check: visible and hidden columns are named without a live picker.</p>
  <p class="note">Static column visibility summary only; no column picker engine, checkbox event, click handler, media query listener, ResizeObserver, table measurement, column reflow, row mutation, sort algorithm, filter query, API, network, storage, cookie, script, event listener, form submit, input, textarea, contenteditable, timer, analytics, object URL, download, service worker, account/session behavior, live table, live column chooser, live responsive table, or live submission runs.</p></section>
<style>
  .visible-columns { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .column-table { border-collapse: collapse; width: min(100%, 22rem); background: #ffffff; }
  .column-table caption { text-align: left; color: #475569; margin-bottom: 4px; }
  .column-table th { border: 1px solid #0f766e; padding: 8px; text-align: left; background: #ccfbf1; }
  .visible-columns dl { display: grid; gap: 8px; margin: 0; }
  .visible-columns dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .visible-columns dt { color: #475569; }
  .visible-columns dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the visible column summary.
The section is labelled by its visible heading.
Show table structure.
The static table shows the visible headers.
Show exact visibility rows.
The visible and hidden columns are exact pinned data.
Render column-visibility-preview status.
The status badge says this is a column visibility preview.
Check column readback.
The check says visible and hidden columns are named without a live picker.
Check column visibility honesty.
Table structure, visibility rows, status, and no live chooser.

step flow step(1) labels the source, step(2) shows the browser table structure, step(3) shows exact visibility rows, step(4) shows column-visibility-preview status, step(5) checks column readback, and step(6) checks the honesty note.

column readback The section heading names the visible column summary surface.

visibility rows Visible columns, Hidden column, and Status values are exact pinned data.

no live column picker The lesson should not imply a column picker engine, checkbox events, click handlers, media query listeners, ResizeObserver, table measurement, column reflow, row mutations, sort algorithms, filter queries, APIs, networks, storage, cookies, scripts, event listeners, form submits, inputs, textareas, contenteditable surfaces, timers, analytics, object URLs, downloads, service workers, account/session behavior, live tables, live column choosers, live responsive tables, or live submissions.